/* ============================================
   RESET E VARIÁVEIS
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color   : #1e4a7e;
    --secondary-color : #e83e8c;
    --accent-color    : #3a7bd5;
    --dark-color      : #1a365d;
    --light-color     : #f8f9fa;
    --text-color      : #333;
    --text-light      : #777;
    --shadow          : 0 5px 15px rgba(0, 0, 0, 0.08);
    --shadow-hover    : 0 10px 25px rgba(0, 0, 0, 0.15);
    --transition      : all 0.3s ease;
    --border-radius   : 10px;
    --whatsapp-color  : #25D366;
    --whatsapp-hover  : #128C7E;

    /*
     * LOGO — Variáveis de dimensão
     * O desktop é a referência visual. A logo tem 104px de altura.
     */
    --logo-height-desktop  : 104px;
    --logo-height-tablet-lg:  88px;
    --logo-height-tablet-sm:  76px;
    --logo-height-mobile   :  68px;
    --logo-height-mobile-sm:  56px;
    --logo-max-width       : 280px;

    /*
     * Padding simétrico que envolve a logo no .navbar.
     * Modificado para 6px para o header abraçar a logo sem excesso de espaço.
     */
    --navbar-padding-v: 6px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
    overflow-x: hidden;
}

/* ============================================
   HEADER E NAVEGAÇÃO
   ============================================ */

header {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    z-index         : 1000;
    background-color: #ffffff;
    box-shadow      : 0 2px 8px rgba(0, 0, 0, 0.08);
    transition      : var(--transition);
}

.navbar {
    padding: var(--navbar-padding-v) 0;
}

.nav-container {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    /* Zera o recuo esquerdo para permitir que a logo chegue na borda */
    padding-left   : 0px;
    padding-right  : 15px;
}


.highlight {
            color: #ff4da6;
            font-weight: 600;
}

/* ============================================
   LOGO — Imagem dinâmica (carregada via Supabase)
   ============================================ */

.logo {
    flex-shrink : 0;
    /* Puxa a logo para o limite esquerdo (compensa paddings de containers globais) */
    margin-left : -50px;
    padding-left: 0;
}

/*
 * min-height = altura da logo → evita CLS (Cumulative Layout Shift)
 * sem somar o padding novamente, para evitar espaço duplo indesejado.
 */
.logo-link {
    display        : flex;
    align-items    : center;
    text-decoration: none;
    color          : inherit;
    min-height     : var(--logo-height-desktop);
    position       : relative;
}

/* ── Skeleton (animação de loading) ────────────────────────── */
.logo-skeleton {
    width           : var(--logo-max-width);
    height          : var(--logo-height-desktop);
    border-radius   : 6px;
    background      : linear-gradient(
        90deg,
        #e8edf3 25%,
        #d0dae6 50%,
        #e8edf3 75%
    );
    background-size : 200% 100%;
    animation       : logo-shimmer 1.4s infinite ease-in-out;
    transition      : opacity 0.35s ease, transform 0.35s ease;
    transform-origin: left center;
}

.logo-skeleton--oculto {
    opacity       : 0;
    transform     : scaleX(0.97);
    pointer-events: none;
}

@keyframes logo-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Wrapper da imagem real ─────────────────────────────────── */
.logo-imagem-wrapper {
    display    : flex;
    align-items: center;
    opacity    : 0;
    transition : opacity 0.4s ease;
    position   : absolute;
    top        : 50%;
    left       : 0;
    transform  : translateY(-50%);
}

.logo-imagem-wrapper--visivel {
    opacity: 1;
}

/* ── A imagem da logo em si ─────────────────────────────────── */
.logo-img {
    height         : auto;
    max-height     : var(--logo-height-desktop);
    width          : auto;
    max-width      : var(--logo-max-width);
    object-fit     : contain;
    object-position: left center;

    /* Renderização nítida em displays de alta densidade (Retina, OLED). */
    image-rendering        : -webkit-optimize-contrast;
    -ms-interpolation-mode : nearest-neighbor;

    user-select      : none;
    -webkit-user-drag: none;
    display          : block;
}

/* ── Fallback textual (emergência) ──────────────────────────── */
.logo-fallback {
    display    : none;
    align-items: center;
}

.logo-fallback--visivel {
    display: flex;
}

.logo-fallback-text {
    font-size     : 1.9rem;
    font-weight   : 800;
    color         : var(--primary-color);
    letter-spacing: -0.5px;
    line-height   : 1;
}

.logo-fallback-text em {
    font-style: normal;
    color     : var(--secondary-color);
}

/* ============================================
   NAVEGAÇÃO — MENU E BUSCA
   ============================================ */
.nav-right {
    display    : flex;
    align-items: center;
    gap        : 40px;
}

.nav-menu {
    display   : flex;
    list-style: none;
    gap       : 30px;
}

.nav-menu a {
    text-decoration: none;
    color          : var(--dark-color);
    font-weight    : 500;
    font-size      : 0.95rem;
    position       : relative;
    padding        : 5px 0;
    transition     : var(--transition);
}

.nav-menu a::after {
    content         : '';
    position        : absolute;
    bottom          : 0;
    left            : 0;
    width           : 0;
    height          : 2px;
    background-color: var(--secondary-color);
    transition      : width 0.3s ease;
    border-radius   : 2px;
}

.nav-menu a:hover        { color: var(--primary-color); }
.nav-menu a:hover::after { width: 100%; }

.search-container { position: relative; }

.search-box {
    display         : flex;
    align-items     : center;
    background-color: #f1f3f6;
    border-radius   : 50px;
    padding         : 5px 15px;
    border          : 1px solid transparent;
    transition      : var(--transition);
}

.search-box:focus-within {
    background-color: #fff;
    border-color    : var(--primary-color);
    box-shadow      : 0 0 0 3px rgba(30, 74, 126, 0.1);
}

.search-box input {
    border     : none;
    background : transparent;
    outline    : none;
    padding    : 8px 10px;
    width      : 200px;
    font-family: inherit;
    font-size  : 0.9rem;
    color      : var(--text-color);
}

.search-box input::placeholder { color: #999; }

.search-box button {
    background     : transparent;
    border         : none;
    cursor         : pointer;
    color          : var(--text-light);
    font-size      : 1.1rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : color 0.3s ease;
}
.search-box button:hover { color: var(--secondary-color); }

.search-results {
    position     : absolute;
    top          : calc(100% + 15px);
    right        : 0;
    width        : 300px;
    background   : #fff;
    border-radius: var(--border-radius);
    box-shadow   : var(--shadow-hover);
    border       : 1px solid #eee;
    opacity      : 0;
    visibility   : hidden;
    transform    : translateY(-10px);
    transition   : var(--transition);
    max-height   : 400px;
    overflow-y   : auto;
    z-index      : 1001;
}

.search-results.active {
    opacity   : 1;
    visibility: visible;
    transform : translateY(0);
}

.search-result-item {
    padding      : 15px;
    border-bottom: 1px solid #f5f5f5;
    cursor       : pointer;
    transition   : background 0.2s ease;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover      { background-color: var(--light-color); }
.search-result-title { font-weight: 600; color: var(--primary-color); margin-bottom: 3px; font-size: 0.95rem; }
.search-result-cat   { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; font-weight: 500; }

.hamburger {
    display        : none;
    flex-direction : column;
    justify-content: space-between;
    width          : 25px;
    height         : 18px;
    background     : transparent;
    border         : none;
    cursor         : pointer;
    z-index        : 1002;
}

.hamburger span {
    display         : block;
    width           : 100%;
    height          : 2px;
    background-color: var(--primary-color);
    border-radius   : 2px;
    transition      : var(--transition);
}

/* ── Botão de busca mobile (ícone na navbar) ─────────────────── */
.mobile-search-toggle {
    display        : none;
    background     : transparent;
    border         : none;
    cursor         : pointer;
    color          : var(--primary-color);
    font-size      : 1.15rem;
    padding        : 5px;
    align-items    : center;
    justify-content: center;
    z-index        : 1002;
}

/* ── Barra de busca expandida no mobile (abaixo da navbar) ───── */
.mobile-search-bar {
    display         : none;
    position        : fixed;
    top             : calc(var(--logo-height-mobile) + 2 * var(--navbar-padding-v));
    left            : 0;
    width           : 100%;
    background      : #ffffff;
    padding         : 10px 15px;
    box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index         : 999;
    gap             : 10px;
    align-items     : center;
    border-top      : 1px solid #eee;
    animation       : slideDown 0.25s ease;
}

.mobile-search-bar.active {
    display: flex;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mobile-search-bar input {
    flex        : 1;
    border      : 1px solid #ddd;
    border-radius: 50px;
    padding     : 10px 18px;
    font-family : inherit;
    font-size   : 0.95rem;
    outline     : none;
    color       : var(--text-color);
    background  : #f1f3f6;
    transition  : var(--transition);
}

.mobile-search-bar input:focus {
    background  : #fff;
    border-color: var(--primary-color);
    box-shadow  : 0 0 0 3px rgba(30, 74, 126, 0.1);
}

.mobile-search-bar button {
    background     : var(--primary-color);
    border         : none;
    border-radius  : 50%;
    width          : 40px;
    height         : 40px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    color          : white;
    font-size      : 1rem;
    flex-shrink    : 0;
    transition     : var(--transition);
}

.mobile-search-bar button:hover {
    background: var(--accent-color);
}

/* Resultados da busca mobile */
.mobile-search-results {
    position     : fixed;
    top          : calc(var(--logo-height-mobile) + 2 * var(--navbar-padding-v) + 62px);
    left         : 0;
    width        : 100%;
    background   : #fff;
    box-shadow   : 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index      : 998;
    max-height   : 55vh;
    overflow-y   : auto;
    border-top   : 1px solid #f0f0f0;
    display      : none;
}

.mobile-search-results.active {
    display: block;
}

.mobile-search-results .search-result-item {
    padding      : 14px 18px;
    border-bottom: 1px solid #f5f5f5;
    cursor       : pointer;
    transition   : background 0.2s ease;
}

.mobile-search-results .search-result-item:hover {
    background: var(--light-color);
}

/* ============================================
   HERO BANNER
   ============================================ */
.hero {
    margin-top : calc(var(--logo-height-desktop) + 2 * var(--navbar-padding-v));
    height     : 75vh;
    min-height : 550px;
    width      : 100%;
    position   : relative;
    display    : flex;
    align-items: center;
}

.hero-banner-container {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: var(--primary-color);
    z-index         : 1;
    overflow        : hidden;
}

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

.hero-overlay {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: linear-gradient(to right, rgba(15, 30, 60, 0.85) 0%, rgba(15, 30, 60, 0.3) 100%);
    z-index   : 2;
}

.hero-inner   { position: relative; z-index: 3; width: 100%; }
.hero-content { max-width: 750px; color: white; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

.hero-content h1 {
    font-size    : clamp(2.2rem, 5vw, 3.8rem);
    line-height  : 1.2;
    margin-bottom: 25px;
    font-weight  : 700;
    color        : white !important;
}

.hero-content p {
    font-size    : clamp(1.1rem, 2vw, 1.4rem);
    margin-bottom: 35px;
    color        : rgba(255, 255, 255, 0.95) !important;
    max-width    : 600px;
}

.hero-buttons { display: flex; gap: 20px; }

/* ── Botões ─────────────────────────────────────────────────── */
.btn {
    background-color: var(--primary-color);
    color           : white;
    padding         : 15px 35px;
    border-radius   : 50px;
    text-decoration : none;
    font-weight     : 600;
    transition      : var(--transition);
    border          : none;
    display         : inline-block;
}
.btn:hover {
    background-color: var(--accent-color);
    transform       : translateY(-3px);
    box-shadow      : 0 5px 15px rgba(58, 123, 213, 0.4);
}

.btn-secondary {
    background     : transparent;
    border         : 2px solid white;
    color          : white;
    padding        : 13px 33px;
    border-radius  : 50px;
    text-decoration: none;
    font-weight    : 600;
    transition     : var(--transition);
    display        : inline-block;
}
.btn-secondary:hover {
    background: white;
    color     : var(--dark-color);
}

/* ============================================
   SEÇÕES GERAIS
   ============================================ */
.container {
    width    : 95%;
    max-width: 1400px;
    margin   : 0 auto;
    padding  : 0 15px;
}

section { padding: 80px 0; }

.section-title {
    text-align   : center;
    margin-bottom: 50px;
    font-size    : 2.2rem;
    color        : var(--dark-color);
    position     : relative;
    font-weight  : 700;
}
.section-title::after {
    content      : '';
    position     : absolute;
    bottom       : -15px;
    left         : 50%;
    transform    : translateX(-50%);
    width        : 70px;
    height       : 4px;
    background   : var(--secondary-color);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color     : var(--text-light);
    max-width : 700px;
    margin    : -30px auto 50px;
}

/* ============================================
   GALERIA E PRODUTOS
   ============================================ */
.galeria-filtros {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 10px;
    margin-bottom  : 40px;
}

.filtro-btn {
    padding      : 8px 20px;
    background   : white;
    border       : 1px solid #ddd;
    border-radius: 50px;
    cursor       : pointer;
    transition   : var(--transition);
    font-weight  : 500;
    font-family  : inherit;
    color        : var(--text-color);
}
.filtro-btn:hover  { border-color: var(--primary-color); color: var(--primary-color); }
.filtro-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(30, 74, 126, 0.2); }

.galeria-grid,
.produtos-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap                  : 20px;
}

.galeria-item {
    background   : white;
    border-radius: var(--border-radius);
    overflow     : hidden;
    box-shadow   : var(--shadow);
    transition   : var(--transition);
    cursor       : pointer;
}
.galeria-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }

.galeria-imagem-container {
    width       : 100%;
    aspect-ratio: 1 / 1;     /* quadrado */
    overflow    : hidden;
    position    : relative;
}

.galeria-imagem-padrao {
    width     : 100%;
    height    : 100%;
    object-fit: cover;        /* corte suave, centralizado */
    display   : block;
    transition: transform 0.5s ease;
}

.galeria-item:hover .galeria-imagem-padrao { transform: scale(1.05); }

.galeria-info      { padding: 15px; }
.galeria-categoria {
    font-size     : 0.65rem;
    text-transform: uppercase;
    color         : var(--secondary-color);
    font-weight   : 700;
    margin-bottom : 5px;
    display       : block;
}
.galeria-preco {
    font-weight: 700;
    color      : var(--primary-color);
    font-size  : 1.1rem;
    margin-top : 8px;
}

.produto-card {
    background   : white;
    padding      : 25px 15px;
    border-radius: var(--border-radius);
    text-align   : center;
    box-shadow   : var(--shadow);
    border-top   : 5px solid var(--primary-color);
    cursor       : pointer;
    transition   : var(--transition);
}
.produto-card:hover                { transform: translateY(-8px); border-color: var(--secondary-color); }
.produto-icon                      { font-size: 2.2rem; color: var(--primary-color); margin-bottom: 15px; transition: var(--transition); }
.produto-card:hover .produto-icon  { color: var(--secondary-color); transform: scale(1.1); }

.empty-state,
.loading-state,
.loading-produtos {
    text-align : center;
    padding    : 50px 0;
    color      : var(--text-light);
    grid-column: 1 / -1;
}
.empty-state i,
.loading-state i,
.loading-produtos i { font-size: 2.5rem; color: #ddd; margin-bottom: 15px; }

/* ============================================
   SOBRE
   ============================================ */
.sobre { background: var(--light-color); }

.sobre-text {
    max-width : 900px;
    margin    : 0 auto;
    text-align: center;
}
.sobre-text p { font-size: 1.1rem; margin-bottom: 25px; }

.sobre-destaques {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 30px;
    margin-top           : 50px;
}

.destaque {
    padding      : 30px;
    background   : white;
    border-radius: var(--border-radius);
    box-shadow   : var(--shadow);
    transition   : var(--transition);
}
.destaque:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.destaque i     { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px; }

/* ============================================
   CONTATO
   ============================================ */
.contato-info-modern {
    max-width    : 1000px;
    margin       : 0 auto;
    background   : white;
    padding      : 50px;
    border-radius: var(--border-radius);
    box-shadow   : var(--shadow);
}
.contato-info-modern h3 {
    text-align   : center;
    font-size    : 1.8rem;
    color        : var(--primary-color);
    margin-bottom: 10px;
}

.contato-grid {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 30px;
    margin-top           : 40px;
}

.contato-item {
    display      : flex;
    align-items  : flex-start;
    gap          : 20px;
    padding      : 25px;
    border       : 1px solid #eee;
    border-radius: var(--border-radius);
    transition   : var(--transition);
    background   : #fbfdff;
}
.contato-item:hover  { border-color: var(--primary-color); background: white; box-shadow: var(--shadow); }
.contato-item i      { color: var(--secondary-color); font-size: 1.8rem; margin-top: 5px; }
.contato-item strong { display: block; font-size: 1.1rem; color: var(--dark-color); margin-bottom: 5px; }

/* ============================================
   FOOTER
   ============================================ */
footer {
    background: var(--dark-color);
    color     : white;
    padding   : 60px 0 20px;
}

.footer-content {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap                  : 40px;
    border-bottom        : 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom       : 40px;
}

.footer-section h3 {
    margin-bottom : 20px;
    font-size     : 1.2rem;
    color         : white;
    position      : relative;
    padding-bottom: 10px;
}
.footer-section h3::after {
    content   : '';
    position  : absolute;
    bottom    : 0;
    left      : 0;
    width     : 40px;
    height    : 2px;
    background: var(--secondary-color);
}

.footer-section ul    { list-style: none; }
.footer-section ul li { margin-bottom: 12px; }
.footer-section a     { color: #bbb; text-decoration: none; transition: 0.3s; font-size: 0.95rem; }
.footer-section a:hover { color: white; padding-left: 5px; }

.social-links        { display: flex; gap: 15px; margin-top: 20px; }
.social-links a {
    width          : 40px;
    height         : 40px;
    background     : rgba(255, 255, 255, 0.1);
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
    color          : white;
    font-size      : 1.1rem;
}
.social-links a:hover { background: var(--secondary-color); transform: translateY(-3px); }

.footer-bottom {
    text-align : center;
    padding-top: 25px;
    color      : #888;
    font-size  : 0.85rem;
}

/* ============================================
   WHATSAPP FLUTUANTE
   ============================================ */
.whatsapp-float {
    position       : fixed;
    bottom         : 30px;
    right          : 30px;
    left           : auto;
    background     : var(--whatsapp-color);
    color          : white;
    width          : 60px;
    height         : 60px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 2rem;
    box-shadow     : 0 5px 15px rgba(37, 211, 102, 0.4);
    z-index        : 1000;
    transition     : transform 0.3s ease;
    text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1); background: var(--whatsapp-hover); }

/* ============================================
   RESPONSIVIDADE
   ============================================ */

/* ── Tablet grande: 993px – 1199px ────────────────────────── */
@media (max-width: 1199px) {
    .hero {
        margin-top: calc(var(--logo-height-tablet-lg) + 2 * var(--navbar-padding-v));
    }
    .logo-img {
        max-height: var(--logo-height-tablet-lg);
        max-width : 260px;
    }
    .logo-skeleton {
        width : 260px;
        height: var(--logo-height-tablet-lg);
    }
    .logo-link {
        min-height: var(--logo-height-tablet-lg);
    }
}

/* ── Tablet menor: 769px – 992px ──────────────────────────── */
@media (max-width: 992px) {
    .hero {
        margin-top: calc(var(--logo-height-tablet-sm) + 2 * var(--navbar-padding-v));
    }
    .sobre-destaques  { grid-template-columns: repeat(2, 1fr); }
    .hero-content h1  { font-size: 2.8rem; }
    .nav-right        { gap: 20px; }
    .search-box input { width: 140px; }

    .logo-img {
        max-height: var(--logo-height-tablet-sm);
        max-width : 240px;
    }
    .logo-skeleton {
        width : 240px;
        height: var(--logo-height-tablet-sm);
    }
    .logo-link {
        min-height: var(--logo-height-tablet-sm);
    }
}

/* ── Mobile: até 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

    /* Hamburger */
    .hamburger { display: flex; }

    /* Botão de busca mobile */
    .mobile-search-toggle { display: flex; }

    .nav-menu {
        position      : fixed;
        top           : 0;
        padding-top   : 72px;
        left          : -100%;
        flex-direction: column;
        background    : #ffffff;
        width         : 100%;
        text-align    : center;
        transition    : 0.3s;
        box-shadow    : 0 10px 20px rgba(0, 0, 0, 0.1);
        padding-bottom: 30px;
        gap           : 20px;
    }
    .nav-menu.active { left: 0; }

    /* Esconde a busca desktop no mobile */
    .search-container { display: none; }

    /* Animação do X no hamburger */
    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Logo - zera a margem negativa extrema no mobile para não cortar a imagem em telas pequenas */
    .logo {
        margin-left: 0;
    }

    .logo-img {
        max-height: var(--logo-height-mobile);
        max-width : 210px;
    }
    .logo-skeleton {
        width : 210px;
        height: var(--logo-height-mobile);
    }
    .logo-link {
        min-height: var(--logo-height-mobile);
    }
    .logo-fallback-text {
        font-size: 1.55rem;
    }

    /* Hero */
    .hero {
        margin-top : calc(var(--logo-height-mobile) + 2 * var(--navbar-padding-v));
        height     : auto;
        padding    : 80px 0 80px;
        align-items: flex-start;
    }
    .hero-content              { text-align: center; padding: 0; }
    .hero-content h1           { font-size: 2.2rem; }
    .hero-buttons {
        justify-content: center;
        flex-direction : column;
        align-items    : center;
        width          : 100%;
    }
    .hero-buttons a {
        width     : 100%;
        max-width : 300px;
        text-align: center;
    }

    /* Grids */
    .galeria-grid,
    .produtos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }

    /* Layout */
    .sobre-destaques,
    .contato-grid  { grid-template-columns: 1fr; }
    .section-title { font-size: 1.8rem; }
    .contato-info-modern {
        padding  : 30px 15px;
        width    : 100%;
        box-sizing: border-box;
        overflow : hidden;
    }
    .contato-item {
        padding   : 18px 12px;
        gap       : 12px;
        word-break: break-word;
        overflow  : hidden;
    }
    .contato-item p,
    .contato-item strong {
        word-break : break-word;
        overflow-wrap: break-word;
        max-width  : 100%;
    }
}

/* ── Overflow horizontal global — previne scroll lateral no mobile ── */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width : 100%;
    }
    .container {
        width    : 100%;
        padding  : 0 15px;
        box-sizing: border-box;
    }
    section {
        padding  : 60px 0;
        overflow : hidden;
    }
}

/* ── Mobile muito pequeno: até 400px ───────────────────────── */
@media (max-width: 400px) {
    .galeria-grid,
    .produtos-grid { grid-template-columns: 1fr; }

    .logo-img {
        max-height: var(--logo-height-mobile-sm);
        max-width : 170px;
    }
    .logo-skeleton {
        width : 170px;
        height: var(--logo-height-mobile-sm);
    }
    .logo-link {
        min-height: var(--logo-height-mobile-sm);
    }
}