:root {
  --silk-rich: #2B2936;
  --silk-mid: #797487;
  --silk-tint: #D8D5DD;
  --white: #FFFFFF;
}

@font-face {
    font-family: 'Electrolux';
    src: url('fonts/ElectroluxSans-SemiBold.woff2') format('woff2'),
        url('fonts/ElectroluxSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    }

@font-face {
    font-family: 'Electrolux';
    src: url('fonts/ElectroluxSans-Regular.woff2') format('woff2'),
        url('fonts/ElectroluxSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

.section1 h1,
.section2 h1,
.section3 h1,
.section4 h1,
.section5 h1,
.section5x h1,
.section6 h1,
.section7 h1,
.section8 h1 {
  font-family: 'Electrolux', sans-serif !important;
  font-weight: 600 !important;
}

.section1 h2,
.section2 h2,
.section3 h2,
.section4 h2,
.section5 h2,
.section5x h2,
.section6 h2,
.section7 h2,
.section8 h2 {
  font-family: 'Electrolux', sans-serif !important;
  font-weight: normal !important;
}

p {
  font-family: 'Electrolux', sans-serif !important;
  font-weight: normal !important;
}

*{
    margin:0px;
    padding:0px;
    line-height:100%;
}

html, body {
  overflow-x: hidden;
}

html, body {
  margin: 0;
  padding: 0;
}


.section1 {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.section1 .div{
  position: relative;
  aspect-ratio: 1920 / 937;
  width: 100%;
  max-width: 100%;
}

.section1 .div1{
  position: absolute;   /* desktop: imagem por trás */
  inset: 0;
}

.section1 .div1 picture{
  display: block;
  width: 100%;
  height: 100%;
}

.section1 .image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* bloco de textos */
.box1 {
    position: absolute;
    top: 22%;
    right: 13%;
    width: 36%;
    aspect-ratio: 1.11;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.div2 {
    display: flex;
    flex-direction: column;
    background-color: var(--silk-rich);
    width: 100%;
    height: 27%;
}

.logo {
    width: 50%;
    height: auto;
    padding: 8%;
    max-width: 100%;
}

.div3 {
    display: flex;
    flex-direction: column;
    background-color: var(--silk-rich);
    width: 100%;
    height: 36%;
}

.div4 {
    display: flex;
    flex-direction: column;
    background-color: var(--silk-mid);
    width: 100%;
}

.div3 h1 {
    color: var(--white);
    font-size: clamp(24px, 3.0vw, 80px);
    padding: 0 8%;
    line-height: 110%;
}

.div4 h2 {
    color: #fff;
    font-weight: normal;
    padding: 20px 8% 20px 8%;
    font-size: clamp(14px, 3vw, 45px);
    max-width: 600px;
    white-space: normal;
    word-break: break-word;
}

.section3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: var(--silk-mid);
}

.section3 {
  display: flex;
  width: 100%;
  background-color: var(--silk-mid);
}

  .div6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 50%;
    height: auto;
    max-width: 100%;
  }
  
  .image2 {
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.image2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.div7 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--silk-mid);
  padding: 50px 80px;
  box-sizing: border-box;
}

.icon1 {
  width: 72px;
  height: auto;
  display: block;
  margin: 0 0 32px 0; /* apenas espaço inferior */
}

.div7-1 {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.div7 h1 {
  color: var(--white);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.div7 h2 {
  color: var(--white);
  font-size: clamp(16px, 1.5vw, 50px);
  line-height: 1.4;
  margin: 0;
}
  
.section4 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 937;   /* ajuste a altura real da imagem */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #DFE7EA;
}

/* Imagem de fundo */
.div9 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.div9 .image3 {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* cobre toda a área */
  object-position: right center;
  display: block;
}

/* Conteúdo sobreposto */
.div8 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  width: 44%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.icon2 {
  width: 72px;
  height: auto;
}

.div8-1 {
  max-width: 750px;
  width: 100%;
  text-align: left;
}

.div8 h1 {
  color: var(--silk-rich);   /* #2B2936 */
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.div8 h2 {
  color: var(--silk-rich);   /* #2B2936 */
  font-size: clamp(14px, 1.5vw, 50px);
  line-height: 1.4;
  margin: 0;
}

.section5 {
  display: flex;
  width: 100%;
  background-color: var(--silk-mid);
}

/* bloco da imagem */
.div10 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 50%;
  height: auto;
  max-width: 100%;
}

.image4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* bloco do texto */
.div11 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--silk-mid);
  padding: 50px 80px;
  box-sizing: border-box;
}

.icon3 {
  width: 72px;
  height: auto;
  display: block;
  margin: 0 0 32px 0; /* apenas espaço inferior */
}

.div11-1 {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.div11 h1 {
  color: var(--white);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.div11 h2 {
  color: var(--white);
  font-size: clamp(16px, 1.5vw, 50px);
  line-height: 1.4;
  margin: 0;
}

/* ===== Section 5x (Diferenciais) ===== */
.section5x{
  background: var(--silk-rich);
  color:#fff;
  width:100%;
  padding: clamp(32px, 5vw, 64px) 0;
}

/* ↓↓ mantém tuas classes especiais */
.section5x .s5x-item.small-icon{ max-width:140px; }
.section5x .s5x-item.small-icon img{ width: clamp(52px, 6.5vw, 78px); height:auto; }

/* big-icon agora 180px (antes 210) */
.section5x .s5x-item.big-icon{ max-width:180px; }
.section5x .s5x-item.big-icon img{ width: clamp(70px, 8.5vw, 100px); height:auto; }

/* se você usar big-icon2 em algum item, mantive também */
.section5x .s5x-item.big-icon2{ max-width:180px; }
.section5x .s5x-item.big-icon2 img{ width: clamp(82px, 10vw, 117px); height:auto; }
/* ↑↑ mantém tuas classes especiais */

.section5x .s5x-wrap{
  margin:0 auto;
  padding:0 clamp(16px, 4vw, 36px);
  box-sizing:border-box;
}

.section5x .s5x-title{
  font-family:'Electrolux', sans-serif;
  font-weight:600;
  font-size:clamp(22px, 2.2vw, 34px);
  line-height:1.3;
  text-align:center;
  margin:0 0 clamp(24px, 3vw, 40px) 0;
}

/* ——— Telas grandes: 1 linha sem rolagem ——— */
.section5x .s5x-row{
  display:flex;
  flex-wrap: nowrap;                 /* uma linha até 1200px */
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 40px);
  /* sem overflow-x para não criar barra */
}

.section5x .s5x-item{
  flex: 1 1 auto;
  min-width: 140px;                  /* não “espreme” demais */
  max-width: 170px;                  /* valor base; especiais acima ajustam */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.section5x .s5x-item img{
  width: clamp(64px, 8vw, 96px);
  height:auto;
  margin-bottom:12px;
}

.section5x .s5x-item p{
  font-family:'Electrolux', sans-serif;
  font-weight:600;
  font-size:clamp(12px, 1.2vw, 16px);
  line-height:1.3;
  margin:0;
}

.section6 {
  display: flex;
  width: 100%;
  background: var(--silk-tint);
  color: var(--silk-rich);
  min-height: 627px; /* mesma altura base das outras sections */
}

/* Coluna de texto */
.section6 .s6-panel {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  padding: 50px 80px;
  box-sizing: border-box;
}

.section6 .s6-content {
  max-width: 680px;
  width: 100%;
  text-align: left;
}

.section6 h1 {
  font-family: 'Electrolux', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.section6 p {
  font-family: 'Electrolux', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.section6 .importante {
  font-weight: 600 !important;
  margin-top: 20px;
}

/* Coluna da imagem */
.section6 .s6-media {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}

.section6 .s6-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Section 7 – duas colunas, fundo silk-rich ===== */
.section7{
  width:100%;
  background: var(--silk-rich);
  color:#fff;
  display:block;
}

.section7 .s7-panel{
  max-width: 1280px;          /* largura do conteúdo */
  margin: 0 auto;
  padding: clamp(32px,5vw,72px) clamp(20px,6vw,80px);
  box-sizing: border-box;
}

.section7 .s7-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* duas colunas */
  gap: clamp(24px,4vw,56px);
  align-items: center;
}

.section7 h1{
  color:#fff;
  font-family:'Electrolux',sans-serif;
  font-weight:600;
  font-size: clamp(24px, 2vw, 34px);
  line-height:1.2;
  margin:0 0 16px 0;
  text-align:left;
}

.section7 h2{
  color:#fff;
  font-family:'Electrolux',sans-serif;
  font-weight:400;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height:1.2;
  margin:0 0 10px 0;
  text-align:left;
}

/* Coluna esquerda: título + intro */
.section7 .s7-intro{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Coluna direita: a listagem (mantida como h2 com bolinhas) */
.section7 .s7-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.section8 {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
  background-color: var(--silk-mid);
  width: 100%;
  height: clamp(120px, 18vw, 220px); /* altura menor e proporcional */
}

.logo2 {
  width: clamp(160px, 22vw, 340px); /* logo maior */
  height: auto;
}

/* Section 8 – logo anima de baixo pra cima */
.section8 .logo2{
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.section8 .logo2.reveal-in{
  opacity: 1;
  transform: none;
}


/* animação padrão: entra da esquerda */
.reveal-left{
  opacity: 0;
  transform: translate3d(-40px,0,0);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.reveal-left.in-view{
  opacity: 1;
  transform: translate3d(0,0,0);
}

@media (prefers-reduced-motion: reduce){
  .reveal-left,
  .reveal-left.in-view{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Imagens: entram de baixo pra cima */
.reveal-up{
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.reveal-up.in-view{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .reveal-up,
  .reveal-up.in-view{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/*responsivo*/

@media (max-width: 1820px) {

  .div4 h2 {
  font-size: clamp(14px, 3vw, 35px);
  }

  .div4 h2 br {
  display: none
}

}

@media (max-width: 1385px) {

  .div4 h2 {
  font-size: clamp(14px, 3vw, 30px);
    }

.section4 .div8 {
  right: 18%;
}

}


@media (max-width: 1250px) {
    .div4 h2 {
      font-size: clamp(14px, 2.5vw, 25px);
    }

    .div7-1 h2 br,
    .div16-1 h2 br {
      display: none;

    }

    .div14 {
      right: 5%;
      top: 5%;
}
  }

@media (max-width: 1150px) {
    .div4 h2 {
      font-size: clamp(14px, 2.3vw, 25px);
  }

}

  @media (max-width: 990px) {

    .section3 .div7 {
      padding: 40px 50px !important;
    }

    .section5 .div11 h1 br {
      display: none;
    }

    .section5 .div11 h2 br {
      display: none;
    }
  }

  @media (max-width: 900px) {

    .div20 br {
      display: none;
    }
  }

  @media (max-width: 830px) {
    .div9 {
      min-width: unset;
    }
  }

@media (max-width: 900px) {
  

    .div {
      flex-direction: column-reverse;
      aspect-ratio: unset;
      height: auto;
    }
  
    .box1 {
      position: relative;
      top: unset;
      right: unset;
      width: 100%;
      aspect-ratio: unset;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
    }
  
    .div2 {
      width: 100%;
      text-align: center;
      padding: 30px 0 20px 0;
    }
  
    .logo {
        width: 35%;
        min-width: 200px;
        max-width: 300px;
        margin: auto;
        padding: 0;
      }
  
    .div3 {
      width: 100%;
      text-align: center;
      padding: 4vw 0;
    }
  
    .div4 {
      width: 100%;
      text-align: center;
      padding: 2vw 0;
    }
  
    .div3 h1 {
      font-size: clamp(24px, 5vw, 32px); 
      overflow: hidden;
      margin: 0;
      padding: 0 5%;
      text-align: center;
    }
  
    .div4 h2 {
      font-size: clamp(16px, 3.5vw, 24px);
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: break-word;
      margin: 0 auto;
      padding: 0 5%;
      text-align: center;
      display: block;
    }
  
    .div3 h1 br,
    .div4 h2 br {
      display: none;
    }

  }

    @media (max-width: 900px){
  .section1 .div{
    display: flex;
    flex-direction: column-reverse; /* box1 primeiro, imagem depois */
    aspect-ratio: unset;
    height: auto;
  }

  .section1 .div1{
    position: relative;  /* tira do absoluto */
    inset: auto;
    width: 100%;
    height: auto;
  }

  .section1 .div1 picture{
    width: 100%;
    height: auto;
    display: block;
  }

  .section1 .image{
    width: 100%;
    height: auto;        /* imagem flui abaixo do texto */
    object-fit: cover;
  }

  .section1 .box1{
    position: relative;  /* bloco de logo/títulos vem no topo */
    top: auto;
    left: auto;
    width: 100%;
    aspect-ratio: unset;
    background: transparent;
  }

  /* seus alinhamentos mobile (se já tiver, mantêm) */
  .section1 .div2,
  .section1 .div3,
  .section1 .div4{
    text-align: center;
  }
}
    .div5 br {
      display: none;
    }

    .div6geral {
        margin-top: 0 !important;
      }
  
    .div1 {
      position: relative;
      width: 100%;
      height: auto;
    }
  
    .image {
      object-fit: cover;
      width: 100%;
      height: auto;
      display: block;
    }

    .image2 {
      height: auto;
    }

          @media (max-width: 900px) {
    .section5 .div13 {
        display: flex;
        flex-direction: column;
      }
    
      .div14 {
        position: static;
        order: -1;
        width: 100%;
        aspect-ratio: auto;
        text-align: center;
        padding: 20px 0;
      }

      .div14-1 {
        padding: 0 20px 0 20px;
      }
    
      .div14 h1,
      .div14 h2 {
        text-align: center;
      }
    
      .div14 br {
        display: none;
      }

      .div14 h1 {
          font-size: clamp(24px, 5vw, 32px);
        }


        .div14 h2 {
          font-size: clamp(16px, 3.5vw, 22px);
        }
    }

    @media (max-width: 900px) {
  .section3 {
    flex-direction: column-reverse;
    padding: 0;
  }
 
  .div7 {
    width: 100%;
    text-align: center;
    padding: 20px 30px;
  }

  .div7 h1 {
    font-size: clamp(24px, 5vw, 32px);
    padding-bottom: 10px;
    margin: 0 0 8px 0;
    text-align: center;
  }

  .div7 h2 {
    font-size: clamp(16px, 3.8vw, 22px);
    padding-bottom: 10px;
    text-align: center;
  }

  .div6 {
    width: 100%;
  }

  .image2 {
    padding: 0;
  }

  /* Aqui o segredo: centralizar o ícone */
  .icon1,
  .icon3 {
    display: block;
    margin: 0 auto 20px auto;   /* centraliza horizontal */
    width: 65px;                /* levemente menor no mobile */
  }
}

    @media (max-width: 900px) {
  /* container igual ao comportamento da section 3 */
  .section4{
    display: flex !important;
    flex-direction: column !important; /* text first, image depois (equivalente ao resultado de .section3) */
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    aspect-ratio: unset !important; /* remove trava de altura do desktop */
    height: auto !important;
    background-color: var(--silk-mid);
  }

@media (max-width: 900px){
  .section4 .div8 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 40px 30px !important;   /* agora vai ter respiro lateral */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;  /* alinhado à esquerda */
    text-align: left !important;         /* alinhado à esquerda */
    gap: 20px !important;
    box-sizing: border-box;              /* garante que padding conta na largura */
  }
}

  .section4 .icon2{
    align-self: center !important;
    width: 65px !important;          /* matching do ícone da section 3 */
    margin: 0 0 12px 0 !important;
  }

  .section4 .div8-1{
    width: 100% !important;
    max-width: 620px !important;     /* mesmo limite de leitura da section 3 */
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* fontes exatamente como na section 3 mobile */
  .section4 .div8-1 h1{
    font-size: clamp(24px, 5vw, 32px) !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    color: var(--silk-rich) !important;
  }
  .section4 .div8-1 h2{
    font-size: clamp(16px, 3.8vw, 22px) !important;
    line-height: 1.4 !important;
    color: var(--silk-rich) !important;
  }
  .section4 .div8-1 br{ display:none !important; }

  /* imagem vira bloco (como a da section 3) */
  .section4 .div9{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    inset: auto !important;
    pointer-events: auto !important;
    order: 2; /* texto primeiro, imagem depois */
  }
  .section4 .div9 .image3{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ===== Section 5 – Mobile (<= 900px) ===== */
@media (max-width: 900px) {
  .section5 {
    flex-direction: column-reverse;     /* empilha no mobile */
  }

  .section5 .div11 {
    width: 100%;
    padding: 40px 30px;
    background: var(--silk-rich);
    display: flex;
    flex-direction: column;
    align-items: center;        /* centraliza ícone + textos */
    text-align: center;         
  }

  .section5 .icon3 {
    width: 72px;
    margin-bottom: 24px;
    align-self: center !important;  /* força centralização */
  }

  .section5 .div11-1 {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    text-align: center;          /* garante centralização dos textos */
  }

  .section5 .div11-1 h1 {
    font-size: clamp(22px, 5vw, 28px);
    margin-bottom: 12px;
    color: var(--white);
  }

  .section5 .div11-1 h2 {
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 1.55;
    color: var(--white);
  }

  .section5 .div10 {
    width: 100%;
    height: auto;
  }

  .section5 .div10 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

/* section 5x */
@media (max-width:1200px){
  .section5x .s5x-row{
    flex-wrap: wrap;
    justify-content: center;         /* centraliza as linhas quebradas */
    row-gap: clamp(16px, 3vw, 28px); /* espaçamento vertical entre linhas */
  }
}

@media (max-width: 780px){
  .section5x .s5x-grid{
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
  .section5x .s5x-icon{
    max-width: 120px;
  }
}
@media (max-width: 520px){
  .section5x .s5x-grid{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .section5x .s5x-icon{
    max-width: 150px;               /* um pouco maior no 2-col */
  }
}

/* ===== Section 6 – Mobile (<= 900px) ===== */
@media (max-width: 900px) {
  .section6 {
    flex-direction: column;     /* empilha */
    min-height: unset;
  }

  .section6 .s6-panel {
    flex: 0 0 auto;
    width: 100%;
    padding: 30px 24px;         /* padding mais contido no mobile */
  }

  .section6 .s6-content {
    max-width: 640px;           /* bloco centralizado */
    margin: 0 auto;
    text-align: left;           /* centralizado no container, mas alinhado à esquerda */
  }

  .section6 h1 {
    font-size: clamp(22px, 5vw, 28px);
    margin-bottom: 12px;
  }

  .section6 p {
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.55;
  }

  .section6 .s6-media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;               /* deixa a altura fluir */
  }

  .section6 .s6-media img {
    width: 100%;
    height: auto;               /* não “estoura” verticalmente */
    object-fit: cover;
    display: block;
  }
}

/* ===== Responsivo (<= 900px): empilha e centraliza visualmente mantendo alinhamento à esquerda ===== */
@media (max-width:900px){
  .section7 .s7-grid{
    grid-template-columns: 1fr;
    gap: clamp(18px,4vw,28px);
    box-sizing: border-box;
    max-width: 640px;      /* <<< largura máxima no mobile */
    margin: 0 auto;        /* <<< centraliza o grid */
    padding: 0 20px 0 0;       /* <<< respiro nas laterais */
    text-align: left;      /* <<< garante textos alinhados à esquerda */
  }
}

@media (max-width: 768px) {
  .section3 .div6 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section3 .div6 picture {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 70%;
  }

  .section3 .div6 picture img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    padding-top: 50px;
  }
}

@media (max-width:450px){
  .section7 .s7-intro br {
    display: none;
  }
}

/* ===== 1200px → 693px: 4 em cima / 3 embaixo ===== */
@media (max-width: 1200px) and (min-width: 693px) {
  .section5x .s5x-row{
    display: grid;                           /* em vez de flex aqui */
    grid-template-columns: repeat(4, 1fr);   /* 4 colunas na 1ª linha */
    gap: clamp(20px, 2.5vw, 40px);
    justify-content: center;
    justify-items: center;                   /* centraliza cada card */
  }
  .section5x .s5x-item { max-width: 160px; } /* preserva largura dos cards */
}

/* ===== Até 692px: 2 colunas, último centralizado ===== */
@media (max-width: 692px) {
  .section5x .s5x-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    justify-content: center;
    justify-items: center;
  }
  .section5x .s5x-item:last-child{
    grid-column: 1 / -1;     /* ocupa as 2 colunas (centraliza sozinho) */
    justify-self: center;
  }
}

/* ===== Até 475px: 1 coluna ===== */
@media (max-width: 475px) {
  .section5x .s5x-row{
    grid-template-columns: 1fr;
  }
  .section5x .s5x-item:last-child{
    grid-column: auto;       /* volta ao normal */
  }
}


/* ===== Section 5x – ajuste fino de centralização (<= 692px) ===== */
@media (max-width: 692px) {
  /* vira grid para controlar colunas e centralizar perfeitamente */
  .section5x .s5x-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* todas as células com a mesma base */
    gap: 22px;
    justify-content: center;   /* centraliza o conjunto */
    justify-items: center;     /* centraliza cada célula dentro da coluna */
    align-items: start;
  }

  /* todos os cards com a MESMA largura para não “puxar” pro lado */
  .section5x .s5x-item{
    width: 200px;
    max-width: 200px;
    min-height: 150px;         /* estabilidade vertical (opcional) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* mantém variações só no tamanho do ícone, não na largura do card */
  .section5x .s5x-item img{
    width: 78px;               /* base confortável no mobile */
    height: auto;
  }
  .section5x .s5x-item.small-icon img{ width: 68px; }
  .section5x .s5x-item.big-icon img{   width: 90px; }
  .section5x .s5x-item.big-icon2 img{  width: 96px; }
}

/* ===== Até 692px: duas colunas, último centralizado ===== */
@media (max-width: 692px) {
  .section5x .s5x-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    justify-content: center;
    justify-items: center;
  }

  .section5x .s5x-item:last-child {
    grid-column: 1 / -1;   /* ocupa as 2 colunas */
    justify-self: center;  /* centraliza */
  }
}

/* ===== Até 475px: todos em uma coluna ===== */
@media (max-width: 400px) {
  .section5x .s5x-row{
    grid-template-columns: 1fr; /* uma única coluna */
  }

  .section5x .s5x-item:last-child {
    grid-column: auto; /* volta ao normal */
  }
}

/* === 1200px → 693px: 4 em cima / 3 CENTRALIZADOS embaixo === */
@media (max-width: 1200px) and (min-width: 693px) {
  .section5x .s5x-row{
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.5vw, 40px);
    row-gap: clamp(16px, 3vw, 28px);
    justify-items: center;
    align-items: start;
  }

  /* largura base dos cards neste range (mantém suas variações) */
  .section5x .s5x-item{ max-width: 170px; }

  /* 1ª linha: 4 itens (3 col cada) */
  .section5x .s5x-item:nth-of-type(1){ grid-column:  1 / span 3; }
  .section5x .s5x-item:nth-of-type(2){ grid-column:  4 / span 3; }
  .section5x .s5x-item:nth-of-type(3){ grid-column:  7 / span 3; }
  .section5x .s5x-item:nth-of-type(4){ grid-column: 10 / span 3; }

  /* 2ª linha: 3 itens CENTRALIZADOS (4 col cada) */
  .section5x .s5x-item:nth-of-type(5){ grid-column:  1 / span 4; }
  .section5x .s5x-item:nth-of-type(6){ grid-column:  5 / span 4; }
  .section5x .s5x-item:nth-of-type(7){ grid-column:  9 / span 4; }
}