/* ===============================================================
   SITE RESPONSIVE — responsividade global via @container queries.

   Container root 'sitepreview' declarado em:
   - body (layout público) → container = viewport, rules disparam no mobile real
   - .sb-canvas__frame (builder) → container = tamanho do frame (390px mobile
     / 820px tablet), rules disparam ao clicar nos toggles do preview

   Fallback @media mantido para browsers sem suporte a @container (<2023).
   =============================================================== */

/* =================================================================
   BLOCK-LEVEL OVERRIDES — força @container queries nos estilos
   específicos de cada bloco que usa ID+classe gerados dinamicamente.
   Cobre os casos em que o @container nos seletores genéricos
   ([class*="hero-row-"] etc) não basta por conta da especificidade
   do bloco (#hero-X .hero-row-X).
   ================================================================= */
@container sitepreview (max-width: 768px) {
    /* HERO: colapsa 2 colunas (imagem+texto) pra 1 */
    [id^="hero-"] [class^="hero-row-"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    [id^="hero-"] [class^="hero-text-col-"],
    [id^="hero-"] [class^="hero-image-col-"] {
        order: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Hero altura reduz + padding vertical mínimo pro texto não colar na navbar */
    [id^="hero-"] {
        min-height: 360px !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* NAVBAR PREVIEW (canvas-navbar): esconde links/CTA desktop e mostra hamburger */
    [id^="nav-preview-"] > div > ul,
    [id^="nav-preview-"] > div > div:last-child {
        display: none !important;
    }
    [id^="nav-preview-"] > div::after {
        content: "\f0c9"; /* FontAwesome bars (hamburger) */
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        font-size: 22px;
        margin-left: auto;
        color: inherit;
        display: inline-flex;
        align-items: center;
        order: 3;
    }
    [id^="nav-preview-"] > div {
        justify-content: space-between !important;
    }
    [id^="nav-preview-"] .nav-logo {
        position: static !important;
        transform: none !important;
        left: auto !important; top: auto !important;
        order: 1 !important;
    }

    /* TEXT_IMAGE: colapsa */
    [class^="text-image-grid-"] { grid-template-columns: 1fr !important; gap: 20px !important; }
    [class^="text-image-grid-"] > div { order: 0 !important; }

    /* GRID (blocos do tipo grid com variantes) — força 1 col */
    [class^="grid-responsive-"] { grid-template-columns: 1fr !important; }

    /* MAP lateral — empilha mapa e texto */
    [class^="map-side-grid-"] { grid-template-columns: 1fr !important; }

    /* CAROUSEL — altura mobile menor */
    [id^="carousel-"] { height: 320px !important; }

    /* Font size grandes em qualquer bloco viram 28px */
    section h1 { font-size: 28px !important; line-height: 1.2 !important; word-wrap: break-word; }
    section h2 { font-size: 24px !important; line-height: 1.25 !important; word-wrap: break-word; }
    section h3 { font-size: 20px !important; line-height: 1.3 !important; word-wrap: break-word; }

    /* Espaçamento interno das sections */
    section { padding-left: 16px !important; padding-right: 16px !important; }

    /* iframe (mapa, vídeo) nunca maior que largura do container */
    iframe { max-width: 100% !important; }
}

/* Fallback via data-preview (mesmas regras — se @container não estiver
   rodando por algum motivo, essas ainda funcionam no preview do builder) */
.sb-canvas__frame[data-preview="mobile"] [id^="hero-"] [class^="hero-row-"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}
.sb-canvas__frame[data-preview="mobile"] [id^="hero-"] [class^="hero-text-col-"],
.sb-canvas__frame[data-preview="mobile"] [id^="hero-"] [class^="hero-image-col-"] {
    order: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sb-canvas__frame[data-preview="mobile"] [id^="hero-"] {
    min-height: 360px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* Canvas navbar preview: hamburger fake em mobile */
.sb-canvas__frame[data-preview="mobile"] [id^="nav-preview-"] > div > ul,
.sb-canvas__frame[data-preview="mobile"] [id^="nav-preview-"] > div > div:last-child {
    display: none !important;
}
.sb-canvas__frame[data-preview="mobile"] [id^="nav-preview-"] > div::after {
    content: "\f0c9";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 22px;
    margin-left: auto;
    color: inherit;
    display: inline-flex;
    align-items: center;
    order: 3;
}
.sb-canvas__frame[data-preview="mobile"] [id^="nav-preview-"] > div {
    justify-content: space-between !important;
}
.sb-canvas__frame[data-preview="mobile"] [id^="nav-preview-"] .nav-logo {
    position: static !important;
    transform: none !important;
    left: auto !important; top: auto !important;
    order: 1 !important;
}
.sb-canvas__frame[data-preview="mobile"] [class^="text-image-grid-"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}
.sb-canvas__frame[data-preview="mobile"] [class^="text-image-grid-"] > div { order: 0 !important; }
.sb-canvas__frame[data-preview="mobile"] [class^="grid-responsive-"] { grid-template-columns: 1fr !important; }
.sb-canvas__frame[data-preview="mobile"] [class^="map-side-grid-"] { grid-template-columns: 1fr !important; }
.sb-canvas__frame[data-preview="mobile"] [id^="carousel-"] { height: 320px !important; }
.sb-canvas__frame[data-preview="mobile"] section h1 { font-size: 28px !important; line-height: 1.2 !important; word-wrap: break-word; }
.sb-canvas__frame[data-preview="mobile"] section h2 { font-size: 24px !important; line-height: 1.25 !important; word-wrap: break-word; }
.sb-canvas__frame[data-preview="mobile"] section h3 { font-size: 20px !important; line-height: 1.3 !important; word-wrap: break-word; }
.sb-canvas__frame[data-preview="mobile"] section { padding-left: 16px !important; padding-right: 16px !important; }
.sb-canvas__frame[data-preview="mobile"] iframe { max-width: 100% !important; }

/* Tablet fallback */
@container sitepreview (max-width: 1024px) {
    [class^="grid-responsive-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* Hero no tablet: mantém 2 cols mas adiciona padding pra texto respirar */
    [id^="hero-"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}
.sb-canvas__frame[data-preview="tablet"] [class^="grid-responsive-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.sb-canvas__frame[data-preview="tablet"] [id^="hero-"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* =================================================================
   TABLET — até 1024px (no container)
   ================================================================= */
@container sitepreview (max-width: 1024px) {
    [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(3,minmax(0, 1fr))"],
    [style*="grid-template-columns: repeat(3, minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(4,minmax(0, 1fr))"],
    [style*="grid-template-columns: repeat(4, minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(6, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(6,minmax(0,1fr))"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    section h1, section h2 { font-size: clamp(26px, 4.5cqw, 42px) !important; }
    section h3 { font-size: clamp(20px, 3cqw, 28px) !important; }
}

/* =================================================================
   MOBILE — até 768px (no container)
   ================================================================= */
@container sitepreview (max-width: 768px) {
    /* ===== GRIDS: força 1 coluna em mobile ===== */
    [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(2,minmax(0, 1fr))"],
    [style*="grid-template-columns: repeat(2, minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(3,minmax(0, 1fr))"],
    [style*="grid-template-columns: repeat(3, minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(4,minmax(0, 1fr))"],
    [style*="grid-template-columns: repeat(4, minmax(0,1fr))"],
    [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(6, minmax(0, 1fr))"],
    [style*="grid-template-columns:repeat(6,minmax(0,1fr))"],
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns: repeat(6, 1fr)"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 280px 1fr"],
    [style*="grid-template-columns: 1fr 280px"],
    [style*="grid-template-columns: minmax(0,1fr) minmax(0,1fr)"],
    [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"],
    [style*="minmax(300px"],
    [style*="minmax(320px"],
    [style*="minmax(350px"],
    [style*="minmax(380px"],
    [style*="minmax(400px"] {
        grid-template-columns: 1fr !important;
    }

    /* ===== HERO row (classes dinâmicas) — colapsar imagem lateral ===== */
    [class*="hero-row-"] { grid-template-columns: 1fr !important; gap: 24px !important; }
    [class*="hero-text-col-"],
    [class*="hero-image-col-"] {
        order: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ===== TEXT_IMAGE grid ===== */
    [class*="text-image-grid-"] { grid-template-columns: 1fr !important; }

    /* ===== MAP lateral ===== */
    [class*="map-side-grid-"] { grid-template-columns: 1fr !important; }

    /* ===== TITULOS ===== */
    section h1, h1[style*="font-size"] { font-size: clamp(22px, 7cqw, 32px) !important; line-height: 1.15 !important; word-wrap: break-word; }
    section h2, h2[style*="font-size"] { font-size: clamp(20px, 6cqw, 28px) !important; line-height: 1.2 !important; word-wrap: break-word; }
    section h3, h3[style*="font-size"] { font-size: clamp(18px, 5cqw, 22px) !important; line-height: 1.3 !important; word-wrap: break-word; }
    section h4, h4[style*="font-size"] { font-size: clamp(16px, 4cqw, 20px) !important; line-height: 1.3 !important; word-wrap: break-word; }

    /* Qualquer heading com clamp ou tamanho grande */
    [style*="font-size: clamp(32px"],
    [style*="font-size: clamp(28px"],
    [style*="font-size: clamp(24px"] {
        font-size: clamp(20px, 6cqw, 28px) !important;
    }

    /* ===== FONT SIZES FIXOS GRANDES ===== */
    [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 30px !important; }
    [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 28px !important; }
    [style*="font-size: 52px"], [style*="font-size:52px"] { font-size: 28px !important; }
    [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 28px !important; }
    [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 24px !important; }
    [style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 22px !important; }
    [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 20px !important; }

    /* ===== PADDINGS VERTICAIS ===== */
    section[style*="padding: 80px"], section[style*="padding:80px"],
    [style*="padding-top: 80px"], [style*="padding-top:80px"] { padding-top: 36px !important; padding-bottom: 36px !important; }

    section[style*="padding: 72px"], [style*="padding-top: 72px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
    section[style*="padding: 64px"], [style*="padding-top: 64px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
    section[style*="padding: 48px"] { padding-top: 24px !important; padding-bottom: 24px !important; }

    /* ===== GAPS ===== */
    [style*="gap: 48px"], [style*="gap:48px"] { gap: 20px !important; }
    [style*="gap: 40px"], [style*="gap:40px"] { gap: 18px !important; }
    [style*="gap: 32px"], [style*="gap:32px"] { gap: 16px !important; }
    [style*="gap: 28px"], [style*="gap:28px"] { gap: 14px !important; }
    [style*="gap: 24px"], [style*="gap:24px"] { gap: 14px !important; }

    /* ===== HEROES ===== */
    [style*="min-height: 600px"], [style*="min-height:600px"] { min-height: 340px !important; }
    [style*="min-height: 700px"], [style*="min-height:700px"] { min-height: 360px !important; }
    [style*="height: 80vh"], [style*="height:80vh"] { min-height: auto !important; height: auto !important; }
    [style*="height: 90vh"], [style*="height:90vh"], [style*="height: 100vh"] { min-height: auto !important; height: auto !important; }
    [style*="min-height: 80vh"] { min-height: 55vh !important; }

    /* ===== ICONES/LOGOS GRANDES ===== */
    [style*="width: 140px"][style*="height: 140px"] { width: 88px !important; height: 88px !important; }
    [style*="width: 120px"][style*="height: 120px"] { width: 80px !important; height: 80px !important; }
    [style*="width: 100px"][style*="height: 100px"] { width: 68px !important; height: 68px !important; }
    [style*="width: 80px"][style*="height: 80px"] { width: 60px !important; height: 60px !important; }
    [style*="width: 72px"][style*="height: 72px"] { width: 56px !important; height: 56px !important; }

    /* ===== IMAGENS ===== */
    img:not(.site-navbar-logo img):not([alt*="logo"]) {
        max-width: 100% !important;
    }
    section img { max-width: 100% !important; height: auto !important; }

    /* ===== MAPA iframe ===== */
    iframe[style*="height: 450px"] { height: 260px !important; }
    iframe[style*="height: 400px"] { height: 240px !important; }
    iframe[style*="height: 380px"] { height: 230px !important; }

    /* ===== MIN-HEIGHT GRANDES ===== */
    [style*="min-height: 450px"] { min-height: 260px !important; }
    [style*="min-height: 400px"] { min-height: 240px !important; }
    [style*="min-height: 380px"] { min-height: 220px !important; }

    /* ===== PADDINGS DE CARDS ===== */
    [style*="padding: 40px"], [style*="padding:40px"] { padding: 18px !important; }
    [style*="padding: 32px"], [style*="padding:32px"] { padding: 16px !important; }
    [style*="padding: 30px"], [style*="padding:30px"] { padding: 16px !important; }
    [style*="padding: 28px"], [style*="padding:28px"] { padding: 14px !important; }

    /* ===== MARGENS DE SUBTITULO ===== */
    p[style*="margin: 0 0 40px"] { margin: 0 0 16px !important; }
    p[style*="margin: 0 0 32px"] { margin: 0 0 14px !important; }

    /* ===== FOOTER ===== */
    .site-footer .ft-grid { gap: 20px 16px !important; }
    .site-footer .ft-bottom { flex-direction: column !important; text-align: center !important; }

    /* ===== PREFOOTER CTA ===== */
    .site-prefooter { padding: 28px 18px !important; }
    .site-prefooter > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    .site-prefooter h3 { font-size: 22px !important; }

    /* ===== CONTACT FORM ===== */
    form[style*="grid-template-columns: 1fr 1fr"],
    form[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* ===== SHAPE DIVIDERS =====
       Respeitamos a altura configurada pelo usuário. Se ele quer 120px, fica 120px.
       Caso a onda extrapole o bloco pai no mobile, usuário ajusta a config. */

    /* ===== STATS com ícones laterais → empilha ===== */
    [style*="gap:14px"][style*="flex-direction:row"],
    [style*="flex-direction:row-reverse"][style*="gap:14px"] {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* ===== NAVBAR: força drawer mobile no preview também ===== */
    .nav-links-desktop { display: none !important; }
    .nav-cta-desktop { display: none !important; }
    .nav-hamburger { display: inline-flex !important; }
    nav .site-navbar-inner {
        justify-content: space-between !important;
    }
    nav .nav-logo {
        position: static !important;
        transform: none !important;
        left: auto !important; top: auto !important;
        order: 1 !important;
        flex: 0 1 auto !important;
    }
    nav .site-navbar-actions { order: 3 !important; }
}

/* =================================================================
   MOBILE PEQUENO — até 420px (no container)
   ================================================================= */
@container sitepreview (max-width: 420px) {
    section { padding-left: 14px !important; padding-right: 14px !important; }
    section h1 { font-size: clamp(20px, 7cqw, 26px) !important; }
    section h2 { font-size: clamp(18px, 6cqw, 24px) !important; }

    [style*="font-size: 48px"] { font-size: 24px !important; }

    .site-btn { width: 100%; min-width: 0; text-align: center; }

    img[style*="height: 80px"] { height: 52px !important; }
    img[style*="height: 60px"] { height: 42px !important; }
}

/* =================================================================
   FALLBACK @media — para browsers sem suporte a @container (raros).
   Aplicado ao VIEWPORT apenas — no builder preview não fará nada,
   mas no site real garante funcionamento mesmo em browsers antigos.
   ================================================================= */
@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        body [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"],
        body [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
        body [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
        body [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"],
        body [style*="grid-template-columns: repeat(6, minmax(0, 1fr))"],
        body [style*="grid-template-columns: 1fr 1fr"],
        body [style*="minmax(300px"], body [style*="minmax(350px"] {
            grid-template-columns: 1fr !important;
        }
        body [class*="hero-row-"] { grid-template-columns: 1fr !important; }
        body section[style*="padding: 64px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
        body [style*="font-size: 56px"], body [style*="font-size: 48px"] { font-size: 28px !important; }
    }
}

/* =================================================================
   PREVIEW BUILDER — fallback via data-preview
   Se @container queries não funcionarem (por cache, polyfill ausente,
   ou bug do navegador), essas regras ainda disparam ao clicar nos
   toggles Mobile/Tablet do topbar do builder.
   Usa data-preview como seletor parent (não depende de container size).
   ================================================================= */

/* TABLET preview (820px) */
.sb-canvas__frame[data-preview="tablet"] [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="tablet"] [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
.sb-canvas__frame[data-preview="tablet"] [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="tablet"] [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
.sb-canvas__frame[data-preview="tablet"] [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="tablet"] [style*="grid-template-columns: repeat(6, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* MOBILE preview (390px) — regras espelho do @container (max-width: 768px) */
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: repeat(6, minmax(0, 1fr))"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: 1fr 1fr"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns:1fr 1fr"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: 280px 1fr"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: 1fr 280px"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"],
.sb-canvas__frame[data-preview="mobile"] [style*="grid-template-columns: minmax(0,1fr) minmax(0,1fr)"],
.sb-canvas__frame[data-preview="mobile"] [style*="minmax(300px"],
.sb-canvas__frame[data-preview="mobile"] [style*="minmax(320px"],
.sb-canvas__frame[data-preview="mobile"] [style*="minmax(350px"],
.sb-canvas__frame[data-preview="mobile"] [style*="minmax(400px"],
.sb-canvas__frame[data-preview="mobile"] [class*="hero-row-"],
.sb-canvas__frame[data-preview="mobile"] [class*="text-image-grid-"],
.sb-canvas__frame[data-preview="mobile"] [class*="map-side-grid-"] {
    grid-template-columns: 1fr !important;
}

.sb-canvas__frame[data-preview="mobile"] [class*="hero-text-col-"],
.sb-canvas__frame[data-preview="mobile"] [class*="hero-image-col-"] {
    order: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sb-canvas__frame[data-preview="mobile"] section h1,
.sb-canvas__frame[data-preview="mobile"] h1[style*="font-size"] { font-size: 28px !important; line-height: 1.2 !important; word-wrap: break-word; }
.sb-canvas__frame[data-preview="mobile"] section h2,
.sb-canvas__frame[data-preview="mobile"] h2[style*="font-size"] { font-size: 24px !important; line-height: 1.25 !important; word-wrap: break-word; }
.sb-canvas__frame[data-preview="mobile"] section h3,
.sb-canvas__frame[data-preview="mobile"] h3[style*="font-size"] { font-size: 20px !important; line-height: 1.3 !important; word-wrap: break-word; }

.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 64px"],
.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 56px"],
.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 52px"],
.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 48px"] { font-size: 26px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 40px"] { font-size: 22px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 36px"] { font-size: 20px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="font-size: 32px"] { font-size: 20px !important; }

.sb-canvas__frame[data-preview="mobile"] section[style*="padding: 80px"],
.sb-canvas__frame[data-preview="mobile"] [style*="padding-top: 80px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
.sb-canvas__frame[data-preview="mobile"] section[style*="padding: 72px"] { padding-top: 28px !important; padding-bottom: 28px !important; }
.sb-canvas__frame[data-preview="mobile"] section[style*="padding: 64px"] { padding-top: 28px !important; padding-bottom: 28px !important; }

.sb-canvas__frame[data-preview="mobile"] [style*="gap: 48px"] { gap: 20px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="gap: 40px"] { gap: 18px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="gap: 32px"] { gap: 16px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="gap: 24px"] { gap: 14px !important; }

.sb-canvas__frame[data-preview="mobile"] [style*="min-height: 600px"] { min-height: 340px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="min-height: 700px"] { min-height: 360px !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="height: 80vh"] { min-height: auto !important; height: auto !important; }
.sb-canvas__frame[data-preview="mobile"] [style*="height: 90vh"] { min-height: auto !important; height: auto !important; }

.sb-canvas__frame[data-preview="mobile"] section img { max-width: 100% !important; height: auto !important; }
.sb-canvas__frame[data-preview="mobile"] iframe[style*="height: 450px"] { height: 260px !important; }
.sb-canvas__frame[data-preview="mobile"] iframe[style*="height: 400px"] { height: 240px !important; }

.sb-canvas__frame[data-preview="mobile"] [style*="padding: 40px"],
.sb-canvas__frame[data-preview="mobile"] [style*="padding: 32px"],
.sb-canvas__frame[data-preview="mobile"] [style*="padding: 30px"],
.sb-canvas__frame[data-preview="mobile"] [style*="padding: 28px"] { padding: 16px !important; }

.sb-canvas__frame[data-preview="mobile"] .site-footer .ft-grid { gap: 20px 16px !important; }
.sb-canvas__frame[data-preview="mobile"] .site-footer .ft-bottom { flex-direction: column !important; text-align: center !important; }
.sb-canvas__frame[data-preview="mobile"] .site-prefooter { padding: 28px 18px !important; }
.sb-canvas__frame[data-preview="mobile"] .site-prefooter > div {
    flex-direction: column !important; text-align: center !important; gap: 16px !important;
}
.sb-canvas__frame[data-preview="mobile"] .site-prefooter h3 { font-size: 22px !important; }

.sb-canvas__frame[data-preview="mobile"] form[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

/* Shape dividers preservam a altura configurada pelo user (não reduz em mobile) */

/* Navbar preview em mobile — força drawer e logo à esquerda */
.sb-canvas__frame[data-preview="mobile"] .nav-links-desktop,
.sb-canvas__frame[data-preview="mobile"] .nav-cta-desktop { display: none !important; }
.sb-canvas__frame[data-preview="mobile"] .nav-hamburger { display: inline-flex !important; }
.sb-canvas__frame[data-preview="mobile"] nav .site-navbar-inner {
    justify-content: space-between !important;
}
.sb-canvas__frame[data-preview="mobile"] nav .nav-logo {
    position: static !important; transform: none !important;
    left: auto !important; top: auto !important;
    order: 1 !important; flex: 0 1 auto !important;
}
.sb-canvas__frame[data-preview="mobile"] nav .site-navbar-actions { order: 3 !important; }

/* =================================================================
   prefers-reduced-motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}