:root {
  --blue: #041E50;
  --blue-mid: #7A8A9C;
  --blue-light: #ADB9C3;
  --blue-tint: #DFE7EA;
  --white: #FFFFFF;
}

@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;
    }

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

/* SemiBold como 600 */
@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-display: swap;
}

/* SemiBold também respondendo como 800 */
@font-face {
  font-family: 'Electrolux';
  src: url('fonts/ElectroluxSans-SemiBold.woff2') format('woff2'),
       url('fonts/ElectroluxSans-SemiBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


.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 / 1140;
  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: 11%;
    right: 7%;
    width: 38%;
    aspect-ratio: 1.11;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

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

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

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

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

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

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

/* ===================================== */
/* SECTION 2
/* ===================================== */

.section2 {
    width: 100%;
    background-color: var(--blue);
    padding: 5% 0;
}

.section2 .video-framed-width {
    width: 86.04651163%;
    max-width: 86.04651163%;
    margin: 0 auto;
}

.section2 .video-framed-width iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* ===================================== */
/* SECTION 3 – NOVO PADRÃO */
/* ===================================== */

.section3 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* imagem ocupa tudo */
.section3 picture,
.section3-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* conteúdo sobreposto */
.section3-content {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  width: 35%;
  max-width: 600px;
  color: var(--white);
}

.section3-content h1 {
  font-size: clamp(28px, 2.6vw, 46px);
  margin: 20px 0 16px 0;
  line-height: 1.1;
}

.section3-content h2 {
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.15;
  font-weight: 400;
}

.section3 .icon1 {
  width: 95px;
  height: auto;
}
  
/* ===================================== */
/* SECTION 4 – DESKTOP */
/* ===================================== */

.section4{
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* imagem de fundo padrão do projeto */
.section4-image{
  width: 100%;
  height: auto;
  display: block;
}

/* box azul mid */
.section4-box{
  position: absolute;
  left: 70px;
  top: 40%;
  transform: translateY(-50%);
  width: clamp(320px, 42vw, 520px);
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 56px);
  box-sizing: border-box;
}

/* ícone redondo */
.section4-badge{
  width: 95px;
  height: auto;
  display: block;
  margin: 0 0 22px 0;
}

/* título */
.section4-title{
  margin: 0 0 16px 0;
  color: var(--white);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.2;
}

/* texto */
.section4-text{
  margin: 0;
  color: var(--white);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 50px);
  line-height: 1.2;
}

/* ===================================== */
/* SECTION 5 – DESKTOP */
/* ===================================== */

.section5{
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* imagem de fundo padrão do projeto */
.section5-image{
  width: 100%;
  height: auto;
  display: block;
}

/* box azul mid */
.section5-box{
  position: absolute;
  right: 60px;
  top: 47%;
  transform: translateY(-50%);
  width: clamp(320px, 42vw, 480px);
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 56px);
  box-sizing: border-box;
}

/* ícone redondo */
.section5-badge{
  width: 95px;
  height: auto;
  display: block;
  margin: 0 0 22px 0;
}

/* título */
.section5-title{
  margin: 0 0 16px 0;
  color: var(--blue);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.2;
}

/* texto */
.section5-text{
  margin: 0;
  color: var(--blue);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 50px);
  line-height: 1.2;
}

/* ===================================== */
/* SECTION 6 – DESKTOP */
/* ===================================== */

.section6{
  width: 100%;
  background: var(--blue-tint);
  overflow: hidden;
  box-sizing: border-box;
}

.section6-inner{
  width: 100%;
  max-width: 1320px;               /* centraliza conteúdo */
  margin: 0 auto;
  padding: clamp(28px,3vw,46px) clamp(24px,4vw,60px) clamp(28px,3vw,46px) clamp(100px,12vw,200px);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;         /* evita extremos */
  gap: clamp(30px,4vw,70px);
}

/* BLOCO DE TEXTO */

.section6-content{
  flex: 0 1 580px;
  max-width: 580px;
}

.section6-text{
  margin: 0 0 22px 0;
  color: var(--blue);
  font-weight: 400;
  font-size: clamp(18px,2.6vw,28px);
  line-height: 1.3;
}

.section6-text strong{
  font-weight: 800;
}

/* BOTÃO */

.section6-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 22px 38px;        /* botão maior */
  border-radius: 14px;

  background: var(--blue);
  color: var(--white);

  font-family: 'Electrolux', sans-serif;
  font-weight: 600;
  font-size: 18px;           /* texto maior */
  letter-spacing: .08em;

  text-decoration: none;

  transition: transform .2s ease, opacity .2s ease;
}

.section6-btn:hover{
  opacity: .95;
  transform: translateY(-1px);
}

.section6-btn:active{
  transform: translateY(0);
}

/* BLOCO DA IMAGEM */

.section6-media{
  flex: 0 1 560px;
  max-width: 560px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMAGEM COM 70% DO TAMANHO */

.section6-media img{
  width: 70%;
  height: auto;
  display: block;
}

/* ===================================== */
/* SECTION 7 – DESKTOP (FINAL) */
/* ===================================== */

.section7{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* imagem real, proporcional */
.section7-media{
  display: block;
  width: 100%;
}

.section7-bg{
  display: block;
  width: 100%;
  height: auto;          /* <- não corta */
}

/* box sobreposto */
.section7-box{
  position: absolute;
  right: 95px;
  bottom: 80px;
  background-color: var(--blue);
  color: var(--white);

  padding: 40px 50px;
  max-width: 560px;
  box-sizing: border-box;
}

/* tipografia padrão (não mexe no estilo do seu site, só garante Electrolux) */
.section7-box h1{
  font-family: 'Electrolux', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.1;
  margin: 0 0 18px 0;
}

.section7-box h2{
  font-family: 'Electrolux', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.35;
  margin: 0;
}

.section7-box strong{
  font-weight: 600;
}

/* =========================
   SECTION 7.1 – Especificações Técnicas
   ========================= */
.section71-specs{
  width: 100%;
  background: var(--blue-mid);
  color: var(--blue);
}

.section71-specs .s71-wrap{
  max-width: min(1440px, 92vw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
}

/* Cabeçalho */
.section71-specs .s71-head h1{
  font-family: 'Electrolux', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.25;
  margin: 0 0 14px 0;
}

.section71-specs .s71-head h2{
  font-family: 'Electrolux', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.1;
  margin: 0 0 clamp(20px, 3.6vw, 36px) 0;
}

/* Grid principal (tabelas | imagem) */
.section71-specs .s71-grid{
  display: grid;
  grid-template-columns: clamp(460px, 56vw, 760px) 1fr;
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}

/* Tabelas: mesma lógica do s10 */
.section71-specs .s71-tables{
  max-width: clamp(460px, 56vw, 760px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}

.section71-specs .s71-card-pack{ grid-column: 1; grid-row: 1; }
.section71-specs .s71-card-emb { grid-column: 1; grid-row: 2; }
.section71-specs .s71-card-des { grid-column: 2; grid-row: 2; }

.section71-specs .s71-card{ width: 100%; }

/* Título azul */
.section71-specs .s71-card-title{
  display: block;
  width: 100%;
  background: var(--blue);
  color: #fff;
  font-family: 'Electrolux', sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.2vw, 18px);
  padding: 16px;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Conteúdo da embalagem */
.section71-specs .s71-list{
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  width: 100%;
}

.section71-specs .s71-list li{
  background: #fff;
  color: var(--blue);
  font-family: 'Electrolux', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.25;
  padding: 12px 14px;
  border-radius: 8px;
  min-height: 48px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

/* Tabelas Embalado/Desembalado */
.section71-specs .s71-table{
  width: 100%;
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.section71-specs .s71-row{
  background: #fff;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 14px;
  min-height: 48px;
  box-sizing: border-box;
  width: 100%;
}

.section71-specs .s71-label,
.section71-specs .s71-value{
  color: var(--blue);
  font-family: 'Electrolux', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.25;
}

/* Imagem direita */
.section71-specs .s71-media{
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0;
}

.section71-specs .s71-media img{
  width: 100%;
  max-width: clamp(350px, 35vw, 700px);
  height: auto;
  display: block;
}

.section8 {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
  background-color: var(--blue);
  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);
  }

}

@media (max-width: 1385px) {

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

.section4 .div8 {
  right: 18%;
}

}


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

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

    }

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

@media (max-width: 1250px) {
    .section6-text{
    font-size: clamp(18px, 2.2vw, 26px);
  }
}

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

}

  @media (max-width: 990px) {

    .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) {
    .section2 {
        background-color: var(--blue-light) !important;
        padding: 8% 0;
    }

    .section2 .video-framed-width {
        width: 92%;
        max-width: 92%;
        margin: 8% auto;
    }

    .section2 .video-framed-width iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

  @media (max-width: 900px) {

  .section3{
    display: flex;
    flex-direction: column;
    background: transparent !important;
  }

  /* BLOCO DE TEXTO */
  .section3-content{
    order: 1;
    position: relative;
    transform: none;
    left: unset;
    width: 100%;
    max-width: none;
    padding: 40px 24px;
    text-align: center;
    background: var(--blue);
    box-sizing: border-box;
  }


  /* IMAGEM */
  .section3 picture{
    order: 2;
    width: 100%;
  }

  .section3-bg{
    width: 100%;
    height: auto;
    display: block;
  }

  /* Título */
  .section3-content h1{
    margin: 20px 0 14px 0;
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.15;
    color: var(--white);
  }

  /* Texto */
  .section3-content h2{
    margin: 0;
    font-size: clamp(16px, 4.2vw, 22px);
    line-height: 1.35;
    color: var(--white);
  }

  /* Ícone centralizado */
  .section3 .icon1{
    display: block;
    margin: 0 auto 18px auto;
    width: 65px;
    height: auto;
  }
}

/* ===================================== */
/* SECTION 4 – MOBILE */
/* ===================================== */

@media (max-width: 900px){

  .section4{
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* box em cima, imagem embaixo */
  }

  /* BOX (topo) */
  .section4-box{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    padding: 40px 24px;
    background-color: var(--blue);
    box-sizing: border-box;
    text-align: center;
  }

  .section4-badge{
    width: 64px;
    height: auto;
    display: block;
    margin: 0 auto 18px auto;
  }

  .section4-title{
    margin: 0 0 14px 0;
    color: var(--white);
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.15;
    text-align: center;
  }

  .section4-text{
    margin: 0;
    color: var(--white);
    font-weight: 400;
    font-size: clamp(16px, 4.2vw, 22px);
    line-height: 1.35;
    text-align: center;
  }

  .section4-text br{
    display: none;
  }

  /* IMAGEM (embaixo) */
  .section4-image{
    width: 100%;
    height: auto;
    display: block;
    order: 2;
  }
}

/* ===================================== */
/* SECTION 5 – MOBILE */
/* ===================================== */

@media (max-width: 900px){

  .section5{
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* box em cima, imagem embaixo */
  }

  /* BOX (topo) */
  .section5-box{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;

    width: 100%;
    padding: 40px 24px;
    background-color: var(--blue-light);

    box-sizing: border-box;
    text-align: center;

    order: 1;
  }

  .section5-badge{
    width: 64px;
    height: auto;
    display: block;
    margin: 0 auto 18px auto;
  }

  .section5-title{
    margin: 0 0 14px 0;
    color: var(--blue);
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.15;
    text-align: center;
  }

  .section5-text{
    margin: 0;
    color: var(--blue);
    font-weight: 400;
    font-size: clamp(16px, 4.2vw, 22px);
    line-height: 1.35;
    text-align: center;
  }

  .section5-text br{
    display: none;
  }

  /* PICTURE (imagem embaixo) */
  .section5 picture{
    width: 100%;
    display: block;
    order: 2;
  }

  .section5-image{
    width: 100%;
    height: auto;
    display: block;
  }

}

/* ===================================== */
/* SECTION 6 – MOBILE (REVISADO) */
/* ===================================== */

@media (max-width: 900px){

  .section6{
    width: 100%;
    background: var(--blue-tint);
    overflow: hidden;
    box-sizing: border-box;
  }

  .section6-inner{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    padding: 40px 24px 28px 24px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 22px; /* respiro entre botão e imagem */
  }

  /* BLOCO DE TEXTO */
  .section6-content{
    width: 100%;
    max-width: 560px;
    text-align: center;
    order: 1;

    flex: 0 0 auto; /* remove flex-basis do desktop */
  }

  .section6-text{
    margin: 0 0 18px 0;
    color: var(--blue);
    font-weight: 400;
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.35;
  }

  .section6-text strong{
    font-weight: 800;
  }

  .section6-text br{
    display: none;
  }

  /* BOTÃO */
  .section6-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 22px 38px;
    border-radius: 14px;

    background: var(--blue);
    color: var(--white);

    font-family: 'Electrolux', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .08em;

    text-decoration: none;
  }

  /* BLOCO DA IMAGEM (MOBILE) */
.section6 .section6-media{
  width: 100%;
  order: 2;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

/* FORÇA a redução de tamanho (não deixa ficar 100%) */
.section6 .section6-media img{
  width: 78vw !important;       /* menor que 100% */
  max-width: 420px !important;  /* trava em telas maiores */
  height: auto !important;
  display: block;
  margin-top: 10px;             /* respiro do botão */
}

}

@media (max-width: 900px){

  .section7{
    display: flex;
    flex-direction: column;
  }

  /* IMAGEM PRIMEIRO */
  .section7-media{
    order: 1;
  }

  .section7-bg{
    width: 100%;
    height: auto;
    display: block;
  }

  /* BOX VIRA BLOCO INTEIRO */
  .section7-box{
    order: 2;

    position: relative;   /* remove absolute do desktop */
    right: auto;
    bottom: auto;

    width: 100%;
    max-width: none;

    padding: 40px 24px;
    text-align: center;

    background-color: var(--blue);
  }

  .section7-box h1{
    font-size: clamp(24px, 6vw, 34px);
  }  

  .section7-box h2{
    max-width: 520px;
    margin: 0 auto;
    font-size: clamp(16px, 4.2vw, 22px);
  }

  .section7-box br{
    display: none;
  }

}

/* =========================
   SECTION 7.1 – MOBILE (≤900px)
   ========================= */
@media (max-width: 900px){

  .section71-specs .s71-grid{
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
  }

  /* Cabeçalho centralizado com respiro */
  .section71-specs .s71-head{
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100vw - 60px);
  }

  /* Imagem primeiro */
  .section71-specs .s71-media{
    order: -1;
    max-width: calc(100vw - 60px);
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .section71-specs .s71-media img{
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Tabelas empilhadas */
  .section71-specs .s71-tables{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: calc(100vw - 60px);
    margin: 0 auto;
  }

  .section71-specs .s71-card-pack{ grid-column: 1; grid-row: 1; }
  .section71-specs .s71-card-emb { grid-column: 1; grid-row: 2; }
  .section71-specs .s71-card-des { grid-column: 1; grid-row: 3; }

  /* garante largura total interna */
  .section71-specs .s71-list,
  .section71-specs .s71-table,
  .section71-specs .s71-list li,
  .section71-specs .s71-row{
    width: 100%;
  }
}

/* ===== 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; }
}