/* Reset básico */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {  background: #ffffff; color: #fff; }
html, body, * {
  font-family: 'Baloo 2', 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: 991px) {
    .only-desktop { display: block !important; }
    .only-mobile { display: none !important; }
}
/* =========================================
   SEÇÃO: HERO MULTI KIDS OMNI
   ========================================= */

.multikids-hero-section {
    position: relative;
    width: 100%;
    background-color: #8E7B97; /* Cor lilás de segurança */
    display: flex;
    justify-content: center;
    overflow: hidden;
    max-width: 430px; /* Trava do mobile */
    margin: auto;
}

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

/* O wrapper cobre 100% da imagem para posicionar o texto */
.multikids-hero-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* No mobile, o texto desce para a parte inferior (área lilás) */
    justify-content: flex-end; 
    align-items: center;
}

.multikids-hero-content {
    width: 100%;
    max-width: 1200px;
    /* O 12% no final empurra o texto para cima, desgrudando da borda inferior */
    padding: 0 30px 20px; 
    text-align: left;
}

.multikids-hero-subtitle {
    font-family: 'Baloo 2', sans-serif !important;
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 0px;
}

.multikids-hero-title {
    font-family: 'Baloo 2', sans-serif !important;
    color: #FFFFFF;
    font-size: 80px; /* Tamanho grande simulando a logo OMNI */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0px;
    text-transform: uppercase;
}

.multikids-hero-desc {
    font-family: 'Baloo 2', sans-serif !important;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 10px;
}

.multikids-hero-tags {
    display: flex;
    gap: 15px; /* Espaço entre as pílulas laranjas */
    flex-wrap: wrap;
}

.multikids-tag {
    font-family: 'Baloo 2', sans-serif !important;
    background-color: #F67E0A; /* Laranja da Multi Kids */
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    padding: 6px 18px;
    border-radius: 60px; /* Borda arredondada (formato pílula) */
    text-align: center;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
    .multikids-hero-section {
        max-width: 1920px; /* Trava do mobile */
        margin: auto;
    }
    .multikids-hero-wrapper {
        justify-content: center; /* Centraliza verticalmente no Desktop */
    }

    .multikids-hero-content {
        padding: 0 80px; 
        max-width: 80%;
        /* Adicionamos uma margem no topo para que o texto não sobreponha a tarja azul */
        margin-top: 15%; 
    }

    .multikids-hero-subtitle {
        font-size: 45px;
    }

    .multikids-hero-title {
        font-size: 100px;
        margin-bottom: 10px;
    }

    .multikids-hero-desc {
        font-size: 40px;
        
        margin-bottom: 35px;
    }

    .multikids-tag {
        font-size: 44px;
        padding: 8px 24px;
    }
    .multikids-tag {
        margin-top: 20px;
    }
}
@media screen and (min-width: 991px) and (max-width: 1500px){
        .multikids-hero-section {
        max-width: 1920px; /* Trava do mobile */
        margin: auto;
    }
    .multikids-hero-wrapper {
        justify-content: center; /* Centraliza verticalmente no Desktop */
    }

    .multikids-hero-content {
        padding: 0 80px; 
        max-width: 80%;
        /* Adicionamos uma margem no topo para que o texto não sobreponha a tarja azul */
        margin-top: 20%; 
    }

    .multikids-hero-subtitle {
        font-size: 35px;
    }

    .multikids-hero-title {
        font-size: 90px;
        margin-bottom: 10px;
    }

    .multikids-hero-desc {
        font-size: 30px;
        
        margin-bottom: 15px;
    }

    .multikids-tag {
        font-size: 30px;
        padding: 8px 24px;
    }
    .multikids-tag {
        margin-top: 10px;
    }
}

/* =========================================
   SEÇÃO: ÍCONES DE BENEFÍCIOS MULTI KIDS
   ========================================= */

.multikids-features-section {
    width: 100%;
    background-color: #8E7B97; /* Cor lilás correspondente ao fundo */
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    max-width: 430px; /* Trava do mobile */
    margin: auto;
}

.multikids-features-container {
    width: 100%;
    max-width: 1500px;
    display: grid;
    /* Mobile: 2 colunas */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px 15px; /* Espaçamento entre linhas e colunas */
}

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

.multikids-feature-icon {
    width: 100%;
    max-width: 90px; /* Ajuste este valor dependendo do tamanho que você exportou os ícones redondos */
    height: auto;
    margin-bottom: 15px;
}

.multikids-feature-text {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700; /* Texto em negrito */
    line-height: 1.3;
    text-transform: uppercase; /* Força tudo a ficar em maiúsculo */
}

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

    .multikids-features-container {
        /* Desktop: 5 colunas distribuídas igualmente */
        grid-template-columns: repeat(5, 1fr);
        gap: 20px; /* Reduz o gap pois as colunas já dividem o espaço bem */
    }

    .multikids-feature-icon {
        max-width: 160px; /* Ícones um pouco maiores no desktop */
        margin-bottom: 20px;
    }

    .multikids-feature-text {
        font-size: 30px;
    }
}
@media screen and (min-width: 991px) and (max-width: 1300px){
    .multikids-features-container {
        /* Desktop: 5 colunas distribuídas igualmente */
        grid-template-columns: repeat(3, 2fr);
    }
}
/* =========================================
   SECÇÃO: PROTEÇÃO I-SIZE
   ========================================= */

.multikids-protection-section {
    width: 100%;
    background-color: #FFFFFF; /* Fundo branco de segurança */
    max-width: 430px; /* Trava do mobile */
    margin: auto;
    /* Imagem de fundo contendo a onda roxa - Mobile */
    background-image: url('assets/images/isize-bg-mobile.png'); 
    background-size: 100% 100%; /* Estica para preencher o bloco */
    background-position: top center;
    background-repeat: no-repeat;
    
    padding: 60px 30px 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

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

.multikids-protection-text {
    width: 100%;
    text-align: left;
    margin-bottom: 30px;
    margin-top: 40px; /* Dá um respiro em relação à onda roxa do topo no mobile */
}

.multikids-protection-title-box {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre a estrela e o texto */
    margin-bottom: 15px;
    margin-top: 30px;
}

.multikids-star-icon {
    width: 35px; /* Tamanho da estrela */
    height: auto;
}

.multikids-protection-title {
    color: #9664A0; /* Roxo/Lilás Multi Kids */
    font-size: 32px;
    font-weight: 800;
}

.multikids-protection-desc {
    color: #9664A0; 
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.multikids-protection-desc strong {
    font-weight: 800;
}

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

.multikids-protection-img {
    width: 100%;
    height: auto;
    max-width: 400px; /* Limite do tamanho da cadeira no mobile */
    display: block;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
    .multikids-protection-section {
        padding: 80px;
        max-width: 1920px;
        margin: auto;
        /* Imagem de fundo contendo a onda roxa - Desktop */
        background-image: url('assets/images/isize-bg-desktop.png'); 
    }

    .multikids-protection-wrapper {
        /* No Desktop, os elementos ficam lado a lado */
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }

    .multikids-protection-image-container {
        width: 50%; /* A cadeira ocupa a metade esquerda */
        justify-content: flex-start;
    }

    .multikids-protection-img {
        min-width: 1040px; /* Cadeira maior no desktop */
        margin-left: -40%; /* Ajuste fino caso precise encostar mais na borda */
    }

    .multikids-protection-text {
        width: 45%; /* O texto ocupa a metade direita */
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 30px;
    }

    .multikids-star-icon {
        width: 45px; /* Estrela maior no desktop */
    }

    .multikids-protection-title {
        font-size: 48px;
    }

    .multikids-protection-desc {
        font-size: 26px;
        max-width: 550px;
    }
}
@media screen and (min-width: 991px) and (max-width: 1200px){
    .multikids-protection-img {
        min-width: 840px; /* Cadeira maior no desktop */
        margin-left: -40%; /* Ajuste fino caso precise encostar mais na borda */
    }
}
/* =========================================
   SEÇÃO: SEGURANÇA EM PRIMEIRO LUGAR
   ========================================= */

.multikids-safety-section {
    max-width: 430px; /* Trava do mobile */
    margin: auto;
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 20px 40px;
    display: flex;
    justify-content: center;
    overflow: hidden; /* Evita que as ondas amarelas criem barra de rolagem horizontal */
}

.multikids-safety-wrapper {
    width: 100%;
    max-width: 1400px;
}

/* O fundo roxo em formato de pílula (vertical no mobile) */
.multikids-safety-box {
    background-color: #877795; /* Roxo/Lilás Multi Kids */
    border-radius: 150px; /* Deixa as bordas totalmente arredondadas */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px 80px; /* Padding inferior para dar respiro ao texto */
    margin-top: 50px; /* Empurra a caixa para baixo para a cadeira vazar no topo */
}

.multikids-safety-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Margem negativa puxa a cadeira para fora da caixa roxa no topo */
    margin-top: -60px; 
    margin-bottom: 20px;
}

.multikids-safety-img {
    width: 120%; /* Permite que as ondas amarelas vazem para as laterais */
    max-width: 450px;
    height: auto;
    display: block;
}

.multikids-safety-text {
    width: 100%;
    max-width: 320px;
    text-align: left;
}

.multikids-safety-title-box {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre o ícone e o título */
    margin-bottom: 15px;
}

.multikids-safety-icon {
    width: 50px;
    height: auto;
}

.multikids-safety-title {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.multikids-safety-desc {
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}

.multikids-safety-desc strong {
    font-weight: 800;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
/* =========================================
   MEDIA QUERY DESKTOP (> 991px) - ATUALIZADO
   ========================================= */
@media screen and (min-width: 991px) {

    .multikids-safety-section {
        max-width: 1920px;
        margin: auto;
        padding: 250px 80px;
    }

    .multikids-safety-box {
        flex-direction: row-reverse; 
        border-radius: 200px;
        padding: 0 80px 0 60px;
        margin-top: 0;
        min-height: 400px; /* Altura mínima da caixa roxa */
        align-items: center;
    }

    .multikids-safety-image-container {
        width: 50%; /* Deixa metade do espaço para o texto */
        display: flex;
        justify-content: flex-end;
        position: relative;
        /* Puxa a imagem para cima e para baixo proporcionalmente ao novo tamanho */
        margin-top: -220px; 
        margin-bottom: -180px; 
        z-index: 5;
    }

    .multikids-safety-img {
        width: 900px; /* Força o tamanho desejado */
        max-width: none; /* Remove qualquer trava de segurança anterior */
        height: auto;
        /* Puxa a imagem para a direita para ela vazar da pílula sem cobrir o texto */
        margin-right: -150px; 
    }

    .multikids-safety-text {
        padding-top: 100px;
        padding-bottom: 100px;
        width: 45%;
        max-width: 550px;
        position: relative;
        z-index: 10; /* Garante que o texto fique legível */
    }

    .multikids-safety-title {
        font-size: 48px;
    }

    .multikids-safety-desc {
        font-size: 26px;
    }
}
@media screen and (min-width: 991px) and (max-width: 1400px){
    .multikids-safety-img {
        width: 700px;
        max-width: none;
        height: auto;
        margin-right: -150px;
    }
}
/* =========================================
   SEÇÃO: INSTALAÇÃO UNIVERSAL
   ========================================= */

.multikids-install-section {
    max-width: 430px; /* Trava do mobile */
    margin: auto;
    position: relative;
    width: 100%;
    background-color: #4A4A4A; /* Fundo escuro de segurança */
    display: flex;
    justify-content: center;
    overflow: hidden;
}

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

/* Wrapper em position absolute para cobrir toda a foto de fundo */
.multikids-install-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centraliza o limite do conteúdo */
}

/* Container que respeita o limite máximo de 1200px do seu layout */
.multikids-install-content {
    width: 100%;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    /* No mobile, joga o bloco para baixo e centraliza */
    justify-content: flex-end; 
    align-items: center;
    padding-bottom: 10%; /* Dá um respiro da borda inferior da foto no celular */
}

/* A Caixa que recebe a imagem do fundo roxo */
.multikids-install-box {
    /* MUDAR AQUI: Caminho para a sua imagem PNG do fundo roxo */
    background-image: url('assets/images/fundo-roxo-texto.png'); 
    background-size: 100% 100%; /* Estica a mancha roxa para caber exatamente no tamanho do texto */
    background-position: center;
    background-repeat: no-repeat;
    
    width: 90%;
    max-width: 400px; /* Largura máxima da caixa no mobile */
    /* Padding interno: ajuste esses valores caso o texto fique muito colado na borda do PNG roxo que você exportar */
    padding: 40px 40px; 
    display: flex;
    flex-direction: column;
}

.multikids-install-title-row {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre a estrela e o título */
    margin-bottom: 15px;
}

.multikids-install-icon {
    width: 40px; /* Ajuste o tamanho da sua estrela */
    height: auto;
}

.multikids-install-title {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
}

.multikids-install-desc {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
    .multikids-install-section {
        max-width: 1920px;
        margin: auto;
    }
    .multikids-install-content {
        /* No desktop, centraliza verticalmente e alinha a caixa à esquerda */
        justify-content: center; 
        align-items: flex-start;
        padding-bottom: 0;
        padding-left: 80px; /* Margem esquerda padrão das outras seções */
    }

    .multikids-install-box {
        max-width: 540px; /* Aumenta a caixa roxa no computador */
        min-height: 340px;
        padding: 60px 60px; /* Dá mais respiro interno */
    }

    .multikids-install-icon {
        width: 45px;
    }

    .multikids-install-title {
        font-size: 48px;
    }

    .multikids-install-desc {
        font-size: 26px;
    }
}
/* =========================================
   SEÇÃO: DETALHES (CUIDADO E PRATICIDADE)
   ========================================= */

.multikids-details-section {
    max-width: 430px; /* Trava do mobile */
    margin: auto;
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

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

.multikids-detail-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.multikids-detail-title-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.multikids-detail-icon {
    width: 50px; /* Tamanho dos ícones laranjas */
    height: auto;
}

.multikids-detail-title {
    color: #9664A0; /* Roxo/Lilás Multi Kids */
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.multikids-detail-desc {
    color: #9664A0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}

.multikids-detail-desc strong {
    font-weight: 800;
}

/* --- ORDEM E ALINHAMENTO NO MOBILE --- */

.multikids-wave-icon {
    width: 300px;
    margin: -40px -140px 20px 0px; /* Ajuste fino para posicionar a onda no mobile */
    display: block;
}

.text-cuidado {
    order: 1;
    align-items: center;
    text-align: left;
    margin-bottom: 40px;
}

.img-almofada {
    order: 2;
    align-items: center;
    margin-bottom: 50px;
}

.img-almofada img { max-width: 380px; }

.img-fivela {
    order: 3;
    align-items: center;
    position: relative;
    z-index: 5; /* Garante que fique por cima da cadeira */
    margin-bottom: -60px; /* Sobrepõe a cadeira de baixo */
}

.img-fivela img { max-width: 300px; margin-left: -150px;margin-bottom: -20px;}

.img-cadeira {
    order: 4;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

.img-cadeira img { max-width: 350px; }

.text-praticidade {
    order: 5;
    align-items: center;
    text-align: center;
}


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

    /* Mágica do Grid: Mapeia onde cada item vai ficar */
    .multikids-details-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "almofada cuidado"
            "fivela   cadeira"
            "praticidade cadeira";
        gap: 20px 40px;
        align-items: center;
    }

    .multikids-detail-item {
        order: unset; /* Remove a ordem do mobile */
        margin-bottom: 0;
    }

    /* Posicionando cada item no seu lugar do Grid */
    .text-cuidado { 
        grid-area: cuidado; 
        align-items: flex-start;
        padding-left: 20px;
        position: relative; /* Necessário para a onda absoluta */
    }

    .multikids-wave-icon {
        position: absolute;
        top: -260px;
        right: -20px;
        margin: 0;
        width: 550px;
    }

    .img-almofada { 
        grid-area: almofada; 
        align-items: self-end; 
    }
    .img-almofada img { max-width: 600px; }

    .img-fivela { 
        grid-area: fivela; 
        align-items: flex-end; /* Joga a fivela para o canto direito da sua coluna */
        margin-right: -120px; /* Faz a fivela vazar para a coluna da direita */
        margin-bottom: -150px; /* Joga um pouco para baixo */
    }
    .img-fivela img { 
        max-width: 500px; 
        margin-right: -150px;
    }

    .img-cadeira { 
        grid-area: cadeira; 
        align-items: flex-start; 
        margin-top: -100px; /* Puxa a cadeira mais para cima, perto do texto 1 */
    }
    .img-cadeira img { max-width: 500px; margin-left: 30px; }

    .text-praticidade { 
        grid-area: praticidade; 
        align-items: flex-end; /* Alinha o texto à direita da sua coluna */
        text-align: right; 
        padding-right: 40px;
    }
    
    .text-praticidade .multikids-detail-title-box {
        justify-content: flex-end; /* Joga o ícone e título para a direita */
    }

    /* Aumentando as fontes no Desktop */
    .multikids-detail-title { font-size: 48px; }
    .multikids-detail-desc { font-size: 26px; }
}
/* =========================================
   SEÇÃO: VIAGENS MAIS TRANQUILAS
   ========================================= */

.multikids-travel-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

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

.multikids-travel-img-main-container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Margem negativa puxa a foto do bebê para cima dessa imagem no Mobile */
    margin-bottom: -50px; 
}

.multikids-travel-img-main {
    width: 100%;
    max-width: 450px; /* Tamanho controlado para o mobile */
    height: auto;
    display: block;
}

.multikids-travel-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 5; /* Garante que o bloco fique por cima da imagem principal */
}

.multikids-travel-img-circle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.multikids-travel-img-circle {
    width: 100%;
    max-width: 280px; /* Tamanho da foto redonda no mobile */
    height: auto;
    margin-left: -40%;
}

.multikids-travel-text {
    width: 100%;
    max-width: 300px;
    margin: 0 auto; /* Centraliza a caixa principal */
    text-align: left;
}
.multikids-travel-title-box {
    display: flex;
    align-items: center;
    justify-content: center; /* Alinha o conteúdo interno ao centro */
    gap: 15px;
    
    /* O SEGREDO ESTÁ AQUI 👇 */
    width: fit-content; /* A caixa vai abraçar apenas o tamanho do ícone + texto */
    margin: 0 auto 20px auto; /* Centraliza a própria caixa de forma absoluta no meio da tela */
}

.multikids-travel-icon {
    width: 40px; /* Tamanho do ícone de carrinho */
    height: auto;
}

.multikids-travel-title {
    color: #9664A0; /* Roxo/Lilás Multi Kids */
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.multikids-travel-desc {
    color: #9664A0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}


/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
    .multikids-travel-title-box {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        width: fit-content; /* A caixa vai abraçar apenas o tamanho do ícone + texto */
        margin: 0;
    }
    .multikids-travel-section {
        padding: 100px 80px;
    }

    .multikids-travel-wrapper {
        flex-direction: row; /* Coloca os elementos lado a lado */
        justify-content: space-between;
        align-items: center;
    }

    .multikids-travel-img-main-container {
        width: 55%; /* Ocupa a metade esquerda */
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .multikids-travel-img-main {
        min-width: 120%; 
        /* Pode usar margem negativa aqui se precisar encostar a imagem mais na borda esquerda */
        margin-left: -25%; 
    }

    .multikids-travel-content {
        width: 45%; /* Ocupa a metade direita */
        align-items: flex-start; /* Alinha o conteúdo à esquerda da sua coluna */
        padding-left: 20px;
    }

    .multikids-travel-img-circle-container {
        /* Margem negativa puxa a foto redonda para a esquerda, sobrepondo o fundo amarelo da cadeira */
        margin-left: -120px; 
        margin-bottom: 40px;
    }

    .multikids-travel-img-circle {
        max-width: 500px; /* Foto do bebê maior no desktop */
        margin-left: 0%;
    }

    .multikids-travel-text {
        max-width: 600px;
    }

    .multikids-travel-icon {
        width: 51px;
    }

    .multikids-travel-title {
        font-size: 48px;
    }

    .multikids-travel-desc {
        margin-top: 15px;
        font-size: 26px;
    }
}
/* =========================================
   SEÇÃO: LIMPEZA PRÁTICA
   ========================================= */

.multikids-cleaning-section {
    max-width: 430px; /* Trava do mobile */
    margin: auto;
    width: 100%;
    /* Fundo Roxo de Background - Mobile */
    background-image: url('assets/images/bg-limpeza-mobile.png');
    background-size: 100% 100%; /* Estica para preencher a seção */
    background-position: center bottom;
    background-repeat: no-repeat;
    
    background-color: #FFFFFF; /* Cor de segurança onde não há imagem */
    padding: 40px 30px 60px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.multikids-cleaning-wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    position: relative; /* Necessário para posicionar elementos flutuantes depois */
}

/* Onda Amarela */
.multikids-cleaning-wave {
    width: 250px;
    align-self: flex-start; /* Joga a onda para o canto esquerdo */
    margin-bottom: 20px;
    margin-left: -30px;
}

/* Imagem da Cadeira */
.multikids-cleaning-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    z-index: 2; /* Fica acima do fundo roxo */
}

.multikids-cleaning-img {
    width: 100%;
    max-width: 380px; /* Limite do tamanho da cadeira no celular */
    height: auto;
    display: block;
}

/* Bloco de Texto */
.multikids-cleaning-text {
    width: fit-content;
    margin: 0 auto; /* Centraliza a caixa inteira na área roxa */
    text-align: left;
}

.multikids-cleaning-title-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.multikids-cleaning-icon {
    width: 40px;
    height: auto;
}

.multikids-cleaning-title {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
}

.multikids-cleaning-desc {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.multikids-cleaning-desc strong {
    font-weight: 800;
}

/* =========================================
   MEDIA QUERY DESKTOP (> 991px)
   ========================================= */
@media screen and (min-width: 991px) {
    .multikids-cleaning-section {
        max-width: 1920px;
        min-height: 940px;
        padding: 80px;
        /* Troca para o Fundo Roxo versão Desktop */
        background-image: url('assets/images/bg-limpeza-desktop.png');
    }

    .multikids-cleaning-wrapper {
        flex-direction: row; /* Coloca Imagem e Texto lado a lado */
        justify-content: space-between;
        align-items: center; /* Alinha pelo centro vertical */
    }

    /* A onda flutua pelo topo esquerdo sem atrapalhar o Grid */
    .multikids-cleaning-wave {
        position: absolute;
        top: -20px;
        left: -42%;
        width: 550px;
        margin-bottom: 0;
    }

    /* Texto vai para a Esquerda */
    .multikids-cleaning-text {
        width: 50%;
        order: 1; /* Força o texto a ser o 1º elemento da linha */
        margin: 0;
        padding-left: 180px; /* Afasta da borda esquerda para alinhar com o design */
        padding-top: 120px; /* Desce um pouco para ficar centralizado na mancha roxa */
    }

    /* Cadeira vai para a Direita */
    .multikids-cleaning-image-container {
        width: 50%;
        order: 2; /* Força a imagem a ser o 2º elemento */
        justify-content: flex-end;
        margin-bottom: -110px; /* Faz a base da cadeira "vazar" da mancha roxa por baixo */
    }

    .multikids-cleaning-img {
        min-width: 900px;
        margin-right: -200px;
        margin-top: -100px;
    }

    /* Fontes Maiores */
    .multikids-cleaning-icon {
        width: 45px;
    }

    .multikids-cleaning-title {
        font-size: 48px;
    }

    .multikids-cleaning-desc {
        font-size: 26px;
    }
}
@media screen and (min-width: 991px) and (max-width: 1050px){
    .multikids-hero-subtitle {
        font-size: 25px;
    }
    .multikids-hero-title {
        font-size: 70px;
        margin-bottom: 5px;
    }
    .multikids-hero-desc {
        font-size: 20px;
        margin-bottom: 5px;
    }
    .multikids-tag {
        font-size: 20px;
        padding: 8px 20px;
    }
    .multikids-feature-icon {
        max-width: 120px;
    }
    .multikids-feature-text {
         font-size: 20px;
    }   
    .multikids-protection-img {
        min-width: 740px;
    }
    .multikids-protection-title {
        font-size: 38px;
    }
    .multikids-protection-desc {
        font-size: 20px;
    }
    .multikids-safety-section {
        padding: 150px 40px;
    }
    .multikids-safety-img {
        width: 600px;
    }
    .multikids-safety-title {
        font-size: 38px;
    }
    .multikids-safety-desc {
        font-size: 20px;
    }
    .multikids-install-title {
        font-size: 38px;
    }
    .multikids-install-desc {
        font-size: 20px;
    }
    .multikids-install-box {
        max-width: 440px;
        min-height: 300px;
        padding: 60px 60px;
    }
    .img-almofada img {
        max-width: 450px;
    }
    .multikids-wave-icon {
        width: 340px;
    }
    .multikids-detail-title {
        font-size: 38px;
    }
    .multikids-detail-desc {
        font-size: 20px;
    }
    .img-cadeira img {
        max-width: 450px;
    }
    .img-fivela img {
        max-width: 400px;
    }
    .multikids-travel-img-circle {
        max-width: 350px;
    }
    .multikids-travel-img-main {
        min-width: 110%;
        margin-left: -15%;
    }
    .multikids-travel-title {
        font-size: 38px;
    }
    .multikids-travel-desc {
        margin-top: 5px;
        font-size: 20px;
    }
    .multikids-cleaning-wave {
        width: 350px; 
        left: -18%;
    }
    .multikids-cleaning-img {
        min-width: 600px;
        margin-right: -100px;
        margin-top: 00px;
        margin-bottom: -100px;
    }
    .multikids-cleaning-title {
        font-size: 38px;
    }
    .multikids-cleaning-desc {
        font-size: 20px;
    }
    .multikids-cleaning-section {
        min-height: 800px;
    }
}