/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS, VARIÁVEIS E RESETS
   ========================================================================== */

:root {
    --primary: #002b7f;
    --secondary: #e30613;
    --success: #25D366;
    --light: #f5f5f5;
    --dark: #1d1d1d;
    --radius: 12px;
    --shadow: 0 5px 20px rgba(0,0,0,.08);
}

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

/* --- Fontes Customizadas --- */
@font-face {
    font-family: 'Exo';
    src: url('../font/Exo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Exo';
    src: url('../font/Exo-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

body {
    font-family: Exo, sans-serif;
    background: #f7f7f7;
    color: #222;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* --- Containers Estruturais --- */
.container, 
.container-hero {
    width: min(1280px, 95%);
    margin-inline: auto;
    position: relative;
}

.container {
    text-align: center;
    z-index: 10;
}

.container-hero {
    z-index: 2;
}


/* ==========================================================================
   2. HEADER / HERO TOP (ÁREA DE DESTAQUE SUPERIOR)
   ========================================================================== */

.hero {
    position: relative;
    min-height: 520px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: url('../img/bg-cataratas.png') no-repeat center/cover;
    clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
    z-index: 1;
}

.hero-top {
    display: flex;
    flex-direction: column; /* Mobile first */
    align-items: center;
    gap: 15px;
    padding-top: 15px;
}

.logo-image {  
    width: 100%;
    max-width: 400px;
    margin-bottom: 15px;
}

.logo-image img {
    width: 100%;
    height: auto;
    max-height: 130px;
}

/* --- Ajuste do Grid para manter lado a lado de forma flexível --- */
.hero-grid {
    display: flex; /* Mudado de grid para flex para melhor controle de encolhimento */
    align-items: center; /* Mantém o texto centralizado verticalmente com a imagem */
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    width: 100%;
}

/* --- Bloco de Texto do Hero --- */
.hero-text {
    flex: 1.2; /* Ocupa um pouco mais de espaço que a imagem */
    padding-bottom: 0; /* Removido padding antigo que tirava o alinhamento */
    text-align: left;
}

.title-hero {
    color: #fff;
    font-size: 32px; /* Reduzido para mobile */
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.title-hero span {
    color: #ff0000;
}

.hero-text p {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
}


/* --- Bloco da Imagem do Hero --- */
.hero-image {
    flex: 1; /* Permite que o container encolha proporcionalmente */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* --- A Imagem em si --- */
.hero-image img {
    width: 100%; /* Força a imagem a respeitar o tamanho do flex pai */
    max-width: 420px; /* Diminuído ligeiramente o tamanho máximo original */
    height: auto;
    margin-right: 100px; /* Zerado margens antigas que desalinhavam */
    margin-bottom: 0;
}

/* --- Redes Sociais do Topo --- */
.top-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding-top: 15px;
}

.top-social a {
    text-decoration: none;
    padding: 0 20px;
    min-width: 130px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: .3s;
}

.top-social a:hover {
    transform: translateY(-2px);
}

.facebook { background: #0a2d7a; }
.google { background: #fff; color: #222 !important; }
.whatsapp { background: #13a538; }

/* --- Divisores de Seção Visual --- */
.hero-divider2 {
    position: absolute; 
    left: 0;
    right: 0;
    top: 475px;
    height: 400px;
    background: #f7f7f7;
    border-top: 10px solid red;
    transform: skewY(-1.7deg);
    transform-origin: left top;
    z-index: 2;       
}

.hero-divider {
    width: 100%;
    line-height: 0;
    bottom: -20px;
}

.hero-divider img {
    display: block;
    width: 100%;
    height: auto;      
}


/* ==========================================================================
   3. SISTEMA DE ÍCONES GERAIS (CLASSES REUTILIZÁVEIS)
   ========================================================================== */

.icon-social, .icon-reviews, .icon-lista, .icon-map, 
.icon-info, .icon-footer, .icon-footer-whatsapp, .icon-utilidades {
    display: inline-block; 
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
}

.icon-social { margin-right: 10px; width: 25px; height: 25px; }
.icon-reviews { margin-right: 25px; width: 35px; height: 35px; }
.icon-lista { margin-right: 5px; width: 20px; height: 20px; }
.icon-map { width: 40px; height: 40px; }
.icon-info { width: 90px; height: 90px; }
.icon-footer { width: 45px; height: 45px; }
.icon-footer-whatsapp { margin-right: 10px; width: 18px; height: 18px; }
.icon-utilidades { margin-right: 10px; width: 58px; height: 58px; }

/* --- Mapeamento dos SVGs de Fundo --- */
.fa-whatsapp { background-image: url('../img/whatsapp-line.svg'); }
.fa-facebook { background-image: url('../img/facebook-line.svg'); }
.fa-facebook-footer { background-image: url('../img/facebook-footer-line.svg'); }
.fa-google { background-image: url('../img/google-line.svg'); }
.fa-google-footer { background-image: url('../img/google-footer-line.svg'); }
.fa-point-map { background-image: url('../img/point-map-line.svg'); }
.fa-whatsapp-blue { background-image: url('../img/whatsapp-line-blue.svg'); }
.fa-whatsapp-green { background-image: url('../img/whatsapp-line-green.svg'); }
.fa-truck-blue { background-image: url('../img/truck-line-blue.svg'); }
.fa-cash-line { background-image: url('../img/cash-line.svg'); }
.fa-pix-line { background-image: url('../img/pix-line.svg'); }
.fa-telefone-line { background-image: url('../img/telefone-line.svg'); }
.fa-tambor-line { background-image: url('../img/tambor-line.svg'); }
.fa-oil-line { background-image: url('../img/oil-line.svg'); }
.fa-recycle-line-blue { background-image: url('../img/recycle-line-blue.svg'); }
.fa-lixeiro-line { background-image: url('../img/lixeiro-line.svg'); }
.fa-carro-line { background-image: url('../img/carro-line.svg'); }
.fa-milho-line { background-image: url('../img/milho-line.svg'); }
.fa-planta-line { background-image: url('../img/planta-line.svg'); }
.fa-produto-limpeza-line { background-image: url('../img/produto-limpeza-dual-line.svg'); }
.fa-litro-oleo-line { background-image: url('../img/litro-oleo.svg'); }
.fa-engrenagem-line { background-image: url('../img/engrenagem-line.svg'); }
.fa-deck-flutuante-line { background-image: url('../img/deck-flutuante-line.svg'); }
.fa-chuva-line { background-image: url('../img/gotas-chuva.svg'); }
.fa-boia-line { background-image: url('../img/boia-line.svg'); }
.fa-trapiche-line { background-image: url('../img/trapiche-line.svg'); }
.fa-concho-line { background-image: url('../img/concho-line.svg'); }


/* ==========================================================================
   4. SEÇÃO DE PRODUTOS (CARDS, SLIDERS E LISTAS)
   ========================================================================== */

.slider-container-produtos {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.cards-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    flex: 1;
}

.produto-card {
    background: white;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    padding-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    transition: .3s;
}

.produto-card:hover {
    transform: translateY(-5px);
}

.produto-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    padding: 20px;
}

.produto-card img {
    display: block;
    margin: 10px auto;
    border-radius: 5px;
    
    /* Força o tamanho exato idêntico para todas */
    width: 100%;
    max-width: 260px; /* Define uma largura máxima padrão segura */
    height: 300px;    /* Trava a altura fixa (substituindo o max-height antigo) */
    
    /* Mágica para não distorcer a imagem */
    object-fit: cover; 
    object-position: center; /* Mantém o foco da imagem no centro ao cortar */
}

/* --- Filtros de Categoria --- */
.categoria-lista {
    display: flex;               
    flex-wrap: wrap;
    justify-content: center;      
    gap: 10px;                    
    align-items: center; 
    margin-bottom: 20px;
}

.categoria-lista button {
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background-color: #001753;
    font-weight: 800;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
}

.categoria-lista button.active,
.categoria-lista button:hover {
    background-color: #cf030e;
}

/* --- Lista Auxiliar de Produtos --- */
.lista-produtos {
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 25px 20px; /* Reduzido o padding lateral para telas menores */
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.lista-produtos h2 {
    color: #072c7d;
}

.produtos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1 coluna por padrão no celular */
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.produtos-item {
    background: #fff;
    text-align: left;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    font-weight: 600;
}

.produtos-observacao {
    text-align: left;
    font-size: 13px;
    color: #ff0000;
    padding: 10px 10px 0;
    font-weight: 700;
}


/* ==========================================================================
   5. SEÇÃO PRODUTO SHOWCASE (SLIDER DE DESTAQUE ÚNICO)
   ========================================================================== */

.produto-showcase {
    padding: 40px 0;
    background: #f8f8f8;
}

.produto-showcase h2 {
    text-align: center;
    margin-bottom: 35px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f2557;
}

.produto-showcase h2 span {
    display: block;
    color: #e30613;
}

.produto-showcase h2 span mark {
    background-color: #f7f7f7;
    color: #072c7d;
}

.slider-container-showcase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1150px;
    margin: 40px auto 0 auto;
}

.showcase-slider {
    position: relative;
    width: 100%;
    max-width: 1000px;
    flex: 1;
    margin: 0 auto;
}

.slide {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    display: none;
}


.slide.ativo{

    display:block;

    animation:fadeSlide .6s;

}

@keyframes fadeSlide{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}
.slide img {
    width: 100%;
    max-height: 550px;
    display: block;
    border: solid 6px #e3e3e3;
    border-radius: 20px;
    
}

.slide-overlay {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 30px 20px; /* Otimizado para telas pequenas */
    background: linear-gradient(
        to top,
        rgba(0,0,0,.90) 5%,
        rgba(0,0,0,.65) 50%,
        rgba(0,0,0,0) 100%
    );
    

}

.slide-overlay p {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}


/* ==========================================================================
   6. BOTÕES DO SISTEMA (SETAS DE SLIDER E BOTÕES DE CONTATO)
   ========================================================================== */

/* --- Setas de Sliders --- */
.slider-prev, .slider-next{
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #082372;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    flex-shrink: 0;
}
/* Oculta sem perder o espaço */
.slider-hidden{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}
.slider-next:hover, .slider-prev:hover {
    background: #173a84;
}

/* --- Botões de Links e Ações --- */
.btn-telefone-ligar {
    display: inline-block; 
    white-space: nowrap;
    cursor: pointer;
    color: white;
    text-decoration: none;
    text-align: left; 
    padding: 14px 0px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 20px;
    transition: .3s;
}

.btn-whatsapp-beneficios, 
.btn-whatsapp-produtos, 
.btn-whatsapp-footer {
    display: inline-block; 
    text-decoration: none;
    background: #25D366;
    color: white;
    border-radius: 8px;
    font-weight: 700;
    transition: .3s;
}

.btn-whatsapp-beneficios {
    white-space: nowrap;
    text-align: center;
    padding: 14px 40px; /* Otimizado de 80px para não estourar no mobile */
    width: min(100%, 380px);
}

.btn-whatsapp-produtos {
    text-align: center;    
    font-size: 13px;
    width: 260px;
    padding: 12px 22px;
    margin: auto;
}

.btn-whatsapp-footer {
    text-align: center;    
    font-size: 12px;
    width: 230px;
    padding: 7px 10px;
    margin: auto;
    font-weight: 600;
}

/* --- Hovers de Botões --- */
.btn-whatsapp-footer:hover, 
.btn-whatsapp-produtos:hover, 
.btn-whatsapp-beneficios:hover {
    transform: translateY(-2px); 
    background-color: red;
}
 
.btn-telefone-ligar:hover {
    transform: translateY(-2px); 
    color: red;
    text-decoration: underline;
}


/* ==========================================================================
   7. SEÇÃO DE UTILIDADES (GRID MULTICOLUNAS DINÂMICO)
   ========================================================================== */

section.utilidades {
    padding: 40px 0;
}

.utilidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.utilidade-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
}

.utilidade-card h2 {
    font-size: 23px;
}

.utilidades h2 span mark {
    background-color: transparent;
    color: #ff0000;   
}

/* --- Card de Destaque Flexível --- */
.utilidade-card.destaque {
    text-align: left;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%; /* Fluido para Mobile */
    background: #082372;
    color: #fff;
}

.utilidade-card.destaque i {
    color: #fff;
}


/* ==========================================================================
   8. SEÇÃO DE ESTOQUE DE PRODUTOS
   ========================================================================== */
.slider-container-estoque{
    display:flex;
    align-items:center;
    gap:20px;
}

.estoque-slider{
    overflow:hidden;
    flex:1;
}

.slides-estoque{
    display:flex;
    gap:25px;
    transition:.4s ease;
}

.slide-estoque{
    flex:0 0 calc((100% - 50px) / 3);
}

.slide-estoque img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:15px;
    display:block;
}




/*.estoque {
    padding: 40px 0;
    background: #f8f8f8;
}

.estoque .container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 15px;
}

.slider-container-estoque {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1320px; 
    margin: 40px auto 0 auto;
}

.estoque-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    flex: 1;
}

.slides-estoque {
    display: flex;
    flex-direction: column; 
    gap: 15px;
}

.slide-estoque {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}

.slide-estoque img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
*/
/* --- Títulos Padronizados de Seções --- */
.titulo-section {
    text-align: center;
    margin-bottom: 35px;
}

.titulo-section h2 {
    color: #072c7d;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 5px;
}

.titulo-section p {
    color: #e31e24;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.linha-titulo {
    margin-top: 12px;
}

.linha-titulo span {
    display: inline-block;
    width: 70px;
    height: 4px;
    /* Cinza com metade do tamanho do Vermelho e do Azul */
    background: linear-gradient(to left, 
        #e31e24 0%, 
        #e31e24 40%, 
        #cccccc 40%, 
        #cccccc 60%, 
        #072c7d 60%, 
        #072c7d 100%
    );
    border-radius: 20px;
}


/* ==========================================================================
   9. BLOCO DE BENEFÍCIOS (EMBAIXO DO ESTOQUE)
   ========================================================================== */

.beneficios {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first */
    justify-content: center;
    gap: 20px;
    margin-top: 50px; 
}

.container-btn-beneficios {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.beneficio {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

.beneficio .icone {
    font-size: 42px;
    color: #072c7d;
    display: flex;
    align-items: center;
}

.beneficio h3 {
    color: #072c7d;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
    text-align: left;
}

.beneficio p {
    color: #444;
    line-height: 1.4;
    text-align: left;
    font-size: 14px;
}


/* ==========================================================================
   10. SEÇÃO DE REVIEWS (AVALIAÇÕES DO GOOGLE)
   ========================================================================== */

.avaliacoes {
    padding-bottom: 50px;
}

.review-section {
    border-bottom: 8px solid #e30613;
}

.titulo-avaliacoes {
    text-align: center;
    color: #0a2c84;
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.reviews {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first */
    gap: 25px;
    margin-top: 30px;
}

.review-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.review-top img {
    width: 34px;
}

.stars {
    color: #ffb400;
    font-size: 22px;
    font-weight: 700;
}

.stars span {
    color: #0a2c84;
    font-size: 18px;
    margin-left: 8px;
}

.review-text {
    color: #1f2a44;
    line-height: 1.5;
    margin-bottom: 25px;
    font-size: 1rem;
    font-weight: bold;
    font-family: 'Helvetica', sans-serif;
}

.review-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffb400;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Anti-esmagamento do nome */
}

.review-user strong {
    display: block;
    color: #0a2c84;
}

.review-user span {
    color: #777;
    font-size: .9rem;
}


/* ==========================================================================
   11. FOOTER (RODAPÉ DA PÁGINA)
   ========================================================================== */

footer {
    padding-top: 40px;
    border-top: 10px solid red;
    background: #012a78;
    color: white;
}

footer h3 {
    font-family: "Helvetica", sans-serif;
    font-weight: 600;
    text-align: left;
    margin-bottom: 15px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first */
    gap: 40px;
}

.area-footer1, .area-footer2, .area-footer3 {
    text-align: left;
    width: 100%;
}

.socials, .aceitamos {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
} 

.socials a {
    transition: .3s;
    padding: 10px 0;
}

.socials a:hover {
    transform: translateY(-2px);
}

.mapa iframe {
    border-radius: 10px;
    border: 0;
    width: 100%;
}

.copyright {
    padding: 25px 0;
    font-family: "Helvetica", sans-serif;
    font-size: 15px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 30px;
}


/* ==========================================================================
   13. MODAL IAMGENS
   ========================================================================== */
.modal-imagem{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.modal-imagem.ativo{

    opacity:1;
    visibility:visible;

}

.modal-imagem img{

    max-width:90%;
    max-height:85vh;

    border-radius:16px;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    animation:zoom .25s;

}
.cards-produtos.um-card{
    grid-template-columns: minmax(280px, 380px);
    justify-content:center;
}

.cards-produtos.dois-cards{
    grid-template-columns:repeat(2,minmax(250px,380px));
    justify-content:center;
}

.cards-produtos.tres-cards{
    grid-template-columns:repeat(3,minmax(250px,1fr));
}
.fechar-modal{

    position:absolute;

    top:25px;
    right:35px;

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    background:#fff;
    color:#082372;

    font-size:28px;
    font-weight:bold;

    transition:.25s;

}

.fechar-modal:hover{

    background:#082372;
    color:#fff;

}

@keyframes zoom{

    from{

        transform:scale(.9);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}
/* ==========================================================================
   12. MEDIA QUERIES (SISTEMA DE CASCATA GRADUAL)
   ========================================================================== */

/* --------------------------------------------------------------------------
   📱 APENAS CELULAR (Até 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .logo-image { max-width: 300px; margin-bottom: 0px; }
    .title-hero { font-size: 25px; }
    .hero-text p { font-size: 12px; justify-content: center; }
    .hero-image img { margin-right: 0 !important; margin: 0 auto; max-width: 220px; }
    .top-social a { font-size: 10px; padding: 0 5px; min-width: 90px; height: 35px; gap: 6px; }
    .hero-top { gap: 10px; }
    .icon-social { margin-right: 0px; width: 16px; height: 16px; }

        .icon-info {  width: 65px; height: 65px;}
    .icon-map { width: 25px; height: 25px; }
    .icon-utilidades {
            margin-right: 5px;
    width: 30px;
    height: 30px;
    }
        .utilidade-card h2 {
    font-size: 20px;
}        .utilidade-card p {
    font-size: 13px;
}
.categoria-lista button {
    padding: 7px 12px;
    font-size: 12px;
}
.produtos-grid {
        grid-template-columns: repeat(2, 1fr); /* Trava em 3 colunas perfeitas no PC */
    }
.slide-overlay p {
    font-size: 1rem;
    line-height: 1.1;
}.slide-overlay {
    padding: 20px 10px;
}
    .footer-grid {text-align: center;
    }
    .slide-estoque{
        flex:0 0 100%;
    }
.produto-card {

    padding-bottom: 10px;

}
.produto-card h3{
        font-size: 1rem;
    font-weight: 700;
    padding: 10px;
}
.produto-card img {
    max-width: 230px;
    height: 290px;
}
.btn-whatsapp-produtos {
    font-size: 11px;
    width: 200px;
    padding: 10px 15px;
}
    /* Setas pequenas exclusivas para celular */
    .slider-prev, .slider-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    .hero {
    position: relative;
    min-height: 395px;
}
    .hero-divider2{
    top: 360px;
}    .produtos-observacao {
    text-align: center;
}
    .utilidades-grid > .utilidade-card:nth-child(5n+3) + .destaque { grid-column: span 2; }
    .utilidades-grid > .utilidade-card:nth-child(5n+2) + .destaque { grid-column: span 3; }
    .utilidades-grid > .utilidade-card:nth-child(5n+1) + .destaque { grid-column: span 4; }
    .utilidades-grid > .utilidade-card:nth-child(5n+4) + .destaque { grid-column: span 5; }
}

/* --------------------------------------------------------------------------
   📟 TABLET EM DIANTE (A partir de 768px - Aplica no tablet E no PC)
   Tudo o que for igual no tablet e no PC você bota aqui UMA VEZ SÓ.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .hero-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .hero-image img {
        margin-right: 0; 
        max-width: 380px;
    }

    .hero-text p {
        text-align: left;
        font-size: 16px;
    }

    .title-hero {
        font-size: 42px; /* O PC vai mudar para 52px logo abaixo */
    }    .slide-estoque{
        flex:0 0 calc((100% - 25px) / 2);
    }


.top-social a { font-size: 10px; padding: 0 5px; min-width: 110px; height: 40px; gap: 7px;  }

    .icon-social { margin-right: 4px; width: 18px; height: 18px; }
    .icon-info {  width: 80px; height: 80px;}
    .slides-estoque {
        flex-direction: row; /* Já fica lado a lado no tablet e continua no PC */
    }

    .beneficios {
        grid-template-columns: 1fr 1fr; /* 2 colunas no tablet e continua no PC */
    }

    .reviews {
        grid-template-columns: repeat(3, 1fr); /* 2 colunas no tablet, PC muda para 3 */
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr; /* 2 colunas no tablet, PC muda para 3 */
    }

.produtos-grid {
        grid-template-columns: repeat(2, 1fr); /* Trava em 2 colunas perfeitas no PC */
    }
    /* Reduzindo as setas para tamanho médio padrão de telas maiores */
    .slider-prev, .slider-next {
        width: 40px;  
        height: 40px; 
        border: none;
        border-radius: 50%;
        background: #082372;
        color: #fff;
        cursor: pointer;
        font-size: 14px; 
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
        flex-shrink: 0;
    }

        .utilidades-grid > .utilidade-card:nth-child(5n+3) + .destaque { grid-column: span 2; }
    .utilidades-grid > .utilidade-card:nth-child(5n+2) + .destaque { grid-column: span 3; }
    .utilidades-grid > .utilidade-card:nth-child(5n+1) + .destaque { grid-column: span 4; }
    .utilidades-grid > .utilidade-card:nth-child(5n+4) + .destaque { grid-column: span 5; }
}

/* --------------------------------------------------------------------------
   🖥️ EXCLUSIVO DESKTOP (A partir de 1024px)
   Aqui você SÓ altera o que muda em relação ao tablet (fontes maiores, mais colunas).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .title-hero {
        font-size: 52px; /* Aumenta o título que era 42px */
    }
    .hero-image img {
        margin-right: 100px;
    }
    .cards-produtos {
        grid-template-columns: repeat(3, minmax(250px, 1fr)); 
    }
    .top-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding-top: 15px;
}
.slide-estoque{
    flex:0 0 calc((100% - 50px) / 3);
}
.top-social a {
    text-decoration: none;
    padding: 0 20px;
    min-width: 130px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: .3s;
}

    .slide-overlay p {
        font-size: 1.3rem;
    }

    .reviews {
        grid-template-columns: repeat(3, 1fr); /* Expande de 2 para 3 colunas */
    }
.slide-overlay p {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;}
.slide-overlay {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .90) 5%, rgba(0, 0, 0, .65) 50%, rgba(0, 0, 0, 0) 100%);
}


    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr; /* Expande de 2 para 3 colunas */
    }

    .area-footer1 { border-right: 2px solid rgba(255,255,255,.1); }
    .area-footer3 { padding-left: 40px; border-left: 2px solid rgba(255,255,255,.1); }

    /* Organização do Grid de Utilidades */
    .utilidades-grid {
        grid-template-columns: repeat(5, minmax(180px, 1fr)); 
    }
.produtos-grid {
        grid-template-columns: repeat(3, 1fr); /* Trava em 3 colunas perfeitas no PC */
    }
    .produtos-observacao {
    text-align: left;
}
    .utilidades-grid > .utilidade-card:nth-child(5n+3) + .destaque { grid-column: span 2; }
    .utilidades-grid > .utilidade-card:nth-child(5n+2) + .destaque { grid-column: span 3; }
    .utilidades-grid > .utilidade-card:nth-child(5n+1) + .destaque { grid-column: span 4; }
    .utilidades-grid > .utilidade-card:nth-child(5n+4) + .destaque { grid-column: span 5; }
}