:root {
  --blue: #041e50;
  --blue-mid: #7A8A9C;
  --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,
.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,
.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 / 1192;
  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: 15%;
    right: 32%;
    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(--blue);
    width: 100%;
    height: 30%;
}

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

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

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

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

.div4 h2 {
    color: var(--white);
    font-weight: normal;
    padding: 20px 8% 20px 8%;
    font-size: clamp(14px, 2.2vw, 35px);
    white-space: normal;
    word-break: break-word;
}

/* SECTION 2 — full-bleed, sem sobras */
.section2{
  width: 100%;
  background: var(--blue);
  padding: 0;            /* remove respiro */
  margin: 0;             /* garante sem bordas */
  overflow: hidden;      /* evita qualquer bleed */
  display: block;
}

.section2 img{
  display: block;        /* remove gap inline */
  width: 100vw;          /* ocupa toda a largura da viewport */
  max-width: none;       /* sem limite em telas grandes */
  height: auto;          /* mantém proporção */
}

/* =========================
   SECTION 3 – FILTROS (DESKTOP)
   ========================= */
.section3-filtros{
  position: relative;
  width: 100%;
  background: var(--white);
  overflow: hidden;
}

.section3-filtros .s3-stage{
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* imagem */
.section3-filtros .s3-picture{ display:block; }
.section3-filtros .s3-img{
  display:block;
  width:100%;
  height:auto; /* não corta a arte */
}

/* Cabeçalho sobre a imagem */
.section3-filtros .s3-head{
  position:absolute;
  left:50%;
  top:5.3%;
  transform:translateX(-50%);
  width:72%;
  text-align:center;
  color:var(--blue);
}
.section3-filtros .s3-head h1{
  font-family:'Electrolux',sans-serif!important;
  font-weight:800;
  font-size:clamp(24px,3.4vw,64px);
  line-height:1.1;
  margin:0 0 .6rem 0;
}
.section3-filtros .s3-head h2{
  font-family:'Electrolux',sans-serif!important;
  font-weight:400;
  font-size:clamp(16px,1.8vw,30px);
  line-height:1.1;
  margin:0;
}

/* Cards sobre a imagem (desktop) */
.section3-filtros .s3-card{ position:absolute; z-index:2; }

.section3-filtros .s3-box{
  background:var(--blue);
  color:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.25);
  padding:28px 34px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.section3-filtros .s3-box h3{
  font-family:'Electrolux',sans-serif!important;
  font-weight:800;
  font-size:clamp(18px,2.2vw,40px);
  margin:0 0 10px 0;
}
.section3-filtros .s3-box p{
  font-family:'Electrolux',sans-serif!important;
  font-weight:400;
  font-size:clamp(14px,1.8vw,30px);
  margin:0;
}

/* posições desktop */
.section3-filtros .s3-left{
  left:5%;
  top:70%;
  transform:translateY(-50%);
  width:23%;
}
.section3-filtros .s3-right{
  right:5%;
  top:68%;
  transform:translateY(-50%);
  width:23%;
}


/* =========================
   SECTION 4 – ESCOVAS (versão final, sempre aberta)
   ========================= */

.section4-escovas {
  width: 100%;
  background: var(--blue);
}

.section4-escovas .s4-wrap {
  min-height: clamp(520px, 60vw, 820px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* ---------- Lado da imagem (esquerda) ---------- */
.section4-escovas .s4-media {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.section4-escovas .s4-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   SECTION 4 – ESCOVAS (ajustada e final)
   ========================= */

.section4-escovas {
  width: 100%;
  background: var(--blue);
}

.section4-escovas .s4-wrap {
  min-height: clamp(520px, 60vw, 820px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* ---------- Lado da imagem (esquerda) ---------- */
.section4-escovas .s4-media {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.section4-escovas .s4-media picture,
.section4-escovas .s4-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Painel azul (direita) ---------- */
.section4-escovas .s4-panel {
  background: var(--blue);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ---------- Faixa superior (cinza com PNG) ---------- */
.section4-escovas .s4-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue-mid);
  padding: clamp(25px, 2vw, 60px) clamp(40px, 4vw, 72px);
  margin: 0;
}

.section4-escovas .s4-chip {
  margin: 0;
  padding-left: clamp(90px, 8vw, 200px);
  font-family: 'Electrolux', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1vw, 24px);
  color: #fff;
  background: none;
  box-shadow: none;
}

.section4-escovas .s4-hero img {
  width: min(420px, 50%);
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- Corpo do texto ---------- */
.section4-escovas .s4-body {
  max-width: 560px;
  padding: clamp(60px, 7vw, 130px)
           clamp(40px, 4vw, 72px)
           clamp(40px, 4vw, 72px)
           clamp(90px, 12vw, 200px);
}

.section4-escovas .s4-icon {
  margin: 0 0 clamp(24px, 2.2vw, 32px) 0;
}

.section4-escovas .s4-icon img {
  width: clamp(60px, 8vw, 125px);
  height: auto;
  display: block;
}

.section4-escovas .s4-body h2 {
  font-family: 'Electrolux', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3vw, 60px);
  line-height: 1.15;
  margin: 0 0 12px 0;
  color: #fff;
}

.section4-escovas .s4-body p {
  font-family: 'Electrolux', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.4;
  margin: 0;
  color: #fff;
}

/* =========================
   SECTION 5 – MICROFIBRA (espelhada da 4)
   ========================= */

.section5-microfibra {
  width: 100%;
  background: var(--blue);
}

.section5-microfibra .s5-wrap {
  min-height: clamp(520px, 60vw, 820px);
  display: grid;
  grid-template-columns: 1fr 1fr;   /* esquerda: painel | direita: foto */
  align-items: stretch;
}

/* ---------- Painel azul (esquerda) ---------- */
.section5-microfibra .s5-panel {
  background: var(--blue);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Faixa cinza superior com o PNG */
.section5-microfibra .s5-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue-mid);
  padding: clamp(25px, 2vw, 60px) clamp(40px, 4vw, 72px);
  margin: 0;
}

/* Título alinhado com o corpo */
.section5-microfibra .s5-chip {
  margin: 0;
  padding-left: clamp(90px, 8vw, 200px); /* alinha com o conteúdo abaixo */
  font-family: 'Electrolux', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1vw, 24px);
  color: #fff;
  background: none;
  box-shadow: none;
}

/* PNG dentro da faixa (lado direito da faixa) */
.section5-microfibra .s5-hero img {
  width: min(420px, 40%);
  height: auto;
  object-fit: contain;
  display: block;
}

/* Corpo (ícone + textos) */
.section5-microfibra .s5-body {
  max-width: 560px;
  padding: clamp(60px, 7vw, 130px)
           clamp(40px, 4vw, 72px)
           clamp(40px, 4vw, 72px)
           clamp(90px, 12vw, 200px);
}

.section5-microfibra .s5-icon {
  margin: 0 0 clamp(24px, 2.2vw, 32px) 0;
}

.section5-microfibra .s5-icon img {
  width: clamp(60px, 8vw, 125px);
  height: auto;
  display: block;
}

.section5-microfibra .s5-body h2 {
  font-family: 'Electrolux', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3vw, 60px);
  line-height: 1.15;
  margin: 0 0 12px 0;
  color: #fff;
}

.section5-microfibra .s5-body p {
  font-family: 'Electrolux', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.4;
  margin: 0;
  color: #fff;
}

/* ---------- Imagem da direita ---------- */
.section5-microfibra .s5-media {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.section5-microfibra .s5-media picture,
.section5-microfibra .s5-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   SECTION 6 – Benefícios (fixo à arte)
   ========================= */
.section6-beneficios{
  position: relative;
  width: 100%;
  color: #fff;
  background: var(--blue);
  font-family: 'Electrolux', sans-serif;
  overflow: hidden;
}

.section6-beneficios .s6-wrap{
  position: relative;   /* referência p/ posicionar textos e badge */
  width: 100%;
}

/* imagem sempre inteira, sem corte */
.section6-beneficios .s6-media{ display:block; line-height:0; }
.section6-beneficios .s6-media img{
  display:block;
  width:100%;
  height:auto;          /* mantém proporção da arte */
  object-fit: contain;  /* nunca corta */
}

/* ÍCONE (canto superior direito) – em percentuais da arte */
.section6-beneficios .s6-badge{
  position:absolute;
  top: 6.0%;            /* distancia do topo da imagem */
  right: 8.0%;          /* distancia da direita da imagem */
  width: min(17vw, 340px);
  height:auto;
  pointer-events:none;
}

/* ===== BLOCO DE TEXTOS =====
   Posição em % da arte para não “correr”.
   width em % para manter o fluxo parecido com o layout de referência. */
.section6-beneficios .s6-stack{
  position:absolute;
  left: 25%;         /* empurra mais para a direita */
  top:  32%;         /* baixa o bloco como no mock */
  width: 36%;          /* largura do conjunto dos textos */
  display:flex;
  flex-direction:column;
  gap: 2.8vw;          /* espaço ENTRE cada item (escala com viewport) */
}

/* cada item (título + parágrafo) */
.section6-beneficios .s6-item{ max-width:100%; }

/* Títulos e parágrafos escalam com a janela, mas com limites */
.section6-beneficios .s6-item h2{
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 64px);
  line-height: 1.06;
  margin: 0 0 0.8vw 0;   /* respiro abaixo do título (em vw p/ escalar) */
}

.section6-beneficios .s6-item p{
  font-weight: 400;
  font-size: clamp(16px, 1.45vw, 26px);
  line-height: 1.45;
  margin: 0;
}

/* ---------- Mobile (troca de imagem + reposiciona textos) ---------- */
@media (max-width: 900px){
  .section6-beneficios .s6-stack{
    left: 8%;
    top:  24%;
    width: 84%;
    gap: 4vw;
  }
  .section6-beneficios .s6-item h2{
    font-size: clamp(22px, 6vw, 38px);
    margin-bottom: 2.4vw;
  }
  .section6-beneficios .s6-item p{
    font-size: clamp(14px, 4vw, 20px);
  }
  .section6-beneficios .s6-badge{
    width: clamp(120px, 24vw, 200px);
    right: 4%;
    top: 6%;
  }
}


/* =========================
   SECTION 7 – Produto Original Electrolux
   ========================= */
.section7-original {
  background: #fff;
  color: var(--blue, #001F5B);
  font-family: 'Electrolux', sans-serif;
  width: 100%;
  padding: clamp(40px, 5vw, 80px) 0;
  display: flex;
  justify-content: center;
}

.section7-original .s7-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 80px);
  max-width: 1200px;
  width: 90%;
  text-align: left;
}

.section7-original .s7-icon {
  width: clamp(120px, 14vw, 200px);
  height: auto;
  flex-shrink: 0;
}

.section7-original .s7-text h2 {
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0 0 clamp(10px, 1vw, 14px);
}

.section7-original .s7-text p {
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 26px);
  line-height: 1.45;
  margin: 0;
}

/* =========================
   SECTION 8 – CTA Loja Electrolux
   ========================= */
.section8-cta {
  background: var(--blue-mid); /* tom aproximado do fundo da imagem */
  color: var(--blue);
  font-family: 'Electrolux', sans-serif;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) 0;
}

.section8-cta .s8-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 80px);
  width: min(1400px, 90%);
}

/* Texto */
.section8-cta .s8-text {
  flex: 1;
}
.section8-cta .s8-text h2 {
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.1;
  margin: 0 0 clamp(12px, 1.2vw, 16px);
}
.section8-cta .s8-text p {
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 30px);
  line-height: 1.4;
  margin: 0;
}

/* Imagem – dois ícones lado a lado */
.section8-cta .s8-image {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
  flex: 0 1 auto; /* garante que o bloco não force quebra */
}

/* Imagens menores e mais flexíveis */
.section8-cta .s8-image img {
  width: clamp(140px, 14vw, 240px); /* antes era 220–320px */
  height: auto;
  display: block;
  flex-shrink: 1;
  max-width: 100%;
}

/* Botão */
.section8-cta .s8-button a {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 22px);
  padding: clamp(10px, 1vw, 14px) clamp(28px, 2vw, 40px);
  display: inline-block;
  transition: background 0.3s ease;
}
.section8-cta .s8-button a:hover {
  background: white;
  color: var(--blue);
}



/* =========================
   SECTION 9 – Assistência Técnica
   ========================= */
.section9-assistencia {
  width: 100%;
  background: var(--blue, #001F5B);
  color: #fff;
  font-family: 'Electrolux', sans-serif;
}

.section9-assistencia .s9-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(520px, 60vw, 820px);
}

/* ---------- Imagem ---------- */
.section9-assistencia .s9-media {
  position: relative;
  overflow: hidden;
}

.section9-assistencia .s9-media picture,
.section9-assistencia .s9-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Painel azul ---------- */
.section9-assistencia .s9-panel {
  background: var(--blue, #001F5B);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 6vw, 120px);
}

/* ---------- Corpo do texto ---------- */
.section9-assistencia .s9-body {
  max-width: 540px;
}

.section9-assistencia .s9-body h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.15;
  margin: 0 0 clamp(20px, 2vw, 28px);
}

.section9-assistencia .s9-body p {
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.45;
  margin: 0 0 clamp(30px, 3vw, 48px);
}

/* ---------- Botão ---------- */
.section9-assistencia .s9-button {
  display: inline-block;
  background: var(--blue-mid);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  padding: clamp(12px, 1.2vw, 16px) clamp(28px, 2vw, 40px);
  font-size: clamp(16px, 1.4vw, 20px);
  transition: all 0.3s ease;
}

.section9-assistencia .s9-button:hover {
  background: var(--white);
  color: var(--blue);
}

/* =========================
   SECTION 10 – Especificações Técnicas (versão final ajustada)
   ========================= */
.section10-specs{
  width:100%;
  background: var(--blue-mid, #7A8A9C);
  color: var(--blue, #0E2B57);
}

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

/* ===== Cabeçalho ===== */
.section10-specs .s10-head h1{
  font-family:'Electrolux',sans-serif;
  font-weight:800;
  font-size: clamp(26px, 3vw, 46px);
  line-height:1.2;
  margin:0 0 30px 0;
}
.section10-specs .s10-head h2{
  font-family:'Electrolux',sans-serif;
  font-weight:800;
  font-size: clamp(26px, 3vw, 46px);
  line-height:1.1;
  margin:0 0 clamp(20px, 3.6vw, 36px) 0;
}

/* ===== GRID ===== */
.section10-specs .s10-grid{
  display: grid;
  /* esquerda (tabelas) reduz entre 320px e 520px; direita (imagem) ocupa o resto */
  grid-template-columns: clamp(320px, 42vw, 520px) 1fr;
  align-items: start;
  gap: 48px;
}

/* ===== Coluna das tabelas ===== */
.section10-specs .s10-tables{
  width: auto;
  min-width: 0;
  max-width: clamp(320px, 42vw, 520px);
  display: grid;
  gap: clamp(18px, 2vw, 24px);
}

/* Card e elementos internos */
.section10-specs .s10-card{
  width: 100%;
}

.section10-specs .s10-card-title{
  display:block;
  width:100%;
  background: var(--blue, #0E2B57);
  color:#fff;
  font-family:'Electrolux',sans-serif;
  font-weight:800;
  font-size: clamp(16px, 1.2vw, 18px);
  padding: 16px 16px;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Listas e linhas padronizadas */
.section10-specs .s10-list{
  list-style:none;
  margin:12px 0 0 0;
  padding:0;
  display:grid;
  gap:10px;
  width:100%;
  box-sizing:border-box;
}

.section10-specs .s10-list li{
  background:#fff;
  color:var(--blue, #0E2B57);
  font-family:'Electrolux',sans-serif;
  font-weight:500;
  font-size: clamp(13px, 1.05vw, 16px);
  padding:10px 14px;
  border-radius:8px;
  box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
  width:100%;
  box-sizing:border-box;
}

/* Tabela “Embalado” */
.section10-specs .s10-table{
  width:100%;
  margin-top:12px;
  display:grid;
  gap:10px;
  box-sizing:border-box;
}

.section10-specs .s10-row{
  background:#fff;
  border-radius:8px;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  padding:10px 14px;
  gap:12px;
  box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
  width:100%;
  box-sizing:border-box;
}

.section10-specs .s10-label{
  color:var(--blue, #0E2B57);
  font-family:'Electrolux',sans-serif;
  font-weight:700;
  font-size: clamp(13px, 1.05vw, 16px);
}
.section10-specs .s10-value{
  color:var(--blue, #0E2B57);
  font-family:'Electrolux',sans-serif;
  font-weight:600;
  font-size: clamp(13px, 1.05vw, 16px);
  padding:6px 10px;
  background:#EAF0F6;
  border-radius:6px;
}

/* ===== Imagem ===== */
.section10-specs .s10-media{
  display:flex;
  align-items:start;
  justify-content:center;
}
.section10-specs .s10-media img{
  width:100%;
  max-width:740px;
  height:auto;
  display:block;
}

/* === SECTION 10 – ajustes finos de tabela === */

/* tabela um pouco mais estreita */
.section10-specs .s10-grid{
  grid-template-columns: clamp(300px, 38vw, 480px) 1fr;
}
.section10-specs .s10-tables{
  max-width: clamp(300px, 38vw, 480px);
}

/* títulos azuis podem seguir em bold; o resto sem bold e tamanho uniforme */
.section10-specs .s10-list li,
.section10-specs .s10-label,
.section10-specs .s10-value{
  font-weight: 400;                        /* sem bold */
  font-size: clamp(16px, 1.05vw, 18px);    /* mesmo tamanho */
  line-height: 1.25;
}

/* altura uniforme dos boxes (brancos e linhas de medida) */
.section10-specs .s10-list li,
.section10-specs .s10-row{
  min-height: 48px;                        /* mesma altura */
  padding: 12px 14px;                      /* padding igual */
  display: grid;
  grid-template-columns: 1fr auto;         /* label | valor */
  align-items: center;                     /* centraliza vertical */
  box-sizing: border-box;
}

/* remove “pílula” azul do valor (números) */
.section10-specs .s10-value{
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* opcional: aproxima levemente as linhas */
.section10-specs .s10-list,
.section10-specs .s10-table{
  gap: 8px;
}

/* --- Layout das 3 tabelas com MESMO tamanho --- */
.section10-specs .s10-tables{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* duas colunas iguais */
  gap: clamp(18px, 2vw, 24px);
  max-width: clamp(300px, 38vw, 480px); /* mantém o limite que você já usa */
}

/* Posicionamento: 
   - 1ª tabela: linha 1, coluna 1
   - 2ª tabela: linha 2, coluna 1
   - 3ª tabela: linha 2, coluna 2
*/
.section10-specs .s10-card-pack{ grid-column: 1; grid-row: 1; }
.section10-specs .s10-card-emb { grid-column: 1; grid-row: 2; }
.section10-specs .s10-card-des { grid-column: 2; grid-row: 2; }

/* --- PATCH: ampliar bloco das tabelas e reduzir imagem --- */

/* A coluna esquerda (tabelas) fica mais larga */
.section10-specs .s10-grid{
  grid-template-columns: clamp(380px, 48vw, 620px) 1fr; /* antes era ~38vw/480px */
  gap: clamp(24px, 3.5vw, 44px);
}

/* As três tabelas compartilham exatamente a mesma largura */
.section10-specs .s10-tables{
  max-width: clamp(380px, 48vw, 620px);   /* acompanha a coluna da esquerda */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas iguais */
  gap: clamp(18px, 2vw, 24px);
}

/* Posições (mantém a lógica do mock)
   [ Conteúdo da embalagem |    ]
   [ Embalado               | Desembalado ] */
.section10-specs .s10-card-pack{ grid-column: 1; grid-row: 1; }
.section10-specs .s10-card-emb { grid-column: 1; grid-row: 2; }
.section10-specs .s10-card-des { grid-column: 2; grid-row: 2; }

/* Reduz a imagem para ganhar respiro */
.section10-specs .s10-media img{
  max-width: clamp(340px, 30vw, 520px);  /* pode baixar para 480px se quiser ainda menor */
}

/* === PATCH DESKTOP: aumentar largura geral das tabelas === */
@media (min-width: 901px){

  /* Coluna esquerda (tabelas) maior */
  .section10-specs .s10-grid{
    grid-template-columns: clamp(460px, 56vw, 760px) 1fr; /* mais largura */
    gap: clamp(28px, 4vw, 48px);
  }

  /* As três tabelas com a mesma largura expandida */
  .section10-specs .s10-tables{
    max-width: clamp(460px, 56vw, 760px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mantém posição e lógica de grid */
  .section10-specs .s10-card-pack{ grid-column: 1; grid-row: 1; }
  .section10-specs .s10-card-emb { grid-column: 1; grid-row: 2; }
  .section10-specs .s10-card-des { grid-column: 2; grid-row: 2; }

  /* Reduz levemente a imagem para equilibrar o novo tamanho das tabelas */
  .section10-specs .s10-media img{
    max-width: clamp(300px, 26vw, 440px);
  }
}

/* === PATCH DESKTOP: ampliar levemente a imagem === */
@media (min-width: 901px){
  .section10-specs .s10-media img{
    max-width: clamp(580px, 64vw, 1180px); /* ~15% maior que o anterior */
  }
}

/* =========================
   SECTION 15 – RODAPÉ FINAL
   ========================= */
.section15 {
  background-color: var(--blue);
  width: 100%;
  padding: clamp(24px, 4vw, 40px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section15 .footer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 2vw, 18px);
}

/* logo */
.section15 .logo2 {
  width: clamp(160px, 20vw, 280px);
  height: auto;
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: transform .6s ease, opacity .6s ease;
  padding-bottom: 20px;
}
.section15 .logo2.reveal-in {
  opacity: 1;
  transform: none;
}

/* texto do rodapé */
.section15 .footer-note {
  font-family: 'Electrolux', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 1vw, 16px);
  color: #fff;
  line-height: 1.4;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px; /* respiro lateral */
}

.section15 .footer-note {
  opacity: 0;
  transform: translateY(18px);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}

.section15 .footer-note.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;
  }
}

/* Novo: animação vinda da DIREITA */
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.in-view.reveal-right {
  opacity: 1;
  transform: none;
}

/* Section 15 – texto do rodapé animando para cima */
.section15 .footer-note {
  opacity: 0;
  transform: translateY(18px);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.section15 .footer-note.reveal-in {
  opacity: 1;
  transform: none;
}

/* transições mais rápidas e deslocamento menor */
.reveal-right,
.reveal-left,
.reveal-up {
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  will-change: transform, opacity;
}

.reveal-right   { transform: translateX(16px); }
.reveal-left    { transform: translateX(-16px); }
.reveal-up      { transform: translateY(16px); }

.in-view.reveal-right,
.in-view.reveal-left,
.in-view.reveal-up {
  opacity: 1;
  transform: none;
}

/* Section 15 – já tinha; garante animação rápida */
.section15 .footer-note {
  opacity: 0;
  transform: translateY(14px);
  transition: transform .45s ease, opacity .45s ease;
}
.section15 .footer-note.reveal-in { opacity: 1; transform: none; }

/*responsivo*/

@media (max-width: 1650px) {

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

}

@media (max-width: 1425px) {

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

  }


@media (max-width: 1385px) {

.section4 .div8 {
  right: 18%;
}

}


@media (max-width: 1250px) {
    .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: 1150px) {
    .div4 h2 {
      font-size: clamp(14px, 2.3vw, 22px);
  }

}

  @media (max-width: 990px) {

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

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

  @media (max-width: 900px) {

    .div20 br {
      display: none;
    }
  }

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

@media (max-width: 900px) {
  
  .section2 {
        display: none;
      }

    .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;
  }
}
    .section2 {
      display: flex; 
      justify-content: center;
      align-items: center;
      flex-direction: column;
      max-width: 100%;
    }
  }


/* =========================
   SECTION 3 – MOBILE (≤550px) 
   ========================= */
@media (max-width: 550px){
  .section3-filtros .s3-head{
    top:3% !important;
    width:90% !important;
  }
}  
  
/* =========================
   SECTION 3 – MOBILE (≤900px) FINAL AJUSTADA
   ========================= */
@media (max-width: 900px){

  /* a faixa azul geral é dividida em duas metades */
  .section3-filtros {
    background: linear-gradient(
      to right,
      var(--blue) 0%,
      var(--blue) 50%,
      var(--blue-mid) 50%,
      var(--blue-mid) 100%
    );
  }

  /* título e subtítulo continuam sobre a imagem */
  .section3-filtros .s3-head{
    position:absolute;
    left:50%;
    top:9.5%;
    transform:translateX(-50%);
    width:86%;
    color:var(--blue);
    text-align:center;
  }
  .section3-filtros .s3-head h1{
    font-size:clamp(22px,6vw,32px);
    margin-bottom:8px;
  }
  .section3-filtros .s3-head h2{
    font-size:clamp(13px,4vw,18px);
    line-height:1.25;
  }

 .section3-filtros .s3-head h1 br{
    display: none;
  }
  .section3-filtros .s3-head h2 br{
    display: none;
  }

  /* cards lado a lado */
  .section3-filtros .s3-left,
  .section3-filtros .s3-right{
    position: static !important;
    transform: none !important;
    float: left;
    width: 50% !important;
    padding: 24px 14px 32px !important;
    box-sizing: border-box;
  }

  /* garante limpeza dos floats */
  .section3-filtros .s3-stage::after{
    content:""; display:block; clear:both;
  }

  /* box sem fundo próprio (usa o gradiente da faixa) */
  .section3-filtros .s3-box{
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
  }

  /* remove linha divisória */
  .section3-filtros .s3-left{
    border: none;
  }

  /* textos */
  .section3-filtros .s3-box h3{
    font-family:'Electrolux',sans-serif!important;
    font-weight:800;
    font-size: clamp(18px, 5vw, 22px);
    margin-bottom:8px;
  }

  .section3-filtros .s3-box p{
    font-family:'Electrolux',sans-serif!important;
    font-weight:400;
    font-size: clamp(13px, 3.8vw, 16px);
    line-height:1.28;
    margin: 0 auto;
    max-width: 280px;
  }
}


/* =====  Section 4 ==== */
@media (max-width: 900px) {

  /* Stack: imagem em cima, texto embaixo */
  .section4-escovas .s4-wrap {
    grid-template-columns: 1fr;
  }

  /* Painel azul vai para baixo */
  .section4-escovas .s4-panel {
    order: 2;
  }

  /* Imagem vai para cima */
  .section4-escovas .s4-media {
    order: 1;
  }

  /* Ajustes de proporção e espaçamento */
  .section4-escovas .s4-hero {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(32px, 6vw, 50px);
  }

  .section4-escovas .s4-chip {
    padding-left: 0;
    font-size: clamp(18px, 4vw, 22px);
  }

  .section4-escovas .s4-hero img {
    width: clamp(220px, 60vw, 360px);
  }

  .section4-escovas .s4-body {
    padding: clamp(40px, 8vw, 60px);
    text-align: center;
    margin: 0 auto;
  }

  .section4-escovas .s4-body h2 {
    font-size: clamp(26px, 6vw, 40px);
  }

  .section4-escovas .s4-body p {
    font-size: clamp(16px, 4vw, 20px);
  }

   .section4-escovas .s4-body h2 br {
    display: none;  }

  .section4-escovas .s4-body p br {
    display: none;
  }

  .section4-escovas .s4-icon {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(20px, 5vw, 32px);
  }

  .section4-escovas .s4-icon img {
    width: clamp(60px, 14vw, 100px);
  }
}


/* ===== Section 5 ==== */
@media (max-width: 900px) {
  /* Empilha: imagem em cima, painel embaixo */
  .section5-microfibra .s5-wrap {
    grid-template-columns: 1fr;
  }

  .section5-microfibra .s5-media { order: 1; }
  .section5-microfibra .s5-panel { order: 2; }

  .section5-microfibra .s5-media picture,
  .section5-microfibra .s5-media img {
    height: auto;
    object-fit: cover;
  }

  .section5-microfibra .s5-hero {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(32px, 6vw, 50px);
    text-align: center;
  }

  .section5-microfibra .s5-chip {
    padding-left: 0;
    font-size: clamp(18px, 4vw, 22px);
  }

  .section5-microfibra .s5-hero img {
    width: clamp(220px, 60vw, 360px);
    height: auto;
  }

  .section5-microfibra .s5-body {
    padding: clamp(40px, 8vw, 60px);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .section5-microfibra .s5-icon {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(20px, 5vw, 32px);
  }

  .section5-microfibra .s5-icon img {
    width: clamp(60px, 14vw, 100px);
    height: auto;
  }

  .section5-microfibra .s5-body h2 {
    font-size: clamp(26px, 6vw, 40px);
  }

  .section5-microfibra .s5-body p {
    font-size: clamp(16px, 4vw, 20px);
  }
  .section5-microfibra .s5-body h2 br {
    display: none;
  }

  .section5-microfibra .s5-body p br {
    display: none;
  }
}

/*responsivo section 6*/

@media (max-width: 1850px){

.section6-beneficios .s6-stack{
  left: 25%;         /* empurra mais para a direita */
  top:  30%;         /* baixa o bloco como no mock */
}

}

@media (max-width: 1120px){

.section6-beneficios .s6-stack{
  left: 25%;         /* empurra mais para a direita */
  top:  29%;         /* baixa o bloco como no mock */
}

}

@media (max-width: 1050px){

.section6-beneficios .s6-stack{
  left: 25%;         /* empurra mais para a direita */
  top:  28%;         /* baixa o bloco como no mock */
}

}

@media (max-width: 1020px){

.section6-beneficios .s6-stack{
  left: 25%;         /* empurra mais para a direita */
  top:  27%;         /* baixa o bloco como no mock */
}

}

@media (max-width: 970px){

.section6-beneficios .s6-stack{
  left: 24%;         /* empurra mais para a direita */
  top:  26%;         /* baixa o bloco como no mock */
}

}

@media (max-width: 940px){

.section6-beneficios .s6-stack{
  left: 24%;         /* empurra mais para a direita */
  top:  25%;         /* baixa o bloco como no mock */
}

}

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

  /* remove o efeito visual dos <br> sem mexer no HTML */
  .section6-beneficios br {
    display: none;
  }

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

  .section6-beneficios .s6-badge{
    position: absolute;
    top: 6vw;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 28vw, 180px);
    height: auto;
  }

  .section6-beneficios .s6-stack{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 22vw;
    width: 84%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4.8vw;
  }

  .section6-beneficios .s6-item h2{
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1.1;
    color: var(--blue);
  }

  .section6-beneficios .s6-item p{
    font-size: clamp(14px, 4.4vw, 18px);
    line-height: 1.45;
    margin: 0;
    color: var(--blue);

  }
}

@media (max-width: 550px){

  .section6-beneficios .s6-item h2{
    font-size: clamp(18px, 4vw, 32px);
  }

  .section6-beneficios .s6-item p{
    font-size: clamp(14px, 3vw, 18px);
  }
}

@media (max-width: 390px){

  .section6-beneficios .s6-item h2{
    font-size: clamp(16px, 4vw, 32px);
  }

  .section6-beneficios .s6-item p{
    font-size: clamp(12px, 3vw, 18px);
  }
}


/* ===== Responsivo section 7 ===== */
@media (max-width: 900px) {
  .section7-original .s7-wrap {
    flex-direction: column;
    text-align: center;
    gap: clamp(24px, 5vw, 36px);
  }

  .section7-original .s7-icon {
    width: clamp(100px, 28vw, 160px);
  }

  .section7-original .s7-text h2 {
    font-size: clamp(18px, 5vw, 24px);
  }

  .section7-original .s7-text p {
    font-size: clamp(14px, 4vw, 18px);
  }

   .section7-original .s7-text p br {
    display:none;
  }

}


@media (max-width: 500px) {
  .section7-original .s7-text p br {
    display: none;
}
}

/* ===== Responsivo section 8 ===== */

@media (max-width: 1100px) {

  .section8-cta .s8-text h2 {
    font-size: clamp(20px, 2.3vw, 40px);
  }
  .section8-cta .s8-text p {
    font-size: clamp(14px, 1.5vw, 30px);
  }

}

@media (max-width: 900px) {
  .section8-cta .s8-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .section8-cta .s8-text h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
  }

  .section8-cta .s8-text p {
    font-size: clamp(14px, 4.2vw, 18px) !important;
  }

  .section8-cta .s8-image {
    justify-content: center;
    flex-wrap: wrap; /* permite quebrar caso o espaço fique justo */
    gap: clamp(12px, 4vw, 24px);
  }

  .section8-cta .s8-image img {
    width: clamp(180px, 40vw, 260px);
  }

  .section8-cta .s8-button a {
    font-size: clamp(14px, 4vw, 18px);
    padding: clamp(10px, 3vw, 16px) clamp(28px, 8vw, 50px);
  }

    .section8-cta .s8-text h2 br {
    display: none;
  }
  .section8-cta .s8-text p br {
    display: none;
  }

}

/* ---------- Responsivo section 9 ---------- */
@media (max-width: 900px) {
  .section9-assistencia .s9-wrap {
    grid-template-columns: 1fr;
  }

  .section9-assistencia .s9-media {
    order: 1;
  }

  .section9-assistencia .s9-panel {
    order: 2;
    padding: clamp(40px, 8vw, 60px);
    text-align: center;
  }

  .section9-assistencia .s9-body {
    max-width: 100%;
  }

  .section9-assistencia .s9-button {
    font-size: clamp(14px, 4vw, 18px);
    padding: clamp(12px, 3vw, 18px) clamp(32px, 8vw, 50px);
  }

  .section9-assistencia .s9-body h2 br {
  display: none;
}

  .section9-assistencia .s9-body p br {
  display: none;
}


}

/* ===== Section 10 (≤900px) ===== */
@media (max-width: 900px){
  .section10-specs .s10-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .section10-specs .s10-media{
    order:-1;
    justify-content:center;
  }
  .section10-specs .s10-media img{
    width:min(560px, 100%);
  }

  .section10-specs .s10-tables{
    max-width: 92vw;
    min-width: 0;
    justify-items: center;
    margin-inline: auto;
  }
}

/* mobile mantém tudo proporcional */
@media (max-width: 900px){
  .section10-specs .s10-grid{ grid-template-columns: 1fr; }
  .section10-specs .s10-tables{ max-width: 92vw; }
}

/* ===== SECTION 10 — MOBILE CONSOLIDADO (≤900px) ===== */
@media (max-width: 900px){
  /* grid principal vira 1 coluna */
  .section10-specs .s10-grid{
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
  }

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

  /* TABELAS: empilhar em 1 coluna na ordem correta */
  .section10-specs .s10-tables{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: 16px;
    width: 100%;
    max-width: calc(100vw - 60px);
    margin: 0 auto;
  }
  .section10-specs .s10-card-pack{ grid-column: 1; grid-row: 1; }
  .section10-specs .s10-card-emb { grid-column: 1; grid-row: 2; }
  .section10-specs .s10-card-des { grid-column: 1; grid-row: 3; }

  /* imagem centralizada e proporcional */
  .section10-specs .s10-media{
    max-width: calc(100vw - 60px);
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .section10-specs .s10-media img{
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* garantir largura total interna */
  .section10-specs .s10-list,
  .section10-specs .s10-table,
  .section10-specs .s10-list li,
  .section10-specs .s10-row{
    width: 100%;
  }
}

/* section 15 */
@media (max-width: 900px){
  .section15 .footer-note {
    font-size: 13px;
    max-width: 90vw;
  }
}