:root {
    --cor-primaria: #FFBA00;
    --cor-mar: #0044FF;
    --cor-fundo: #FFBA00;
    --cor-rodape: #1A1A1A;
    --cor-texto: #000000;
    --cor-branco: #FFFFFF;
    --margem-desktop: 100px;
    --gap-padrao: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100%;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.20'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.8) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.8) 100%);
}

.main-content {
    flex: 1; 
    position: relative;
    z-index: 1;
    overflow-x: hidden; 
}

a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; color: inherit; }

.container {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 var(--margem-desktop);
    position: relative;
    z-index: 1;
}

@media (min-width: 1921px) { .container { max-width: 2100px; } }
@media (min-width: 2561px) { .container { max-width: 2500px; } }

.header {
    background-color: var(--cor-branco);
    position: relative;
    z-index: 100;
    height: 100px;
    display: flex;
    align-items: center;
}

.header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo img { height: 45px; }
.menu { display: flex; gap: 40px; font-weight: 500; align-items: center; }
.menu a:hover, .icone-btn:hover { color: var(--cor-primaria); }
.header-right { display: flex; gap: 30px; align-items: center; font-weight: 700; }
.icone-btn { display: flex; align-items: center; justify-content: center; transition: color 0.3s; }
.menu-mobile-btn { display: none; }
.mobile-menu { display: none; }

.top-bar.mar-azul {
    background-color: var(--cor-mar); color: #fff; text-align: center; padding: 12px 0;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; overflow: hidden;
    display: flex; justify-content: center; align-items: center; position: relative; width: 100%; z-index: 99;
}
.top-bar-mensagens { position: relative; height: 20px; width: 100%; display: flex; justify-content: center; align-items: center; }
.top-bar .msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; line-height: 1; }
.top-bar .msg.active { opacity: 1; }

.search-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 186, 0, 0.95); backdrop-filter: blur(10px); z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.search-modal.active { opacity: 1; pointer-events: all; }
.search-content { width: 100%; max-width: 800px; padding: 40px; text-align: center; position: relative; }
.fechar-busca { position: absolute; top: -40px; right: 20px; font-size: 2rem; font-weight: 300; }
.search-content h2 { font-size: 2rem; margin-bottom: 30px; font-weight: 900; }
.search-content form { display: flex; gap: 10px; }
.search-content input { flex: 1; padding: 20px; font-size: 1.2rem; border: 2px solid #000; border-radius: 8px; outline: none; }
.search-content button[type="submit"] { background-color: var(--cor-mar); color: #FFF; padding: 0 40px; font-size: 1.2rem; font-weight: 700; border-radius: 8px; }

.hero.full-width { width: 100%; position: relative; margin-top: 0; margin-bottom: 100px; }
.slider-container { position: relative; width: 100%; aspect-ratio: 1920 / 648; height: auto; overflow: hidden; z-index: 1; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: none !important; display: block; }
.slide.active { opacity: 1; z-index: 1; }
.slide picture img { width: 100%; height: 100%; object-fit: cover; }

.water-wipe { position: absolute; top: 0; left: 0; width: 100%; height: 80px; display: flex; flex-direction: column; pointer-events: none; }
.foam-wipe { z-index: 10; }
.main-wipe { z-index: 11; }
.water-body {
    width: 100%;
    
    flex: 1; 
}
.main-body { background-color: var(--cor-mar); }
.foam-body { background-color: rgba(255, 255, 255, 0.85); }
.water-wave-wipe { width: 250%; margin-left: -75%; height: 80px; flex-shrink: 0; transform: scaleY(-1); background: transparent; margin-top: -1px; display: block; }

@keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(86px,0,0); } }
.agua-anim > use { animation: move-forever 10s cubic-bezier(.55,.5,.45,.5) infinite; }
.agua-anim > use:nth-child(1) { animation-delay: -1s; animation-duration: 5s; }
.agua-anim > use:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
.agua-anim > use:nth-child(3) { animation-delay: -3s; animation-duration: 10s; }
.agua-anim > use:nth-child(4) { animation-delay: -4s; animation-duration: 14s; }

.espuma-anim > use { animation: move-forever 12s cubic-bezier(.55,.5,.45,.5) infinite; }
.espuma-anim > use:nth-child(1) { animation-delay: -0.5s; animation-duration: 6s; }
.espuma-anim > use:nth-child(2) { animation-delay: -1.5s; animation-duration: 8s; }
.espuma-anim > use:nth-child(3) { animation-delay: -2.5s; animation-duration: 12s; }
.espuma-anim > use:nth-child(4) { animation-delay: -3.5s; animation-duration: 16s; }

.categorias { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 0; 
    margin-top: 80px; 
    
    margin-bottom: 120px; 
}

.card-categoria { 
    position: relative; 
    aspect-ratio: 385 / 598; 
    overflow: hidden; 
    display: flex; 
    align-items: flex-end; 
    border-radius: 0; 
    
}

.card-categoria img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card-categoria::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 1; }
.card-categoria h3 { position: relative; z-index: 2; font-weight: 900; font-size: 1.8rem; color: var(--cor-branco); padding: 30px; }

.destaques { margin-bottom: var(--gap-padrao); }
.titulo-secao { font-weight: 900; font-size: 2.5rem; margin-bottom: 40px; }
.titulo-categorias-mobile { display: none; } 
.carousel-destaques { display: flex; gap: 30px; overflow-x: hidden; padding-bottom: 20px; }
.card-produto { flex: 0 0 calc((100% / 6) - 25px); scroll-snap-align: start; background-color: var(--cor-branco); padding: 15px; text-align: left; transition: box-shadow 0.3s ease; border-radius: 8px; }
.card-produto:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.card-produto img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 15px; }
.nome-produto { font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; }
.preco-produto { font-weight: 900; font-size: 1.2rem; }
.carousel-dots { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background-color: #000; opacity: 0.2; cursor: pointer; transition: all 0.3s ease; }
.dot.active { opacity: 1; background-color: #000; transform: scale(1.2); }

.blog-dicas-section { 
    background-color: transparent; 
    
    padding: 60px 0; 
    margin-top: 20px; 
    margin-bottom: 60px; 
    width: 100%; 
    position: relative; 
    z-index: 2; 
}
.blog-dicas-section .titulo-secao { text-align: center; }
.blog-3d-container { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 30px; }
.blog-3d-slider { position: relative; width: 100%; max-width: 1200px; height: 450px; display: flex; justify-content: center; align-items: center; perspective: 1000px; }

.blog-card { 
    position: absolute; 
    width: 300px; 
    height: 400px; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
    cursor: pointer; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}

.blog-card img { width: 100%; height: 100%; object-fit: cover; }

.blog-card::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
}

.blog-title {
    position: absolute; bottom: 20px; left: 20px; right: 20px; color: #fff;
    font-size: 1.5rem; font-weight: 900; z-index: 2; text-align: center;
}

.blog-card.active { transform: scale(1.1) translateX(0) translateZ(0); z-index: 5; opacity: 1; }
.blog-card.prev { transform: scale(0.9) translateX(-110%) translateZ(-100px); z-index: 4; opacity: 1; }
.blog-card.next { transform: scale(0.9) translateX(110%) translateZ(-100px); z-index: 4; opacity: 1; }
.blog-card.prev-2 { transform: scale(0.75) translateX(-250%) translateZ(-200px); z-index: 3; opacity: 1; }
.blog-card.next-2 { transform: scale(0.75) translateX(250%) translateZ(-200px); z-index: 3; opacity: 1; }

.seta-blog { background: transparent; border: none; cursor: pointer; z-index: 10; padding: 10px; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; }
.seta-blog svg { fill: #000000; width: 35px; height: auto; }
.seta-blog:hover { transform: scale(1.3); }

.manifesto-video { position: relative; width: 100%; min-height: 80vh; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; margin-top: 0; margin-bottom: var(--gap-padrao); }
.video-bg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 0; }
.video-mobile { display: none; }
.video-desktop { display: block; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%); z-index: 1; }
.manifesto-content { position: relative; z-index: 2; color: var(--cor-branco); max-width: 1200px; margin: 0; padding-left: 5%; text-align: left; padding-bottom: 40px; }
.manifesto-content h2 { font-size: 3.5rem; font-weight: 900; margin-bottom: 20px; color: var(--cor-primaria); white-space: nowrap; }
.manifesto-content p { font-size: 0.9rem; font-weight: 300; line-height: 1.8; margin-bottom: 20px; max-width: 700px;}
.btn-manifesto { display: inline-block; border: 2px solid var(--cor-primaria); color: var(--cor-primaria); padding: 12px 30px; font-weight: 700; border-radius: 4px; margin-top: 10px; transition: all 0.3s ease; }
.btn-manifesto:hover { background: var(--cor-primaria); color: #000; }

.instagram-collage { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 120px; margin-top: 80px; }
.insta-texto-lateral { flex: 0 0 28%; }
.insta-texto-lateral h2 { font-size: clamp(3rem, 4vw, 4.5rem); font-weight: 900; margin-bottom: 10px; color: #000; }
.insta-texto-lateral p { font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 600; margin-bottom: 30px; color: #000; }
.btn-seguir-insta { display: inline-block; background: transparent; border: 3px solid #000000; color: #000000; padding: 15px 30px; font-weight: 700; transition: all 0.3s; }
.btn-seguir-insta:hover { background: #000000; border-color: #000000; color: var(--cor-primaria); }

.insta-caixa-fixa { flex: 1; max-width: 850px; aspect-ratio: 1072 / 819; position: relative; }
.insta-foto { position: absolute; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: block; }
.insta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insta-icone { position: absolute; top: 10px; right: 10px; display: flex; justify-content: center; align-items: center; }

.img-187x332 { width: 17.4%; height: 40.6%; top: 6.8%; left: 12.4%; z-index: 1; }
.img-320x320 { width: 29.9%; height: 39.1%; top: 50.1%; left: 0; z-index: 1; }
.img-370x462 { width: 34.5%; height: 56.5%; top: 21.9%; left: 31.8%; z-index: 2; }
.img-305x160-inf { width: 28.5%; height: 19.5%; top: 80.7%; left: 34.4%; z-index: 1; }
.img-305x160-sup { width: 28.5%; height: 19.5%; top: 0; left: 49.1%; z-index: 1; }
.img-170x170 { width: 15.9%; height: 20.8%; top: 22.1%; left: 68%; z-index: 1; }
.img-345x345 { width: 32.2%; height: 42.1%; top: 46.2%; left: 67.9%; z-index: 1; }

.newsletter-section { 
    background-color: #111; 
    padding-top: 45px;
    padding-bottom: 100px;
    color: #fff;
    position: relative;
    overflow: visible; 
}

.news-content-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    position: relative;
}

.news-phone-mockup {
    width: 280px;
    height: auto;
    flex-shrink: 0;
    margin-top: -125px;
    position: relative;
    z-index: 2;
}

.news-content-row .news-flex-center {
    justify-content: flex-start;
}

.news-flex-center { 
    display: grid; 
    grid-template-columns: max-content; 
    justify-content: center; 
    row-gap: 30px;
}

.news-texto-center { 
    text-align: left; 
}

.news-texto-center h2 { 
    font-size: 2.2rem; 
    font-weight: 700; 
    margin-bottom: 10px; 
    color: var(--cor-primaria); 
    white-space: nowrap; 
    text-align: justify;
    text-align-last: justify;
}

.news-texto-center p { 
    font-weight: 300; 
    font-size: 1.1rem; 
    color: #ccc; 
    white-space: nowrap; 
}

.news-form-center { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.inputs-group { 
    display: flex; 
    gap: 15px; 
    width: 100%; 
}

.inputs-group input { 
    flex: 1; 
    padding: 15px 20px; 
    background: #222; 
    border: 1px solid #444; 
    color: #fff; 
    border-radius: 4px; 
    font-family: 'Outfit', sans-serif;
}

.inputs-group input:focus {
    border-color: var(--cor-primaria);
    outline: none;
}

.inputs-group button { 
    background: var(--cor-primaria); 
    color: #000; 
    padding: 0 40px; 
    font-weight: 900; 
    border-radius: 4px; 
    transition: transform 0.2s; 
    font-family: 'Outfit', sans-serif;
}

.inputs-group button:hover { 
    transform: scale(1.05); 
}

.lgpd-checkbox { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-top: 5px; 
}

.lgpd-checkbox input[type="checkbox"] { 
    appearance: none;
    -webkit-appearance: none;
    width: 18px; 
    height: 18px; 
    border: 2px solid var(--cor-primaria); 
    background-color: transparent; 
    border-radius: 3px; 
    cursor: pointer; 
    position: relative;
    flex-shrink: 0;
}

.lgpd-checkbox input[type="checkbox"]:checked {
    background-color: var(--cor-primaria);
}

.lgpd-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -3px;
    left: 2px;
    color: #000;
    font-size: 13px;
    font-weight: 900;
}

.lgpd-checkbox label { 
    font-size: 0.85rem; 
    color: #aaa; 
    font-weight: 300; 
    text-align: left; 
    line-height: 1.5; 
    cursor: pointer;
    white-space: nowrap; 
}

.lgpd-checkbox label a { 
    color: var(--cor-primaria); 
    text-decoration: underline; 
    font-weight: 500;
}

.news-form-center button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.inputs-group input.invalido {
    border-color: #ff3333 !important;
}

.rodape { background-color: var(--cor-rodape); color: var(--cor-branco); padding: 40px 0 20px 0; position: relative; z-index: 10; }
.grid-rodape { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-padrao); margin-bottom: 40px; }
.coluna-rodape h4 { font-weight: 700; margin-bottom: 15px; }
.link-simples { display: block; color: #cccccc; margin-bottom: 8px; font-weight: 300; font-size: 0.9rem; }
.link-simples:hover { color: var(--cor-primaria); }
.coluna-rodape .flex-icon { display: flex !important; align-items: center !important; gap: 10px; margin-bottom: 8px; color: #cccccc; font-weight: 300; font-size: 0.9rem; }
.coluna-rodape .flex-icon svg { flex-shrink: 0; display: block; }
.coluna-rodape .flex-icon span { display: block; line-height: 1; transform: translateY(1px); }
.coluna-rodape .flex-icon:hover { color: var(--cor-primaria); }
.rodape-bottom { text-align: center; border-top: 1px solid #333; padding-top: 20px; margin-top: 20px; }
.rodape-bottom p { font-size: 0.7rem; color: #888; font-weight: 300; display: block; max-width: 1000px; margin: 0 auto; padding: 0 80px; line-height: 1.6; }

.whatsapp-container { position: fixed; bottom: 30px; right: 30px; z-index: 99; display: flex; align-items: center; gap: 15px; }
.whatsapp-tooltip { background-color: #fff; color: #000; padding: 10px 15px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); opacity: 0; transform: translateX(20px); transition: all 0.5s ease; pointer-events: none; }
.whatsapp-tooltip.show { opacity: 1; transform: translateX(0); }
.whatsapp-float { background-color: #25D366; color: #FFF; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.3s ease; }
.whatsapp-float:hover { transform: scale(1.1); }

.pagina-catalogo {
    padding-top: 40px;
    padding-bottom: 100px;
    background-color: var(--cor-fundo); 
}

.titulo-pagina-catalogo {
    font-size: 3.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
    color: #000;
}

.filtros-catalogo {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.btn-filtro {
    padding: 12px 25px;
    border: 2px solid #000;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-filtro:hover {
    background: rgba(0,0,0,0.1);
}

.btn-filtro.active {
    background: #000;
    color: var(--cor-primaria);
}

.catalogo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.item-catalogo.escondido {
    display: none !important;
}

@media (max-width: 1366px) {
    
    .card-produto { flex: 0 0 calc(25% - 22.5px); } 
}

@media (max-width: 1024px) {
    html, body { overflow-x: hidden; position: relative; }
    .container { padding: 0 30px; }
    .top-bar.mar-azul { font-size: 0.55rem; letter-spacing: 0.5px; padding: 6px 0; }
    .header { height: 80px; background-color: #000000; }
    .menu { display: none; }
    .quem-somos-link { display: none; }
    .logo img { height: 30px; }
    .instagram-link { display: none; }
    .menu-mobile-btn { display: flex; color: #FFFFFF; }

    .produto-master-grid.full-bleed {
        display: flex !important;
        flex-direction: column !important;
        background-color: #FFFFFF !important;
        padding: 0 !important; 
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .produto-col-esq, .produto-col-dir, .produto-info-sticky {
        display: contents !important;
    }

    .produto-breadcrumbs,
    .produto-titulo-novo,
    .produto-preco-novo,
    .produto-vantagens,
    .produto-sobre,
    .produto-compartilhar {
        padding-left: 25px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .produto-breadcrumbs { order: 1; padding-top: 25px !important; margin-bottom: 5px; }
    .produto-titulo-novo { order: 2; font-size: 1.7rem; margin-bottom: 25px; line-height: 1.2; }

    .bloco-galeria-principal { 
        order: 3; 
        width: 100% !important;
        height: auto !important;
        display: block !important;
        background-color: #FFFFFF !important; 
        padding: 30px 0 !important; 
    }
    
    .foto-principal-box { display: none !important; }
    
    .miniaturas-grid {
        display: flex !important;
        width: 100%;
        padding: 0 25px !important; 
        gap: 10px !important; 
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
    }
    .miniaturas-grid::-webkit-scrollbar { display: none; }
    
    .thumb-item {
        flex: 0 0 82% !important; 
        width: 82% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        scroll-snap-align: center;
        border: 2px solid #000000 !important;
        border-radius: 0 !important; 
        background-color: #FFFFFF !important; 
        padding: 10px !important;
        object-fit: contain;
    }

    .produto-preco-novo { order: 4; font-size: 1.9rem; margin-top: 25px; margin-bottom: 20px; }
    .produto-vantagens { order: 5; margin-bottom: 25px; border: none; }

    .produto-sobre { order: 6; border-top: 1px solid #EAEAEA; padding-top: 25px; margin-bottom: 25px; }

    .btn-comprar-whats-novo { 
        order: 7; 
        margin: 0 25px 35px 25px !important; 
        width: auto !important; 
        padding: 18px !important;
        font-size: 1.1rem; 
    }

    .produto-compartilhar { order: 8; border-top: none; padding-top: 0; border-bottom: none; padding-bottom: 40px; margin-bottom: 0; }

    .fotos-lifestyle-stack { 
        order: 9; 
        width: 100% !important; 
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .titulo-pagina-catalogo { font-size: 2.5rem; }
    
    .filtros-catalogo { 
        justify-content: flex-start; 
        overflow-x: auto; 
        padding-bottom: 15px; 
        flex-wrap: nowrap; 
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
    }
    .filtros-catalogo::-webkit-scrollbar { display: none; }
    
    .btn-filtro { white-space: nowrap; font-size: 0.9rem; padding: 10px 20px; }
    
    .catalogo-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }

    .mobile-menu {
        display: flex;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 999;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        padding: 40px 30px;
    }
    .mobile-menu.active { opacity: 1; pointer-events: all; }
    .mobile-menu-content { width: 100%; max-width: 400px; text-align: center; position: relative; }
    .fechar-menu-mobile { position: absolute; top: -50px; right: 0; font-size: 2rem; font-weight: 300; color: #FFFFFF; }
    .mobile-menu-links { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; }
    .mobile-menu-links a { color: #FFFFFF; font-size: 1.6rem; font-weight: 700; }
    .mobile-menu-links a:hover { color: var(--cor-primaria); }
    .mobile-menu-busca { display: flex; gap: 10px; }
    .mobile-menu-busca input { flex: 1; padding: 14px 16px; font-size: 1rem; border: 2px solid #FFFFFF; border-radius: 8px; background: transparent; color: #FFFFFF; outline: none; }
    .mobile-menu-busca input::placeholder { color: rgba(255, 255, 255, 0.6); }
    .mobile-menu-busca button { background-color: var(--cor-mar); color: #FFFFFF; padding: 0 18px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    
    .slider-container { aspect-ratio: 1080 / 1200; height: auto; }
    .hero.full-width { margin-bottom: 60px; }
    .water-wave-wipe { width: 400%; margin-left: -150%; }

    .categorias {
        grid-template-columns: 1fr; 
        gap: 0;                     
        padding: 0;                 
        margin-top: 40px;           
        margin-bottom: 40px;        
    }
    .titulo-categorias-mobile {
        display: block;   
        padding: 0 30px;  
        margin-bottom: 20px; 
    }
    .card-categoria {
        aspect-ratio: 1080 / 472; 
    }
    .card-categoria h3 { font-size: 1.2rem; padding: 15px; }
    .card-categoria:hover { transform: none; }
    .titulo-secao { text-align: center; font-size: 2rem; }
    .geo-titulo h2 { font-size: 1.8rem; white-space: nowrap; }
    .grid-rodape { grid-template-columns: 1fr; gap: 40px; }

    .blog-card { width: 220px; height: 300px; }

    .blog-dicas-section {
        padding-top: 40px;     
        padding-bottom: 40px;  
        margin-top: 0px;       
        margin-bottom: 20px;   
    }

    .blog-3d-container {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        justify-items: center; 
        row-gap: 40px;     
        column-gap: 50px;  
        width: 100%;
        position: relative;
        
    }

    .blog-3d-slider {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    #btnPrevBlog { grid-row: 2; grid-column: 1; justify-self: end; }
    #btnNextBlog { grid-row: 2; grid-column: 2; justify-self: start; }

    .blog-3d-slider {
        height: 320px; 
    }

    .blog-card.prev {
        transform: scale(0.9) translateX(-80px) translateZ(-100px);
        
    }
    .blog-card.next {
        transform: scale(0.9) translateX(80px) translateZ(-100px);
        
    }

    .blog-card.prev-2 {
        transform: scale(0.75) translateX(-170px) translateZ(-200px);
        
    }
    .blog-card.next-2 {
        transform: scale(0.75) translateX(170px) translateZ(-200px);
        
    }

    .video-desktop { display: none; }
    .video-mobile { display: block; }
    
    .manifesto-video { 
        
        width: 100vw; 
        aspect-ratio: 1080 / 1350; 
        height: auto; 
        min-height: auto; 
        display: flex;
        justify-content: center; 
        align-items: center; 
        position: relative; 
    }
    
    .video-overlay { background: rgba(0,0,0,0.6); } 
    
    .manifesto-content { 
        width: 100%; 
        margin: 0; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        text-align: center !important; 
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }
    
    .manifesto-content h2 { 
        white-space: normal !important; 
        font-size: 2rem; 
        line-height: 1.1; 
        text-align: center !important; 
        width: 100%; 
    }
    
    .manifesto-content p { 
        text-align: center !important; 
        width: 100%;
    }
    
    .instagram-collage { flex-direction: column; text-align: center; gap: 30px; margin-top: 40px; margin-bottom: 100px; }
    .insta-caixa-fixa { order: 1; width: 100%; max-width: 480px; margin: 0 auto; }
    .insta-texto-lateral { order: 2; flex: none; width: 100%; }

    .newsletter-section {
        
        padding-top: 10px;
        
        padding-bottom: 50px;
    }

    .news-form-center .inputs-group { flex-direction: column; }
    .inputs-group button { padding: 20px; }
    .lgpd-checkbox { align-items: center; } 
    .lgpd-checkbox label { white-space: normal; font-size: 0.6rem; } 

    .news-content-row {
        display: grid;
        grid-template-columns: 140px 1fr; 
        column-gap: 0px;
        align-items: start;
        
        margin-top: 60px;
    }

    .news-phone-mockup {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        width: 135px;
        height: auto;
        
        margin-top: -107px;
        z-index: 2;
    }

    .news-content-row .news-flex-center {
        display: contents; 
    }

    .news-texto-center {
        display: contents; 
    }

    .news-texto-center h2 {
        grid-column: 2 / 3; 
        grid-row: 1 / 2; 
        font-size: 1.8rem;
        line-height: 1.2;
        text-align: left;
        text-align-last: left;
        white-space: normal;
        
        margin-bottom: -100px;
        padding-top: 0px; 
    }

    .news-texto-center p {
        grid-column: 1 / -1; 
        grid-row: 3 / 4; 
        font-size: 1rem;
        text-align: left;
        white-space: normal;
        
        margin-top: -20px;
        
        margin-bottom: -30px;
    }

    .news-form-center {
        grid-column: 1 / -1; 
        grid-row: 4 / 5; 
        
        margin-top: 0px;
    }

    .lgpd-checkbox {
        
        margin-top: 5px;
    }

    .card-produto { flex: 0 0 calc(33.333% - 20px); } 

    .carousel-destaques {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none;             
    }
    .carousel-destaques::-webkit-scrollbar {
        display: none; 
    }
}

@media (max-width: 600px) {
    .carousel-destaques { gap: 12px; }

    .card-produto { flex: 0 0 43% !important; } 
}

.quem-somos-topo { text-align: center; margin-bottom: 50px; }
.simbolo-quem-somos { width: 100px; height: 100px; margin-bottom: 20px; object-fit: contain; }
.pagina-texto h1 { font-size: 3rem; font-weight: 300; line-height: 1.2; text-align: center; }
.viva-texto { font-weight: 500; color: var(--cor-texto); }
.esporte-texto { font-weight: 900; color: var(--cor-primaria); }

body.pagina-produto-body, 
body.pagina-produto-body .main-content {
    overflow-x: clip !important;
    position: relative;
}

.produto-master-grid.full-bleed {
    width: 100vw;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0 !important;
    align-items: start !important; 
    position: relative;
}

.produto-col-esq {
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
}

.bloco-galeria-principal {
    width: 100%;
    
    height: calc(100vh - 100px); 
    padding: 0 !important;
    background-color: #FFFFFF;
    overflow: hidden; 

    display: flex;
    flex-direction: column; 
}

.foto-principal-box {
    width: 100%;
    flex: 1; 
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 0; 
}

.foto-principal-box img {
    width: 100%;
    height: 100%;
    max-width: 60vh; 
    max-height: 60vh; 
    aspect-ratio: 1 / 1; 
    object-fit: contain; 
}

.seta-galeria {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 10px;
}

.seta-esq { left: 20px; }
.seta-dir { right: 20px; }

.foto-principal-box:hover .seta-galeria {
    opacity: 1;
    visibility: visible;
}

.seta-galeria:hover {
    color: var(--cor-primaria);
    transform: translateY(-50%) scale(1.2);
}

.miniaturas-grid {
    width: 100%;
    display: flex; 
    justify-content: center; 
    gap: 15px;
    padding: 0 20px 30px 20px;
    flex-shrink: 0; 
}

.thumb-item {
    width: 75px; 
    height: 75px; 
    object-fit: contain;
    background-color: #F9F9F9;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    padding: 5px;
}

.thumb-item:hover, .thumb-item.active {
    border-color: #000000;
}

.fotos-lifestyle-stack {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    width: 100%;
}

.img-extra-item {
    width: 100%;
    overflow: hidden;
}

.img-extra-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1 { aspect-ratio: 1 / 1; }

.produto-col-dir {
    width: 100%;
    background-color: #FFFFFF !important;
    position: sticky !important;
    top: 100px !important; 
    height: calc(100vh - 100px); 
    border-left: 1px solid #EAEAEA;
    overflow-y: auto; 
    -ms-overflow-style: none;  
    scrollbar-width: none; 
}
.produto-col-dir::-webkit-scrollbar { display: none; }

.produto-info-sticky {
    padding: 60px 50px;
    background-color: #FFFFFF;
}

.produto-breadcrumbs { font-size: 0.9rem; color: #888; margin-bottom: 15px; font-weight: 500; }

.produto-titulo-novo { font-size: 1.8rem; font-weight: 900; color: #000; line-height: 1.2; margin-bottom: 10px; } 
.produto-preco-novo { font-size: 1.6rem; font-weight: 700; color: #000; margin-bottom: 30px; }

.produto-sobre { margin-bottom: 40px; }
.produto-sobre h3 { font-size: 1.1rem; font-weight: 900; color: #000; margin-bottom: 15px; }

.produto-descricao-texto {
    font-size: 1rem; font-weight: 300; color: #444; line-height: 1.6;
    position: relative;
    
    transition: max-height 0.4s ease;
}
.produto-descricao-texto p { margin-bottom: 15px; }

.produto-descricao-texto.collapsed {
    max-height: 75px; 
    overflow: hidden;
}
.produto-descricao-texto.collapsed::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}

.btn-toggle-desc {
    font-size: 1rem; font-weight: 500; color: #000;
    text-decoration: underline; background: none; border: none;
    cursor: pointer; padding: 0; margin-top: 5px; text-underline-offset: 4px;
}
.btn-toggle-desc:hover { color: var(--cor-primaria); }

.btn-comprar-whats-novo {
    display: block; background-color: #000000; color: var(--cor-primaria);
    font-size: 1.2rem; font-weight: 900; text-align: center;
    padding: 20px; border-radius: 8px; transition: all 0.3s ease; margin-bottom: 30px;
}
.btn-comprar-whats-novo:hover { background-color: var(--cor-primaria); color: #000000; }

.produto-compartilhar {
    margin-top: 20px;
    padding-top: 25px;
    border-top: 1px solid #EAEAEA;
}
.produto-compartilhar h4 {
    font-size: 1rem; font-weight: 900; letter-spacing: 0.5px;
    margin-bottom: 15px; color: #000;
}
.compartilhar-botoes {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.btn-share-icon {
    display: flex; justify-content: center; align-items: center;
    width: 48px; height: 48px;
    border: 1px solid #EAEAEA; border-radius: 12px; 
    color: #000; transition: all 0.2s ease;
}
.btn-share-icon:hover { border-color: #000; color: var(--cor-primaria); }

.btn-copiar-link {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    height: 48px; padding: 0 20px;
    border: 1px solid #EAEAEA; border-radius: 12px;
    background: transparent; color: #000;
    font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s ease; flex: 1; min-width: 160px; max-width: 220px;
}
.btn-copiar-link:hover { border-color: #000; color: var(--cor-primaria); }
.btn-copiar-link.copiado { background: #000; color: var(--cor-primaria); border-color: #000; }

body.pagina-produto-body .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.pagina-produto-body .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

.bg-amarelo { background-color: var(--cor-primaria) !important; }
.em-breve-container { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
.logo-em-breve { height: 60px; margin-bottom: 40px; }
.em-breve-container h1 { font-size: 3rem; font-weight: 900; margin-bottom: 20px; color: #000; }
.em-breve-container p { font-size: 1.2rem; margin-bottom: 40px; max-width: 600px; color: #000; }
.btn-whatsapp-preto { background-color: var(--cor-texto); color: var(--cor-branco); padding: 20px 40px; font-size: 1.2rem; font-weight: 700; border-radius: 8px; margin-bottom: 30px; transition: transform 0.3s ease; display: inline-block; }
.btn-whatsapp-preto:hover { transform: scale(1.05); }
.link-voltar { font-weight: 700; text-decoration: underline; color: #000; }
.pagina-texto { max-width: 900px; margin: 80px auto 120px auto; padding: 0 20px; }
.conteudo-geo p { font-size: 1.2rem; line-height: 1.8; margin-bottom: 20px; color: #333; }

.toast-notificacao {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    background-color: #000000;
    color: var(--cor-primaria);
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
    white-space: nowrap;
}

.toast-notificacao.mostrar {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.insta-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}

.insta-modal-overlay.mostrar {
    opacity: 1; pointer-events: all;
}

.insta-modal-box {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.insta-modal-overlay.mostrar .insta-modal-box {
    transform: translateY(0) scale(1);
}

.insta-modal-icon {
    width: 60px; height: 60px;
    background: var(--cor-primaria);
    color: #000; font-size: 30px; font-weight: bold;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%; margin: 0 auto 20px auto;
}

.insta-modal-box h3 { font-size: 1.6rem; font-weight: 900; color: #000; margin-bottom: 10px; }
.insta-modal-box p { font-size: 1rem; color: #555; line-height: 1.5; margin-bottom: 25px; }

.btn-abrir-insta {
    background: #000; color: var(--cor-primaria);
    font-size: 1.1rem; font-weight: 900; padding: 15px 30px;
    border-radius: 8px; width: 100%; cursor: pointer;
    transition: all 0.3s ease; border: none;
}

.btn-abrir-insta:hover {
    background: var(--cor-primaria); color: #000;
}

body.pagina-institucional-body {
    background-color: #FFFFFF !important;
}
body.pagina-institucional-body::before {
    display: none !important; 
}
body.pagina-institucional-body .main-content {
    background-color: #FFFFFF !important;
}

.carta-fundador {
    max-width: 750px; 
    margin: 0 auto;
    text-align: left; 
    color: #333333;
}

.carta-fundador p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 25px;
    font-weight: 300;
}

.carta-fundador .saudacao {
    font-size: 1.3rem;
}

.carta-fundador strong {
    font-weight: 700;
    color: #000000;
}

.assinatura-bloco {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #EAEAEA;
    text-align: left;
}

.assinatura-bloco .despedida {
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
}

.assinatura-bloco h4 {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--cor-primaria);
    margin-bottom: 5px;
    line-height: 1;
}

.assinatura-bloco span {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .carta-fundador p {
        text-align: justify;
        text-justify: inter-word; 
    }
    .assinatura-bloco {
        margin-top: 40px;
    }
}

.subtitulo-vento {
    font-size: 1.8rem; 
    font-weight: 300;
    display: block;
    margin-bottom: 5px;
    color: #000;
}

.link-menu-amarelo {
    color: var(--cor-primaria) !important;
}

body.pagina-institucional-body::before {
    display: none !important;
}

body.pagina-institucional-body .main-content {
    position: relative;
    background-color: #FFFFFF !important;
}

body.pagina-institucional-body .main-content::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

body.pagina-institucional-body .pagina-texto {
    position: relative;
    z-index: 1;
}

.documento-institucional {
    max-width: 800px;
    margin: 60px auto 100px auto;
    text-align: left;
    color: #222222;
}

.documento-header {
    border-bottom: 2px solid #000000;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.documento-header h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #000000;
    margin-bottom: 10px;
    line-height: 1.2;
}

.documento-header p {
    font-size: 0.8rem;
    color: #666666;
    font-weight: 700;
    letter-spacing: 1px;
}

.documento-secao {
    margin-bottom: 35px;
}

.documento-secao h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.documento-secao p {
    font-size: 1rem;
    line-height: 1.7;
    color: #444444;
    font-weight: 300;
    margin-bottom: 12px;
}

.documento-secao ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.documento-secao li {
    font-size: 1rem;
    line-height: 1.7;
    color: #444444;
    font-weight: 300;
    margin-bottom: 8px;
}

.documento-secao strong {
    font-weight: 700;
    color: #000000;
}

@media (max-width: 768px) {
    .documento-institucional {
        margin: 40px auto 80px auto;
    }
    .documento-header h1 {
        font-size: 1.7rem;
    }
    .documento-secao h2 {
        font-size: 1.1rem;
    }
}

body.pagina-documento-body {
    background-color: #FFFFFF !important;
}

body.pagina-documento-body::before,
body.pagina-documento-body .main-content::before {
    display: none !important; 
}

body.pagina-documento-body .main-content {
    background-color: #FFFFFF !important;
}

body.pagina-artigo-body {
    background-color: #FFFFFF !important;
}

body.pagina-artigo-body::before { display: none !important; }

.artigo-hero {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 7; 
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .artigo-hero { aspect-ratio: 4 / 5; } 
}

.artigo-hero img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}

.artigo-hero::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.artigo-hero-conteudo {
    position: relative; z-index: 2;
    padding: 60px 5%;
    width: 100%; max-width: 1200px; margin: 0 auto;
}

.artigo-tag {
    background: var(--cor-primaria); color: #000;
    font-weight: 900; font-size: 0.9rem; padding: 5px 15px;
    border-radius: 4px; display: inline-block; margin-bottom: 15px;
}

.artigo-titulo {
    color: #FFF; font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900; line-height: 1.1; margin-bottom: 10px;
}

.artigo-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 25px;
}

.artigo-intro {
    font-size: 1.3rem; line-height: 1.8; color: #333;
    font-weight: 300; margin-bottom: 50px;
    border-left: 4px solid var(--cor-primaria);
    padding-left: 20px;
}

.artigo-bloco {
    display: flex; align-items: center; gap: 40px;
    margin-bottom: 60px;
}

.artigo-bloco:nth-child(even) { flex-direction: row-reverse; }

@media (max-width: 768px) {
    
    .artigo-bloco, .artigo-bloco:nth-child(even) {
        flex-direction: column; gap: 20px;
    }
}

.artigo-bloco-texto { flex: 1; }
.artigo-bloco-texto h3 { font-size: 1.6rem; font-weight: 900; margin-bottom: 15px; color: #000; }
.artigo-bloco-texto p { font-size: 1.1rem; line-height: 1.7; color: #444; font-weight: 300; }

.artigo-bloco-img {
    flex: 0 0 45%; 
    aspect-ratio: 1 / 1; 
    border-radius: 12px; overflow: hidden;
}

.artigo-bloco-img img { width: 100%; height: 100%; object-fit: cover; }

.artigo-vitrine {
    background-color: #F8F8F8;
    padding: 60px 0;
    margin-top: 80px;
}

.artigo-vitrine-header {
    text-align: center; margin-bottom: 40px; padding: 0 25px;
}
.artigo-vitrine-header h2 { font-size: 2.2rem; font-weight: 900; color: #000; }

.artigo-vitrine-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    max-width: 1200px; margin: 0 auto; padding: 0 25px;
}

@media (max-width: 768px) {
    .artigo-vitrine-grid {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 20px;
    }
    .artigo-vitrine-grid .card-produto {
        flex: 0 0 75%; scroll-snap-align: center;
    }
}