@charset "utf-8";
/* CSS Document */

 /* ==========================================================================
           1. ESTILOS GLOBAIS E RESET
           ========================================================================== */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            overflow-x: hidden;
        }

        body {
            background-image: url(../imagens/marmore.png);
            background-repeat: repeat;
			background-attachment: fixed;
            font-family: 'Montserrat', Arial, sans-serif; /* Corrigido de 'monteserrat' */
            color: #333;
            padding: 0px 0px;
            max-width: 1100px;
            margin-right: auto;
            margin-left: auto;
            -webkit-font-smoothing: antialiased;
        }

        .site {
            padding-left: 12px;
            padding-right: 12px;
        } 

        .linha-topo {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            gap: 3%; /* Impede que o divisor seja comprimido */
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #D4AF37;
            box-sizing: border-box;
            /*flex-wrap: nowrap;*/ /* Garante que não quebre para a linha de baixo */
        }

        .logo {
            height: auto;
            max-width: 20%;
            min-width: 100px; /* Trava o tamanho mínimo da logo em 100px */
            display: block;
            padding-bottom: 1px;
        }

        .divisor {
            width: 1px;
            height: clamp(30px, 4vw, 50px);
            background: #bbb;
            flex-shrink: 0;  
        }

        h1.titulo {
            margin: 0;
            font-weight: 600;
            color: #666;
            line-height: 1.1; /* Aumente levemente para duas linhas não grudarem */
            font-size: clamp(15px, 2.0vw, 24px);
            padding-bottom: 0px;
            white-space: normal; /* Permite que o texto quebre em duas linhas */
            max-width: 60%;  
            align-items: flex-end;/* Limita a largura para ele quebrar antes de empurrar tudo */
        }

        /* ==========================================================================
           3. INTRODUÇÃO (TÍTULO E GRID PRINCIPAL COM TYPOGRAPHY FLUIDA)
           ========================================================================== */
        .titulo-principal {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.2rem, 1.2rem + 2vw, 2.5rem); /* Transição suave de 1.6rem até 2.5rem */
            line-height: 1.2;
            color: #1a1a1a;
            margin-bottom: 12px;
            margin-top: 12px;
        }

        .destaque-cursivo { 
            font-family: 'Montserrat', sans-serif; 
            font-style: normal; 
            font-weight: 400; 
            color: #2c2c2c; 
        }

        .texto-menor {
            font-size: 0.6em; 
            font-weight: normal; 
            vertical-align: middle;
            display: inline-block; 
            padding: 0 5px;
        }

        .container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 10px;
            margin: 0px auto 0 auto; 
            align-items: end;         
        }

        .conteudo-texto {
            font-family: 'Montserrat', sans-serif;
            z-index: 2;             
            position: relative;     
        }
        
        .conteudo-texto p {
            font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); /* Escala de forma fluida de 1.05rem a 1.3rem */
            margin-bottom: 20px;
            margin-top: 0px;
            line-height: 1.5;
            border-top: thin solid #ABABAB;
            border-bottom: thin solid #ababab;
            padding-top: 5px;
            padding-bottom: 5px;
            font-family: 'Montserrat', sans-serif;
            font-style: normal;
            font-weight: 400;
        }

        .conteudo-texto ul { list-style: none; margin-left: 10%; }
        .conteudo-texto li { 
            font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.1rem); /* Encolhe dinamicamente em telas minúsculas */
            margin-bottom: 10px; 
        }
        .conteudo-texto li::before { content: "✓ "; font-weight: bold; color: #00740E; }

        .conteudo-imagem img {
            width: 350px;            
            height: auto;
            display: block;
            margin-top: 0px;
            position: relative;     
            z-index: 1;             
        }

        /* ==========================================================================
           4. SEÇÃO SELO LATERAL (COM TYPOGRAPHY FLUIDA)
           ========================================================================== */
        .secao-selo-lateral {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 20px;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 10px;
            padding: 10px;
            border-bottom: 1px solid #D4AF37;
        }
	
        .texto-carbon {
            flex: 2;
            padding-right: 0px;
            float: left;
        }

        .texto-carbon p { 
            font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); /* Ajusta dinamicamente entre 1.1rem e 1.5rem */
            line-height: 1.4; 
            color: #444; 
            font-family: 'Montserrat', sans-serif; 
        }

        .selo-carbon-lateral { flex: 1; display: flex; justify-content: flex-end; }
        .selo-carbon-lateral img { height: 80px; width: auto; }

        /* ==========================================================================
           5. SEÇÃO PROMO / VÍDEO FIBRA DE CARBONO
           ========================================================================== */
        .carbono {
            width: auto;
            max-width: 1100px;
            margin: 0 auto;
            box-sizing: border-box;
        }		

        .promo-wrapper {
            display: flow-root;     
            background: rgba(255,255,255,0.53);
            border-radius: 15px;
            padding-left: clamp(10px, 2vw, 20px);
            padding-right: clamp(10px, 2vw, 20px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
            margin-left: 0px;
            margin-top: 10px;
            padding-top: 15px;
            margin-bottom: 20px;   
        }

        .promo-video {
            float: right;   
            width: 30%;       
            max-width: 400px;   
            margin-left: 25px; 
            margin-bottom: 15px;  
            margin-right: 5px;
        }

        .promo-video video {
            width: 100%;     
            height: auto;
            border-radius: 12px;
            display: block;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .promo-wrapper h2 {
            color: #926607;
            padding-bottom: 0px;
        }

        .promo-wrapper span {
            color: #2F2F2F;
            font-size: 0.875rem; /* Convertido de 14px para rem */
            font-weight: normal;
            padding-bottom: 12px;
            display: block;
        }

        .promo-wrapper p {
            color: #272727;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem; /* Convertido de 16px para rem (16/16) */
        }

        .promo-content {
            text-align: left;
            line-height: 1.6;
            color: var(--text); 
        }

        /* ==========================================================================
           6. BOTÕES, COMPLEMENTOS E NOVAS SEÇÕES (LINHAS, PERSONALIZAÇÃO, FOOTER E MODAL)
           ========================================================================== */
		
        /* Botões padronizados no estilo clássico do index.html */
        .btn-pedido, .btn-catalogo {
            display: inline-block;
            padding: 10px 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: 0.25s;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
        }

        .btn-pedido {
            background-color: #D4AF37; 
            color: #fff;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .btn-pedido:hover { 
            background: #2a2a2a; 
        }

        .btn-catalogo {
            background: rgba(0, 0, 0, 0.50); 
            color: #fff;
        }
        .btn-catalogo:hover { 
            background: #2a2a2a; 
        }

        /* Container de botões emparelhados dentro do card de produto */
        .botoes {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        .botoes .btn-pedido, .botoes .btn-catalogo {
            margin: 0;
            flex: 1;
        }

        .sobre {
            font-weight: 600;
            font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); /* Fluido entre 1rem e 1.2rem */
        }
		
        h4 {
            color: #926607;
            margin-top: 10px; 
        }

        /* Estrutura das Novas Seções Incorporadas */
        .catalogos {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .catalogos h2 {
            font-size: 1.8rem;
            color: #1a1a1a;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            margin-top: 10px;
        }

        .catalogos hr {
            border: none;
            border-top: 1px solid #D4AF37;
            margin: 15px 0 25px;
        }
		
        .grid-produtos, .grid-personalizacao {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
        }

        .card-produto {
            background: #FFF;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.08);
        }

        .card-produto img {
            width: 100%;
            height: auto;
            object-fit: contain; /* Alterado de cover para contain para não cortar as laterais */
            background-color: #666666; /* Fundo suave para preencher espaços se a foto for menor */
            border-radius: 10px;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .card-produto h3 {
            margin: 10px 0 6px;
            font-family: 'Montserrat', sans-serif;
        }

        .card-produto p {
            margin: 0 0 14px;
            color: #5c5c5c;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
        }

        /* Imagens da Seção de Personalização */
        .img-personalizacao {
            width: 100%;
            height: 250px;
            object-fit: cover !important; /* Foto preenche sem distorção */
            background-color: #666666 !important;  
            border-radius: 10px;
            padding: 0 !important; /* Reseta padding das fotos */
        }

/* Seção das Imagens Lado a Lado (Mostruário e Vitrine) */
        .duas-imagens {
            display: flex;
            width: 100%;
            gap: 0;
            margin-top: 20px;
            margin-bottom: 20px;
			border-radius: 10px;
        }

        .duas-imagens img {
            width: 50%;
            height: auto;
            display: block;
            object-fit: cover;
        }




        /* Rodapé institucional */
        .footer {
            background: #d5d5d5;
            color: #000000;
            text-align: center;
            padding: 10px 0px;
            font-size: 0.72rem;
            margin-top: 10px;
            line-height: 1.5;
			 border-radius: 10px;
			
        }

        /* --- MODAL DA GALERIA --- */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .modal.open {
            display: flex !important;
        }

        .modal-slider {
            display: flex;
            width: 100%;
            max-width: 1100px;
            height: 75vh;
            align-items: center;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .modal-slider::-webkit-scrollbar {
            display: none !important;
        }

        .modal-slider img {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
            object-fit: contain;
            scroll-snap-align: center;
            padding: 0 10px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

       .close {
            position: absolute;
            top: 18px;
            right: 24px;
            background: transparent;
            border: 0;
            color: #fff;
            font-size: 42px;
            cursor: pointer;
            z-index: 10;
        }

        .seta {
            position: absolute;
            top: 46%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.12);
            border: 0;
            color: #fff;
            border-radius: 999px;
            width: 44px;
            height: 44px;
            font-size: 28px;
            cursor: pointer;
            z-index: 10;
        }
        .prev { left: 16px; }
        .next { right: 16px; }

        


/* ==========================================================================
   9. BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */
.btn-whatsapp-flutuante {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 999; /* Mantém acima do conteúdo, mas abaixo dos modais abertos */
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.btn-whatsapp-flutuante:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

/* Ajustes de tamanho e respiro em telas pequenas */
@media (max-width: 480px) {
    .btn-whatsapp-flutuante {
        bottom: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
    }
    .btn-whatsapp-flutuante svg {
        width: 26px;
        height: 26px;
    }
}








/* 
==========================================================================
           7. MEDIA QUERIES (APENAS PARA AJUSTES DE LAYOUT E MARGENS)
           ========================================================================== */
        
        /* Tablets e Telas Médias (Entre 661px e 900px) */
        @media (max-width: 900px) and (min-width: 661px) {
            .container {
                grid-template-columns: 1.8fr 1.2fr; 
                gap: 20px;
            }
            .conteudo-imagem img {
                margin-left: -60px;
                width: 350px;       
                margin-bottom: -33px;
            }
            .conteudo-texto ul { list-style: none; margin-left: 1%; }
            .conteudo-texto li {
                margin-bottom: 10px;
            }
        }

        /* Telas intermediárias até 810px */
        @media (max-width: 810px) {
            .conteudo-imagem img {
                margin-left: -50px;  
            }
        }

        /* Celulares e Telas Pequenas (Abaixo de 660px) */
        @media (max-width: 660px) {
            .container { 
                grid-template-columns: 1fr; 
                gap: 24px; 
            }

            .conteudo-texto p {
                margin-top: 0px;
                margin-bottom: 15px;
            }

            .conteudo-texto ul {
                margin-left: 0; 
                padding-left: 0px;
            }

            .conteudo-texto li {
                margin-bottom: 5px;
            }

            .conteudo-imagem img {
                margin-left: auto;   
                margin-right: 0px;  
                margin-top: clamp(-100px, -18vw, -60px); 
                width: clamp(190px, 45vw, 280px);        
                height: auto;
                max-width: 100%;
            }
            
            .secao-selo-lateral {
                padding: 10px; 
                gap: 10px;  
                margin-top: 10px;
            }
			
            .promo-video {
                float: none; 
                width: 100%; 
                max-width: 400px;
                margin: 0 auto 20px;
            }

            /* Força a quebra dos grids em colunas simples nos dispositivos móveis */
            .grid-produtos, .grid-personalizacao {
                grid-template-columns: 1fr !important;
                gap: 15px;
            }
			
 /* Configuração responsiva para as duas imagens (Mostruário e Vitrine) */
            .duas-imagens {
                flex-direction: column;
                gap: 15px;
            }

            .duas-imagens img {
                width: 100%;
                border-radius: 10px; /* Arredondamento para casar com o padrão das imagens de cima */
            }
        }
			
			
        @media (max-width: 560px) { 
            .conteudo-imagem img {
                margin-top: -70px;
                max-width: 260px;     
                height: auto;
                width: auto;
            }
            .secao-selo-lateral {
                margin-top: 0px;
            }	
        }

        @media (max-width: 460px) { 
            .conteudo-imagem img {
                margin-top: -70px;
                max-width: 210px;     
                height: auto;
                width: auto;
            }
        }

/* ==========================================================================
   8. ESTILOS DO MODAL DE ORÇAMENTO (FORMULÁRIO WHATSAPP)
   ========================================================================== */
#modal-orcamento {
    display: none; /* Mantém oculto por padrão */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82); /* Fundo escuro atrás do formulário */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Garante que fique por cima de tudo */
    padding: 15px;
}

#modal-orcamento.open {
    display: flex !important; /* Exibe o modal quando ativado via JS */
}

.modal-conteudo-orcamento {
    background: #fff;
    width: 100%;
    max-width: 650px;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 12px 35px rgba(0,0,0,0.3);
    font-family: 'Montserrat', sans-serif;
    animation: formFadeIn 0.3s ease;
}

@keyframes formFadeIn {
    from { transform: translateY(15px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-conteudo-orcamento h2 {
    font-size: 1.4rem;
    margin-bottom: 18px;
    color: #1a1a1a;
    font-weight: 700;
    border-bottom: 2px solid #D4AF37;
    padding-bottom: 8px;
}

.close-orcamento {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: 0;
    color: #333;
    font-size: 32px;
    cursor: pointer;
    z-index: 11;
}

.form-linha {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-grupo label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
}

.form-grupo input, .form-grupo select {
    padding: 11px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s;
    width: 100%;
    background: #fff;
}

.form-grupo select {
    cursor: pointer;
}

.form-grupo input:focus, .form-grupo select:focus {
    border-color: #926607;
}

/* Proporções Horizontais dos Campos */
.flex-nome-empresa { flex: 2; }
.flex-whats { flex: 1; }

.flex-cep { flex: 1.2; }
.flex-cidade { flex: 3; }
.flex-uf { flex: 0.8; }

.flex-servico { flex: 1.5; min-width: 140px; }
.flex-aplicacao { flex: 1.5; min-width: 130px; }
.flex-impressoes { flex: 0.8; min-width: 80px; }
.flex-pecas { flex: 0.8; min-width: 80px; }
.flex-full { flex: 1; }

.btn-enviar-whats {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 1rem;
    padding: 12px 20px;
    letter-spacing: 0.5px;
}

/* Estilos dos Itens Adicionados na Lista Visual */
.item-adicionado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 3px solid #926607;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.btn-remover-item {
    background: transparent;
    border: none;
    color: #ff3b30;
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
    line-height: 1;
}

.btn-remover-item:hover {
    color: #d00;
}

/* Estilo para o campo de Informações Adicionais */
.form-grupo textarea {
    padding: 11px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s;
    width: 100%;
    background: #fff;
    resize: vertical; /* Permite redimensionar apenas na vertical */
}

.form-grupo textarea:focus {
    border-color: #926607;
}

/* Estilo para a Nota Informativa de Envio de Logomarca */
.nota-importante {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
    border-left: 3px solid #D4AF37;
    padding-left: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}

/* Botão de Adição pronto para clique (Verde) */
.btn-catalogo.btn-adicionar-pronto {
    background-color: #25d366 !important;
    color: #fff !important;
    border-color: #25d366 !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
    transform: scale(1.015);
    transition: all 0.25s ease;
}

@keyframes bounceSuccess {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
/* Celulares Pequenos - Ajuste de quebra de campos */
@media (max-width: 480px) {
    .form-linha {
        flex-direction: column;
        gap: 10px;
    }
    .form-grupo {
        flex: 1 1 auto !important;
    }
}