/* Reset Básico */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* --- O Container Principal --- */
.chicco-bg-section {
        position: relative;
        width: 100%;
        height: 900px; /* Altura Desktop */
        background-image: url('assets/images/d1.png'); 
        background-size: cover;       
        background-position: center;  
        background-repeat: no-repeat;
        font-family: 'Manrope', sans-serif;
        overflow: hidden;
    }

    .logo-chicco {
        position: absolute;
        top: 40px; left: 10%;
        width: 100px;
        z-index: 20;
    }

    .texto-conteudo {
        position: absolute;
        bottom: 50px; left: 10%;
        z-index: 2;
        color: white;
        max-width: 450px;
    }

    .texto-conteudo h2 {
        font-size: 30px;
        font-weight: 300; 
        margin-bottom: 5px;
        opacity: 0.9;
        letter-spacing: -0.5px;
    }

    .texto-conteudo h1 {
        font-family: 'Zodiak', serif; 
        font-size: 46px; 
        line-height: 1.1;
        font-weight: 700; 
        margin-bottom: 15px;
    }

    .texto-conteudo p {
        font-size: 28px;
        font-weight: 600;
        line-height: 1.3;
        color: #ffdec1;
    }

    /* =========================================
       SEÇÃO 2: FASES (Fundo Azul)
       ========================================= */
    .secao-fases {
        background-color: #102a6e;
        padding: 60px 20px 80px 20px;
        text-align: center;
        font-family: 'Manrope', sans-serif;
    }

    .fases-header {
        max-width: 800px;
        margin: 0 auto 50px auto;
        color: white;
    }

    .fases-header h2 {
        font-family: 'Zodiak', serif;
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .fases-header p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
        opacity: 0.9;
    }

    .fases-container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        border-radius: 30px;
        padding: 50px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }

    .fase-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .fase-titulo {
        font-family: 'Zodiak', serif;
        color: #163786;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .fase-img {
        height: 300px; 
        object-fit: contain;
        margin-bottom: 25px;
    }

    .fase-desc {
        color: #163786;
        font-size: 16px;
        line-height: 1.5;
        max-width: 300px;
        font-weight: 500;
    }

    /* Controle de visibilidade Desktop/Mobile */
    .only-mob { display: none !important; }
    .only-desk { display: flex !important; }

    /* =========================================
       SEÇÃO 3: CONFORTO (Azul Médio)
       ========================================= */
    .secao-conforto {
        background-color: #5578B3;
        padding: 80px 20px;
        font-family: 'Manrope', sans-serif;
        color: white;
    }

    .conforto-container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        gap: 40px;
        align-items: flex-start; /* Alinha pelo topo para não ficar torto */
    }

    .conforto-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .conforto-img {
        width: 100%;         /* Ocupa toda a largura da coluna */
        height: 596px;       /* Altura Fixa */
        object-fit: cover;   /* Corta excesso para não distorcer */
        border-radius: 25px;
        margin-bottom: 30px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    .conforto-item h3 {
        font-family: 'Zodiak', serif;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .conforto-item p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
        opacity: 0.9;
        max-width: 95%;
    }

    /* =========================================
       SEÇÃO 4: INSTALAÇÃO (Azul Escuro)
       ========================================= */
    .secao-instalacao {
        background-color: #102a6e;
        padding: 80px 20px;
        color: white;
        font-family: 'Manrope', sans-serif;
    }

    .instalacao-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 50px auto;
    }

    .instalacao-header h2 {
        font-family: 'Zodiak', serif;
        font-size: 42px;
        font-weight: 700;
        line-height: 1.2;
    }

    .instalacao-container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .instalacao-item {
        flex: 1;
        text-align: left;
    }

    .instalacao-img {
        width: 100%;         /* Ocupa toda a largura da coluna */
        height: 596px;       /* Altura Fixa igual à anterior */
        object-fit: cover;   /* Corta excesso */
        border-radius: 25px;
        margin-bottom: 30px;
    }

    .instalacao-item h3 {
        font-family: 'Zodiak', serif;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .instalacao-item p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
        opacity: 0.9;
        margin-bottom: 15px;
    }

    /* =========================================
       RESPONSIVO GERAL (MOBILE - Até 900px)
       ========================================= */
    @media (max-width: 900px) {
        
        /* --- Banner Mobile --- */
        .chicco-bg-section {
            height: 560px;
            background-position: center top;
            background-image: url('assets/images/dm1.png'); 
        }
        .logo-chicco { display: none; }
        
        .texto-conteudo {
            left: 20px; right: 20px; bottom: 30px;
            text-align: left; 
        }
        .texto-conteudo h2 { font-size: 20px; }
        .texto-conteudo h1 { font-size: 36px; }
        .texto-conteudo p { font-size: 18px; }

        /* --- Fases Mobile --- */
        .secao-fases { padding: 40px 20px; }
        .fases-header h2 { font-size: 28px; }
        .fases-header p { font-size: 16px; }
        
        .fases-container {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
            flex-direction: column;
            gap: 20px;
        }
        .fase-item {
            background-color: white;
            border-radius: 20px;
            padding: 40px 20px;
            width: 100%;
        }
        .fase-img { height: auto; max-height: 200px; }
        
        /* Troca de imagem Fase 1 */
        .only-mob { display: flex !important; }
        .only-desk { display: none !important; }

        /* --- Conforto e Instalação Mobile --- */
        .secao-conforto, .secao-instalacao {
            padding: 50px 20px;
        }
        .conforto-container, .instalacao-container {
            flex-direction: column;
            gap: 50px;
        }
        .instalacao-header h2 {
            font-size: 28px;
            margin-bottom: 30px;
        }

        /* Centralização de Texto e Imagem */
        .conforto-item, .instalacao-item {
            text-align: center;
            align-items: center;
        }
        
        /* Fontes menores */
        .conforto-item h3, .instalacao-item h3 { font-size: 24px; }
        .conforto-item p, .instalacao-item p { font-size: 16px; }

        /* Imagens ajustadas para Mobile (Pequenas e sem altura fixa) */
        .conforto-img, .instalacao-img {
            height: auto;      /* Reseta a altura fixa de 596px */
            width: 100%;
            max-width: 300px;  /* Limita tamanho */
            margin: 0 auto 30px auto;
        }
    }
    /* =========================================
       SEÇÃO 5: VÍDEO
       ========================================= */
    .secao-video {
        background-color: white;
        padding: 0px 20px 80px 20px; /* Padding bottom para desgrudar do rodapé */
        /* Se quiser que cole na seção de cima sem espaço, mantenha padding-top: 0 */
    }

    /* O Cartão Branco */
    .video-card {
        background-color: white;
        max-width: 1100px;
        margin: 0 auto;       /* Centraliza o cartão */
        border-radius: 30px;  /* Bordas arredondadas do cartão */
        padding: 40px;        /* A moldura branca em volta do vídeo */
      
    }

    /* Wrapper para deixar o vídeo responsivo (16:9) */
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* Proporção 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 15px; /* Arredonda os cantos do vídeo também */
        background-color: #000; /* Fundo preto enquanto carrega */
    }

    .video-wrapper iframe, 
    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Ajuste Mobile */
    @media (max-width: 768px) {
        .video-card {
            padding: 20px; /* Borda branca mais fina no celular */
            border-radius: 20px;
        }
        .secao-video {
        
        padding: 0px 20px 20px 20px; /* Padding bottom para desgrudar do rodapé */
        /* Se quiser que cole na seção de cima sem espaço, mantenha padding-top: 0 */
    }
    }