/* Reset básico */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: #ffffff;
  color: #fff;
}

html,
body,
* {
  font-family: "Montserrat", sans-serif !important;
}

/* Seu arquivo de estilos (style.css, ou dentro de uma tag <style>) */

/* 1. Definir o Bloco Seguro (a área bege) como o contêiner de referência */
/* =========================================
   SEÇÃO HERO LITET JAZZ
   ========================================= */

/* --- BASE (MOBILE) --- */
.only-desktop {
  display: none !important;
}

.only-mobile {
  display: block !important;
}

@media screen and (min-width: 900px) {
  .only-desktop {
    display: block !important;
  }

  .only-mobile {
    display: none !important;
  }
}

.litet-hero-section {
  width: 100%;
  /* TRAVA MOBILE */
  max-width: 430px;
  margin: 0 auto;

  /* Imagem de fundo Mobile (Foto + Onda Rosa sem o texto) */
  background-image: url("assets/images/litet-hero-mobile.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;

  /* Altura para caber a foto e a área rosa */
  min-height: 700px;

  display: flex;
  flex-direction: column;
  padding: 0;

  box-sizing: border-box;
  position: relative;
}

.litet-wrapper {
  width: 100%;
  min-height: 760px;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Joga o texto para o fundo onde está a onda rosa no mobile */
  justify-content: flex-end;
  align-items: flex-start;
  padding: 40px 30px;
}

.litet-text-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  margin-bottom: 20px;
}

.litet-logo {
  width: 120px;
  height: auto;
  margin-bottom: 20px;
}

.litet-title {
  color: #ffedda;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 15px 0;
}

/* Cor amarela de destaque */
.litet-highlight {
  color: #fae400;
  /* Amarelo Litet */
  font-size: 36px;
  font-weight: 700;
}

.litet-desc {
  color: #ffedda;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 25px 0;
  max-width: 300px;
}

.litet-sku {
  color: #fae400;
  /* Amarelo Litet */
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-hero-section {
    /* RESET TRAVA */
    max-width: 1920px;
    margin: auto;

    /* Imagem Desktop (Foto + Onda Rosa Lateral sem o texto) */
    background-image: url("assets/images/litet-hero-desktop.png");
    background-size: cover;
    background-position: center center;

    min-height: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centraliza o wrapper na tela */
  }

  .litet-wrapper {
    width: 100%;
    max-width: 1400px;
    /* Limite do conteúdo */
    padding: 0 80px;

    /* No desktop, o texto fica centralizado verticalmente e na esquerda */
    justify-content: center;
    align-items: flex-start;
  }

  .litet-text-box {
    max-width: 600px;
    /* Limita a largura do texto para não passar da área rosa */
    margin-bottom: 0;
  }

  .litet-logo {
    width: 260px;
    margin-bottom: 80px;
  }

  .litet-title {
    font-size: 60px;
    margin-bottom: 10px;
  }

  .litet-highlight {
    font-size: 60px;
  }

  .litet-desc {
    font-size: 34px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 40px;
    max-width: 400px;
  }

  .litet-sku {
    font-size: 36px;
  }
}

@media screen and (min-width: 991px) and (max-width: 1500px) {
  .litet-hero-section {
    min-height: 900px;
  }

  .litet-wrapper {
    max-width: 1200px;
  }
}

/* =========================================
   SEÇÃO DE BENEFÍCIOS (ICONES)
   ========================================= */

.litet-features-section {
  width: 100%;
  max-width: 430px;
  margin: auto;
  background-color: #ffffff;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.litet-features-container {
  width: 100%;
  max-width: 1200px;
  display: grid;
  /* Mobile: 2 colunas */
  grid-template-columns: 1 white 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 20px;
}

.litet-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.litet-feature-icon {
  width: 100%;
  max-width: 90px;
  /* Ajuste conforme o tamanho original do ícone */
  height: auto;
  margin-bottom: 10px;
}

.litet-feature-text {
  margin-top: 15px;
  color: #ee5170;
  /* Rosa correspondente aos ícones */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  max-width: 200px;
}

/* Ajustes Desktop */
@media screen and (min-width: 991px) {
  .litet-features-section {
    max-width: 1920px;
    margin: auto;
    padding: 100px 80px;
  }

  .litet-features-container {
    /* Desktop: 4 colunas em linha */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }

  .litet-feature-icon {
    max-width: 169px;
  }

  .litet-feature-text {
    font-size: 22px;
    max-width: 250px;
  }
}

/* =========================================
   SEÇÃO: Pronto para qualquer destino
   ========================================= */

.litet-ready-section {
  width: 100%;
  max-width: 430px;
  margin: auto;
  background-color: #ffffff;
  padding: 40px 0px 0px 0px;
  display: flex;
  justify-content: center;
  overflow: hidden;

  /* Evita rolagem horizontal caso a imagem vaze */
}

.litet-ready-wrapper {
  width: 100%;
  max-width: 1920px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.litet-ready-text {
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 30px;
  width: 100%;
}

.litet-ready-title {
  color: #ee5170;

  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.litet-ready-desc {
  color: #736da6;
  /* Tom de roxo/cinza do texto */
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.litet-ready-desc strong {
  font-weight: 700;
}

.litet-ready-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.litet-ready-img {
  width: 100%;
  height: auto;
  max-width: 430px;
  /* Limite para o mobile não estourar */
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-ready-section {
    max-width: 1920px;
    margin: auto;
    background-image: url("assets/images/ready-background-desktop.png");
    background-position: left bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .litet-ready-wrapper {
    /* No desktop, inverte a ordem: texto vai para a direita e imagem para a esquerda */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .litet-ready-text {
    width: 45%;
    margin-bottom: 0;
    padding-left: 20px;
  }

  .litet-ready-title {
    font-size: 32px;
  }

  .litet-ready-desc {
    font-size: 22px;
    max-width: 550px;
    /* Evita que o texto fique muito largo */
  }

  .litet-ready-image-container {
    width: 55%;
    justify-content: center;
  }

  .litet-ready-img {
    max-width: 100%;
    width: auto;
  }
}

/* =========================================
   SEÇÃO: Practical
   ========================================= */

.litet-practical-section {
  width: 100%;
  max-width: 430px;
  margin: auto;
  background-color: #fdeddd;
  /* Roxo da Litet */
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  /* Espaço para o texto no mobile */
}

.litet-practical-wrapper {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.litet-practical-content {
  text-align: left;
  width: 100%;
  padding: 0 30px;
  margin-bottom: 20px;
  z-index: 2;
  /* Mantém o texto acima das imagens se houver sobreposição */
}

.litet-practical-title {
  color: #ee5170;
  /* Amarelo Litet */
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

.litet-practical-desc {
  color: #736da6;
  font-size: 22px line-height: 1.4;
  font-weight: 400;
}

.litet-practical-desc strong {
  font-weight: 700;
}

.litet-practical-bg-container {
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.litet-practical-car-img {
  width: 100%;
  height: auto;
  display: block;
}

.litet-practical-stroller-img {
  width: 100%;
  max-width: 420px;
  /* Tamanho do carrinho fechado no mobile */
  height: auto;
  z-index: 3;
  position: relative;
  margin-top: -160px;
  /* Puxa o carrinho para cima, sobrepondo a foto do carro */
  margin-bottom: 20px;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-practical-section {
    max-width: 1920px;
    margin: auto;
    padding: 0;
    min-height: 600px;
    display: flex;
    align-items: center;
  }

  .litet-practical-wrapper {
    flex-direction: row;
    justify-content: flex-start;
    padding: 80px;
    padding-top: 0px;
    min-height: 1000px;
  }

  .litet-practical-content {
    width: 45%;
    /* Texto ocupa quase metade da tela na esquerda */
    padding: 0;
    margin-bottom: 0;
    margin-top: 270px;
    /* Sobe um pouco o texto para alinhar com o design */
    margin-left: 6%;
    /* Dá um espaço entre o texto e a foto do carro */
  }

  .litet-practical-title {
    font-size: 36px;
  }

  .litet-practical-desc {
    font-size: 22px;
    max-width: 480px;
  }

  .litet-practical-bg-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    /* Imagem do carro preenche a direita */
    height: 100%;
  }


  .litet-practical-car-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    mix-blend-mode: multiply;

  }

  .litet-practical-stroller-img {
    position: absolute;
    bottom: 0;
    left: 45%;
    /* Posiciona o carrinho no meio, sobrepondo o fundo e a foto */
    transform: translateX(-50%);

    margin: 0;
    max-width: 589px;
  }
}

@media screen and (min-width: 991px) and (max-width: 1800px) {
  .litet-practical-content {
    margin-top: 440px;
    margin-left: 190px;
  }

  .litet-practical-desc {
    max-width: 423px;
  }

  .litet-practical-content {
    width: 60%;
  }
}

@media screen and (min-width: 991px) and (max-width: 1700px) {
  .litet-practical-content {

    margin-top: 360px;
    margin-left: 68px;
  }

  .litet-practical-car-img {
    max-width: 860px;
    object-position: right bottom;

  }

  .litet-practical-wrapper {
    min-height: 790px;
  }

  .litet-practical-desc {
    max-width: 423px;
  }

  .litet-practical-stroller-img {
    left: 48%;
  }
}

/* =========================================
   SEÇÃO: MÁXIMO ACONCHEGO E ERGONOMIA
   ========================================= */

.litet-bem-section {
  width: 100%;
  max-width: 430px;
  margin: auto;
  background-color: #ffffff;
  padding: 50px 0px 0px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.litet-bem-wrapper {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.litet-bem-text {
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
  width: 100%;
}

.litet-bem-title {
  color: #ee5170;
  /* Roxo da Litet */
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.litet-bem-desc {
  color: #736da6;
  /* Rosa da Litet */
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  max-width: 350px;
}

.litet-bem-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.litet-bem-img {
  width: 100%;
  height: auto;
  max-width: 450px;
  /* Controle do tamanho da imagem no mobile */
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-bem-section {
    max-width: 1920px;
    margin: auto;
    padding: 0px;
  }

  .litet-bem-wrapper {
    /* Inverte a ordem: o texto (que vem primeiro no HTML) vai para a direita */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }

  .litet-bem-text {
    width: 40%;
    margin-bottom: 0;
    padding-left: 40px;
    /* Dá um respiro entre a imagem e o texto */
  }

  .litet-bem-title {
    font-size: 36px;
  }

  .litet-bem-desc {
    font-size: 22px;
    max-width: 400px;
  }

  .litet-bem-image-container {
    width: 60%;
    justify-content: flex-start;
    /* Alinha a imagem do carrinho à esquerda */
  }

  .litet-bem-img {
    min-width: 140%;
    /* Um pequeno ajuste negativo se quiser que a imagem comece bem no limite da tela esquerda */
    margin-left: -200px;
  }
}

/* =========================================
   SEÇÃO: VÁRIAS FORMAS DE CUIDAR
   ========================================= */

.litet-versatile-section {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: auto;
  background-color: #ee5170;
  /* Fundo de segurança */
  display: flex;
  justify-content: center;
}

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

/* O wrapper fica absoluto por cima da imagem para posicionar o texto */
.litet-versatile-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  /* Centraliza o conteúdo no limite de 1200px */
}

.litet-versatile-content {
  width: 100%;
  max-width: 1200px;
  /* Mantém o alinhamento com as outras seções */
  padding: 40px 30px;
  padding-top: 80px;
  text-align: left;
}

.litet-versatile-title {
  color: #fae400;
  /* Amarelo Litet */
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}

.litet-versatile-desc {
  color: #fdeddd;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.litet-versatile-desc strong {
  font-weight: 700;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-versatile-section {
    max-width: 1920px;
    margin: auto;
  }

  .litet-versatile-content {
    padding: 80px 80px;
    padding-left: 200px;
    /* Limita a largura do texto para ele não invadir a foto da direita */
    max-width: 950px;
    margin-right: auto;
    /* Garante que o texto fique alinhado à esquerda dentro do wrapper */
  }

  .litet-versatile-title {
    font-size: 36px;
    margin-bottom: 20px;
    margin-top: 50px;
  }

  .litet-versatile-desc {
    font-size: 20px;
  }
}

@media screen and (min-width: 991px) and (max-width: 1800px) {
  .litet-versatile-content {
    padding-left: 100px;
    max-width: 750px;
    padding-top: 30px;
  }

  .litet-versatile-title {
    margin-top: 20px;
  }
}

@media screen and (min-width: 991px) and (max-width: 1500px) {
  .litet-versatile-content {
    padding-left: 80px;
    max-width: 650px;
    padding-top: 50px;
  }

  .litet-versatile-title {
    margin-top: 0px;
  }
}

@media screen and (min-width: 991px) and (max-width: 1030px) {
  .litet-versatile-title {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .litet-versatile-desc {
    font-size: 14px;
    max-width: 400px;
  }
}

/* =========================================
   SEÇÃO: COBERTURA COMPLETA
   ========================================= */

.litet-flexibilidade-section {
  width: 100%;
  max-width: 430px;
  margin: auto;

  /* Fundo bege clarinho da seção */
  padding: 50px 0px 0px;
  /* Sem padding embaixo para a imagem encostar na borda, se necessário */
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.litet-flexibilidade-wrapper {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.litet-flexibilidade-text {
  text-align: center;
  /* Centralizado no mobile */
  margin-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

.litet-flexibilidade-title {
  color: #e95273;
  /* Rosa Litet */
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.1;
}

.litet-flexibilidade-desc {
  color: #6c6398;
  /* Roxo/cinza do texto */
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.litet-flexibilidade-desc strong {
  font-weight: 700;
}

.litet-flexibilidade-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.litet-flexibilidade-img {
  width: 100%;
  height: auto;
  max-width: 450px;
  /* Ajuste para não ficar gigante no tablet/mobile */
  display: block;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-flexibilidade-section {
    max-width: 1920px;
    margin: auto;
    padding: 0px;
    padding-top: 30px;
    padding-bottom: 120px;
  }

  .litet-flexibilidade-wrapper {
    /* Inverte a ordem no desktop: Imagem vai para a esquerda, Texto para a direita */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }

  .litet-flexibilidade-text {
    width: 40%;
    text-align: left;
    /* Alinhado à esquerda no desktop */
    margin-bottom: 0;
    padding-left: 0px;
    padding-top: 0;
    margin-top: 360px;

  }

  .litet-flexibilidade-title {
    font-size: 36px;
    margin-bottom: 20px;
  }

  .litet-flexibilidade-desc {
    font-size: 22px;
    max-width: 450px;
  }

  .litet-flexibilidade-image-container {
    width: 60%;
    justify-content: flex-start;
    /* Alinha a imagem à esquerda da sua coluna */
  }

  .litet-flexibilidade-img {
    min-width: 120%;
    margin-left: -70px;
    /* Puxa o coração um pouco mais pra beirada, se necessário */
  }
}

/* =========================================
   SEÇÃO: TRAVEL SYSTEM PRONTO PARA USAR
   ========================================= */

.litet-protecao-section {
  width: 100%;
  max-width: 430px;
  margin: auto;
  position: relative;
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 50px;
}

.litet-protecao-wrapper {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.litet-protecao-content {
  text-align: left;
  width: 100%;
  padding: 0 30px;
  margin-bottom: 30px;
  z-index: 2;
}

.litet-protecao-title {
  color: #ee5170;
  font-size: 32px;
  font-weight: 700;
  line-height: 103.408%;
  margin-bottom: 15px;
}

.litet-protecao-desc {
  color: #736da6;
  font-size: 22px;
  line-height: 1.4;
  text-align: justify;
  font-weight: 400;
}

.litet-protecao-desc strong {
  font-weight: 600;
}

.litet-protecao-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
}

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

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-protecao-section {
    max-width: 1920px;
    margin: auto;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .litet-protecao-wrapper {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .litet-protecao-content {
    width: 100%;
    max-width: 825px;
    top: 10px;
    left: 10%;
    position: absolute;
    padding: 0;
  }

  .litet-protecao-title {
    font-size: 36px;
  }

  .litet-protecao-desc {
    font-size: 22px;
    max-width: 825px;
  }

  .litet-protecao-image-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .litet-protecao-bg {
    width: 100%;
    /*max-width: 1100px;*/
    height: auto;
  }
}

/* =========================================
   SEÇÃO: ESTABILIDADE E ESPAÇO
   ========================================= */

.litet-details-section {
  width: 100%;
  max-width: 430px;
  margin: auto;

  /* Substituímos a cor sólida pelas propriedades de imagem de fundo para o Mobile */
  background-color: #ffffff;
  /* Cor de segurança caso a imagem demore a carregar */
  background-image: url("assets/images/cora-bg-mobile.png");
  background-size: contain;
  /* Faz a imagem cobrir toda a área da seção */
  background-position: center center;
  background-repeat: no-repeat;

  padding: 60px 30px;
  display: flex;
  justify-content: center;

}

.litet-details-wrapper {
  width: 100%;
  max-width: 1450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

@media screen and (min-width: 991px) and (max-width: 1400px) {
  .litet-details-wrapper {
    width: 100%;
    max-width: 950px;
  }
}

.litet-details-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.litet-details-title {
  color: #F04E6E;
  /* Roxo Litet */
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
  text-align: center;
}

.litet-details-desc {
  color: #736DA6;
  /* Roxo/Cinza Litet */
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}

.litet-details-img {
  width: 100%;
  height: auto;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-details-section {
    max-width: 1920px;
    margin: auto;
    padding: 100px 80px;

    /* Trocamos a imagem de fundo para a versão Desktop */
    background-image: url("assets/images/cora-bg.png");
    /* Ajuste a extensão se necessário */
    background-size: contain;
    background-position: center top;
    min-height: 500px;
  }

  /* Transformamos o layout em um Grid de 2 colunas */
  .litet-details-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Áreas nomeadas para posicionar exatamente onde queremos */
    grid-template-areas:
      "texto1 img2"
      "img1   img2"
      "img1   texto2";
    gap: 20px;
    align-items: center;
  }

  /* Alinhamentos dos textos no Desktop */
  .litet-details-title,
  .litet-details-desc {
    text-align: left;
  }

  /* Distribuindo os itens nas áreas do Grid */
  .text-estabilidade {
    grid-area: texto1;
    align-self: end;
    /* Empurra o texto para baixo, perto da imagem dele */
    padding-right: 40px;
  }

  .img-estabilidade {
    grid-area: img1;
    align-self: start;
  }

  .img-espaco {
    grid-area: img2;
    /* Margin negativo pode ser usado para subir a imagem da direita e dar o efeito do design */
    margin-top: -60px;
  }

  .text-espaco {
    grid-area: texto2;
    align-self: start;
    /* Fica no topo da sua célula, logo abaixo da imagem 2 */
    padding-left: 40px;
    /* Dá um respiro da imagem da esquerda */
  }

  .litet-details-title {
    font-size: 36px;
  }

  .litet-details-desc {
    font-size: 22px;
  }

  .litet-details-img {
    min-width: 80%;
  }
}

/* =========================================
   SECÇÃO: DESIGN QUE ACOLHE
   ========================================= */

.litet-design-section {
  width: 100%;
  background-color: #ffffff;
  /* Cor de segurança */
  max-width: 430px;
  margin: auto;
  /* Imagem de fundo com a onda rosa para o Mobile */
  background-image: url("assets/images/design-bg-mobile.png");
  background-size: 100% 100%;
  /* Estica para preencher toda a área sem cortar */
  background-position: center bottom;
  background-repeat: no-repeat;

  /* Sem padding na parte inferior (0) para o carrinho encostar à base */
  padding: 50px 30px 0;
  display: flex;
  justify-content: center;
  position: relative;
}

.litet-design-wrapper {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.litet-design-text {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
}

.litet-design-title {
  color: #f04e6e;
  /* Roxo Litet */
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}

.litet-design-desc {
  color: #736da6;
  /* Rosa Litet */
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.litet-design-desc strong {
  font-weight: 700;
}

.litet-design-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.litet-design-img {
  width: 100%;
  height: auto;
  max-width: 222px;
  /* Limita o tamanho do carrinho no ecrã mobile */
  display: block;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-design-section {
    max-width: 1920px;
    margin: auto;
    padding: 80px 80px 0;

    /* Muda o fundo para a onda rosa na versão Desktop */
    background-image: url("assets/images/design-bg-desktop.png");
    background-size: cover;
    min-height: 1000px;
  }

  .litet-design-wrapper {
    flex-direction: row;
    /* Coloca o texto à esquerda e a imagem à direita */
    justify-content: space-between;
    align-items: start;
    /* Mantém o carrinho alinhado com a base */
  }

  .litet-design-text {
    width: 45%;
    margin-bottom: 120px;
    /* Empurra o texto mais para cima para alinhar perfeitamente com o espaço em branco */
    padding-right: 40px;
  }

  .litet-design-title {
    font-size: 36px;
    margin-bottom: 20px;
  }

  .litet-design-desc {
    font-size: 22px;
    max-width: 480px;
  }

  .litet-design-image-container {
    width: 55%;
    justify-content: center;
  }

  .litet-design-img {
    max-width: 412px;
    height: auto;
    position: absolute;
    margin-top: -170px;
  }
}

/* =========================================
   SEÇÃO FICHA TÉCNICA (LITET JAZZ)
   ========================================= */

/* --- BASE (MOBILE) --- */
.litet-specs-section {
  max-width: 430px;
  margin: auto;
  width: 100%;
  background-color: #ee5170;
  /* Cor de fundo Rosa Litet */
  padding: 40px 0px 60px 0px;
  font-family: "elza", sans-serif;
  box-sizing: border-box;
}

.specs-wrapper {
  width: 100%;
  max-width: 430px;
  /* Trava do mobile */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Container da Imagem */
.specs-img-col {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.specs-img {
  width: 100%;
  max-width: 430px;
  /* Limite de tamanho no mobile */
  height: auto;
  display: block;
}

/* Coluna de Texto */
.specs-text-col {
  width: 100%;
  text-align: center;
  /* Centralizado no mobile */
  color: #ffffff;
  /* Texto branco padrão */
}

.specs-title {
  color: #fff000;
  /* Amarelo Litet */
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px 0;
}

.specs-details {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}

/* Classe para destacar as chaves (ex: Marca:, Peso:) em Amarelo */
.specs-highlight {
  color: #fff000;
  font-weight: 700;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
  .litet-specs-section {
    max-width: 1920px;
    margin: auto;
    padding: 80px 0;
    display: flex;
    justify-content: center;
  }

  .specs-wrapper {
    max-width: 1400px;
    /* Trava do desktop */
    flex-direction: row;
    /* Coloca imagem e texto lado a lado */
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
  }

  .specs-img-col {
    width: 55%;
    /* A imagem ocupa mais espaço */
    margin-bottom: 0;
    justify-content: flex-start;
    /* Alinha a imagem à esquerda */
  }

  .specs-img {
    min-width: 1000px;
    /* Imagem grande no desktop */
    /* Margem negativa caso a imagem precise encostar na borda da tela 
           como parece no design de referência */
    margin-left: -150px;
  }

  .specs-text-col {
    width: 45%;
    text-align: right;
    /* Alinhado à direita conforme o design desktop */
    padding-left: 20px;
    padding-right: 50px;
    /* Afasta o texto da borda direita */
  }

  .specs-title {
    font-size: 38px;
    margin-bottom: 25px;
  }

  .specs-details {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Ajuste fino para telas intermediárias (Tablets/Laptops menores) */
@media screen and (min-width: 991px) and (max-width: 1200px) {
  .specs-img {
    min-width: 700px !important;
    margin-left: 0;
  }

  .specs-text-col {
    padding-right: 0;
  }

  .specs-details {
    font-size: 16px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .specs-img {
    min-width: 900px !important;
    margin-left: 0;
  }
}