: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: 26%;
    right: 8%;
    width: 35%;
    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: 50%;
}

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

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

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

/* =========================
   SECTION 2 — Imagem full + box azul no mobile
   ========================= */
.section2 {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: var(--blue);
}

.section2 picture, 
.section2 img {
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  object-fit: cover;
}

/* Box azul (invisível no desktop) */
.section2 .s2-box {
  display: none;
  background: var(--blue);
  color: #fff;
  font-family: 'Electrolux', sans-serif;
  text-align: center;
  padding: clamp(40px, 8vw, 60px) clamp(24px, 6vw, 48px);
}

.section2 .s2-box h1 {
  font-weight: 800;
  font-size: clamp(26px, 6vw, 36px);
  line-height: 1.2;
  margin-bottom: clamp(12px, 3vw, 20px);
}

.section2 .s2-box h1 br{
  display: none;
}

.section2 .s2-box p {
  font-weight: 400;
  font-size: clamp(16px, 4vw, 20px);
  line-height: 1.5;
  margin: 0;
}

/* =========================
   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 – Mais eficiência (layout final)
   ========================= */
.section4-escovas{
  width: 100%;
  background: var(--blue);
  color: #fff;
  font-family: 'Electrolux', sans-serif;
}

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

/* 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);
  display: grid;                       /* grid = fácil centralização */
  grid-template-rows: auto 1fr;        /* ícones em cima, texto embaixo */
  justify-items: center;               /* centraliza horizontal */
  align-content: center;               /* centraliza vertical */
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(40px, 10vw, 200px);
}

/* grade 2×2 de ícones */
.section4-escovas .s4-icons{
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-content: center;
  gap: clamp(24px, 3vw, 32px);
}
.section4-escovas .s4-icons img{
  width: clamp(80px, 8vw, 110px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* texto: centralizado no painel, mas alinhado à esquerda */
.section4-escovas .s4-body{
  max-width: 560px;
  justify-self: center;
}
.section4-escovas .s4-body h2{
  font-weight: 800;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.12;
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  text-align: left;
}
.section4-escovas .s4-body p{
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.45;
  margin: 0;
  text-align: left;
}

/* =========================
   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(1200px, 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 */
.section8-cta .s8-image img {
  width: clamp(220px, 22vw, 320px);
  height: auto;
  display: block;
}

/* 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(350px, 35vw, 700px); /* ~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: 1850px) {

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

}

@media (max-width: 1500px) {

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

  }


@media (max-width: 1385px) {

.section4 .div8 {
  right: 18%;
}

}


@media (max-width: 1285px) {
    .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: 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;
  }
}
  }

  /* =========================
   MOBILE (≤900px)
   ========================= */
@media (max-width: 900px) {
  .section2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* ativa o box azul abaixo da imagem */
  .section2 .s2-box {
    display: block;
  }
}

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

  /* empilha imagem e painel azul */
  .section4-escovas .s4-wrap{
    grid-template-columns: 1fr;
  }
  .section4-escovas .s4-media{ order: 1; }
  .section4-escovas .s4-panel{
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(32px, 8vw, 60px);
  }

  /* grade 2×2 perfeita dos ícones */
  .section4-escovas .s4-icons{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 4vw, 18px);
    aspect-ratio: 1 / 1;      /* quadrado perfeito */
    margin: 0 auto clamp(10px, 2vw, 20px);
    place-items: center;      /* centraliza ícones nas células */
    box-sizing: border-box;
  }

  /* ícones proporcionais ao desktop */
  .section4-escovas .s4-icons img{
    width: clamp(80px, 8vw, 110px);
    height: auto;
    display: block;
  }

  /* corpo do texto centralizado */
  .section4-escovas .s4-body{
    max-width: 620px;
    text-align: center;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* título e parágrafo ajustados */
  .section4-escovas .s4-body h2{
    font-size: clamp(26px, 6vw, 40px);
    line-height: 1.2;
    text-align: center !important;
  }
  .section4-escovas .s4-body p{
    font-size: clamp(16px, 4vw, 20px);
    line-height: 1.4;
    text-align: center !important;
  }

  /* remove as quebras <br> no mobile */
  .section4-escovas .s4-body h2 br,
  .section4-escovas .s4-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: 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);
  }

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

  .section8-cta .s8-image img {
    width: clamp(180px, 48vw, 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(350px, 100%) !important;
  }

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

  .section10-specs .s10-head h1 br {
    display: none;
  }

}

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