/* Variáveis para cores e tamanhos */
:root {
    --primary-color: #1071e0; /* Um rosa vibrante */
    --secondary-color: #caf7ff; /* Um laranja suave */
    --dark-text: #333;
    --light-text: #fff;
    --background-light: #f4f4f4;
    --background-dark: #2c3e50; /* Azul escuro para contraste */
    --border-radius-card: 10px;
    --border-radius-btn: 30px;

    /* NOVAS VARIÁVEIS PARA CONTROLE DE ESPAÇAMENTO E TAMANHO */
    --section-padding-mobile: 20px; /* Reduzido de 30px */
    --section-margin-mobile: 15px;  /* Reduzido de 20px */
    --font-size-base: 0.95em;       /* Levemente menor que 1em padrão */
    --h2-font-size-mobile: 1.6em;   /* Reduzido de 1.8em */
    --h1-font-size-header: 2em;     /* Reduzido de 2.2em */
    --p-font-size-header: 1em;      /* Reduzido de 1.1em */
    --btn-padding: 10px 20px;       /* Reduzido de 12px 25px */
    --catalog-banner-height-mobile: 300px; /* Reduzido de 350px */
    --icon-size-mobile: 60px;       /* Reduzido de 80px */
}

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

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5; /* Levemente menor que 1.6 para mais compactação */
    color: var(--dark-text);
    background-color: var(--background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-base); /* Aplica o tamanho base da fonte */
}

.container {
    max-width: 90%;
    margin: 0 auto;
    padding: 15px 0; /* Reduzido de 20px 0 */
}

/* Cabeçalho */
.header {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 30px 15px; /* Reduzido de 40px 20px */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header h1 {
    font-size: var(--h1-font-size-header); /* Usa a variável */
    margin-bottom: 5px;
}

.header p {
    font-size: var(--p-font-size-header); /* Usa a variável */
    opacity: 0.9;
}

/* Seções gerais */
section {
    background-color: var(--light-text);
    margin: var(--section-margin-mobile) auto; /* Usa a variável de margem */
    padding: var(--section-padding-mobile) 20px; /* Usa a variável de padding */
    border-radius: var(--border-radius-card);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    text-align: center;
}

section h2 {
    font-size: var(--h2-font-size-mobile); /* Usa a variável */
    color: var(--primary-color);
    margin-bottom: 10px; /* Reduzido de 15px */
}

section p {
    font-size: 0.95em; /* Levemente menor */
    margin-bottom: 15px; /* Reduzido de 20px */
    line-height: 1.4; /* Levemente menor */
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding); /* Usa a variável */
    border: none;
    border-radius: var(--border-radius-btn);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 0.9em; /* Reduzido de 0.95em */
    gap: 6px; /* Reduzido de 8px */
}

.primary-btn {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.primary-btn:hover {
    background-color: #e65c82;
    transform: translateY(-2px);
}

.secondary-btn {
    background-color: var(--secondary-color);
    color: var(--light-text);
}

.secondary-btn:hover {
    background-color: #e68664;
    transform: translateY(-2px);
}

.btn-icon {
    width: 18px; /* Reduzido de 20px */
    height: 18px; /* Reduzido de 20px */
    filter: invert(1);
}

/* Estilos para a Seção de Catálogo (Banner) */
.catalog-banner-section {
    background-image: url('img/catalogo.png'); /* Cuidado: Certifique-se de que a imagem esteja em 'sua_pasta_do_projeto/img/catalogo.png' */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: var(--catalog-banner-height-mobile); /* Usa a variável de altura */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--light-text);
    text-align: left;
    padding-left: 5%;
    position: relative;
    overflow: hidden;
    margin: var(--section-margin-mobile) auto; /* Usa a variável de margem */
}

.catalog-banner-section .container {
    padding: 0;
    margin: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}

.catalog-banner-section h2 {
    font-size: 1.6em; /* Ajuste o tamanho da fonte */
    color: #940000; /* Cor específica que você usou, mantida */
    margin-bottom: 10px; /* Reduzido de 15px */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.795); /* Sombra mais suave */
    line-height: 1.1; /* Linha de altura mais compacta */
    font-weight: 400; /* Mantido o peso da fonte que você definiu */
}

.catalog-banner-section h2 span {
    font-size: 1.4em; /* Levemente menor */
    font-weight: 700;
    display: block;
}

.catalog-banner-section .catalog-btn {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 12px 25px; /* Reduzido de 15px 30px */
    border-radius: var(--border-radius-btn);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra mais suave */
    font-size: 1em; /* Reduzido de 1.1em */
}

.catalog-banner-section .catalog-btn:hover {
    background-color: #e65c82;
    transform: translateY(-1px); /* Menor movimento */
}


/* Seção WhatsApp e Localização */
.whatsapp-icon,
.location-icon {
    width: var(--icon-size-mobile); /* Usa a variável */
    height: var(--icon-size-mobile); /* Usa a variável */
    margin-bottom: 10px; /* Reduzido de 15px */
}

.whatsapp-btn,
.location-btn {
    width: 100%;
    max-width: 280px; /* Levemente menor */
}

/* Localização */
.location-section address {
    font-style: normal;
    margin-bottom: 15px; /* Reduzido de 20px */
    color: #555;
}

/* Rodapé */
.footer {
    background-color: var(--background-dark);
    color: rgba(255,255,255,0.8);
    padding: 15px; /* Reduzido de 20px */
    text-align: center;
    font-size: 0.85em; /* Reduzido de 0.9em */
    margin-top: 20px; /* Reduzido de 30px */
}

/* Media Queries para responsividade */
@media (min-width: 768px) {
    .container {
        max-width: 700px; /* Levemente menor para tablets */
    }

    /* Ajustes para seções em telas maiores */
    section {
        margin: 20px auto;
        padding: 25px 30px; /* Reduzido de 30px 20px */
    }

    section h2 {
        font-size: 2em; /* Mantém um bom tamanho */
    }

    section p {
        font-size: 1em;
    }

    .btn {
        padding: 12px 25px; /* Volta ao tamanho original ou um pouco menor */
        font-size: 0.95em;
    }

    .whatsapp-btn,
    .location-btn {
        width: auto;
    }

    .catalog-banner-section {
        height: 400px; /* Reduzido de 450px para desktop */
        padding-left: 8%; /* Ajuste o padding */
    }

    .catalog-banner-section h2 {
        font-size: 2.2em; /* Ajusta o tamanho da fonte em desktop */
    }

    .catalog-banner-section h2 span {
        font-size: 1.6em; /* Ajusta o tamanho de "CATÁLOGO" em desktop */
    }

    .whatsapp-icon,
    .location-icon {
        width: 70px; /* Ajusta o tamanho do ícone */
        height: 70px;
    }

    .footer {
        padding: 20px;
        font-size: 0.9em;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 900px; /* Levemente menor para desktops */
    }

    .catalog-banner-section {
        height: 400px; /* Mantém a mesma altura ou ajusta */
    }
}
/* Estilos para a página do Slider */
.slider-page-main {
    background-color: #2b5e57; /* Fundo da página do slider */
    padding-top: 20px;
    padding-bottom: 50px;
}

.back-btn {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 8px 15px; /* Botão de voltar menor */
    font-size: 0.85em;
}

.slider-section {
    background-color: #bdbbbb42;
    margin: 20px auto;
    padding: 20px; /* Padding ajustado para o slider */
    border-radius: var(--border-radius-card);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    text-align: center;
    max-width: 600px; /* Limita a largura do slider em telas maiores */
    position: relative; /* Para posicionamento absoluto se necessário no futuro */
}

.slider-container {
    width: 100%; /* Ocupa a largura total do container pai */
    max-width: 550px; /* Largura máxima para as imagens do slider */
    margin: auto;
    overflow: hidden; /* Esconde partes das imagens que excedem */
    position: relative;
}

/* Esconder as imagens por padrão */
.mySlides {
    display: none;
    width: 100%;
    text-align: center; /* Centraliza texto/imagens dentro do slide */
}

.mySlides img {
    width: 100%; /* Garante que a imagem ocupe a largura total do slide */
    height: auto;
    max-height: 400px; /* Limita a altura máxima da imagem */
    object-fit: contain; /* Garante que a imagem caiba sem cortar, mantendo proporção */
    border-radius: 8px; /* Cantos arredondados para as imagens */
}

.slide-text {
    color: var(--dark-text);
    font-size: 1.1em;
    padding: 10px 0;
    margin-top: 10px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0); /* Fundo semi-transparente para o texto */
    border-radius: 5px;
}

/* Dots de navegação */
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: #0f0f0f;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: var(--primary-color); /* Cor dos dots ativos/hover */
}

/* Animação fade */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* Media Queries para telas maiores (desktop) */
@media (min-width: 768px) {
    .slider-section {
        padding: 30px;
        max-width: 700px; /* Aumenta a largura máxima do slider */
    }

    .slider-container {
        max-width: 650px;
    }

    .mySlides img {
        max-height: 500px; /* Aumenta a altura máxima da imagem em desktop */
    }

    .slide-text {
        font-size: 1.3em;
    }
}