/* Ícones atrás do carrinho quando aberto */
@media (max-width: 991.98px) {

    body.top-cart-open .header-misc,
    body.top-cart-open .header-misc-icon,
    body.top-cart-open #primary-menu-trigger,
    body.top-cart-open .header-user-dropdown,
    body.top-cart-open .header-user-chip {
        z-index: 900 !important;
    }
}

/* =====================================================
   CORREÇÃO LAYOUT HEADER-MISC MOBILE
   .container-fluid interno tem width:100% do Bootstrap,
   o que faz .header-misc ocupar largura total no mobile
   e quebrar a linha flex (logo + misc + trigger).
   Também remove o min-height desnecessário do
   .header-row aninhado dentro de .header-misc.
===================================================== */
@media (max-width: 991.98px) {

    .header-misc .container-fluid {
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .header-misc .header-row {
        min-height: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

}

/* Z-INDEX PADRÃO PARA HEADER E MOBILE */
@media (max-width: 991.98px) {

    .primary-menu,
    .primary-menu .menu-container {
        z-index: 1000 !important;
    }

    .header-misc,
    .header-misc-icon,
    #top-search,
    #primary-menu-trigger,
    .header-user-dropdown,
    .header-user-chip {
        z-index: 1100 !important;
        position: relative;
    }

    #top-cart {
        z-index: 1200 !important;
    }

    .top-cart-content,
    .top-cart-overlay {
        z-index: 1201 !important;
    }
}

/* =====================================
   CORREÇÃO DE MARGEM MOBILE DO CONTENT
===================================== */

@media (max-width: 767px) {

    #content .container,
    #content .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}

/* =====================================
   ESPAÇO ENTRE CARDS MOBILE
===================================== */

@media (max-width: 767px) {

    .features-section .row>[class*="col-"],
    .features-focus .row>[class*="col-"],
    .focus3-section .row>[class*="col-"] {
        margin-bottom: 25px;
    }

    .features-section .row>[class*="col-"]:last-child,
    .features-focus .row>[class*="col-"]:last-child,
    .focus3-section .row>[class*="col-"]:last-child {
        margin-bottom: 0;
    }

}

/* =====================================
   MELHOR LEITURA DO TEXTO MOBILE
===================================== */

@media (max-width: 767px) {

    .features-focus .heading-block span,
    .section-highlight .lead {
        padding-left: 10px;
        padding-right: 10px;
    }

}


/* ----------------------------------------------------------------
   MODERN HEADER SYSTEM
   Light base: #f3f3f3
   Dark base: #212529
   Dynamic accent: var(--dynamic-color) for details only
-----------------------------------------------------------------*/

/* 1) DESIGN TOKENS */
:root {
    --accent: var(--dynamic-color, #24425c);

    /* Superfícies */
    --h-bg: #f3f3f3;
    --h-surface: #ffffff;
    --h-surface-soft: #f8f9fa;
    --h-text: #212529;
    --h-text-secondary: #495057;
    --h-muted: #6c757d;
    --h-border: #d8dde2;

    /* Sombras */
    --h-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.08);
    --h-shadow-md: 0 14px 36px rgba(16, 24, 40, 0.14);

    /* Raios */
    --h-radius-sm: 10px;
    --h-radius-md: 14px;
    --h-radius-pill: 999px;

    /* Header */
    --h-header-height: 88px;
    --h-header-height-sm: 80px;

    /* Timing */
    --h-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --h-base: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Footer */
    --h-footer-bg: #1f2f3b;
    --h-footer-text: #cbd5df;
    --h-footer-heading: #ffffff;
    --h-footer-link: #cbd5df;
    --h-footer-link-hover: #ffffff;
    --h-footer-social-bg: #2f4252;
    --h-footer-border: rgba(255, 255, 255, 0.08);

    /* Form section */
    --h-form-bg-start: #383838;
    --h-form-card-bg: rgba(33, 37, 41, 0.92);
    --h-form-card-border: rgba(255, 255, 255, 0.06);
    --h-form-input-bg: #2a2f34;
    --h-form-input-border: #3b434b;
    --h-form-input-text: #ffffff;
    --h-form-label: #dfe6ec;
    --h-form-placeholder: #a6b0b8;

    /* Focus3 dark card */
    --h-focus3-dark-bg: #1a1d21;
    --h-focus3-dark-border: rgba(255, 255, 255, 0.06);
    --h-focus3-dark-text: #f1f3f5;
    --h-focus3-dark-muted: rgba(255, 255, 255, 0.55);

    /* Misc */
    --h-star-color: #f5a623;
    --h-overlay-bg: rgba(7, 12, 18, 0.45);
}

html,
body {
    overflow-x: clip;
    background: var(--h-bg);
    color: var(--h-text);
}

/* ===== DARK MODE ===== */

[data-theme="dark"] {
    --h-bg: #121416;
    --h-surface: #1a1e22;
    --h-surface-soft: #16191d;
    --h-surface-alt: #252a30;
    --h-text: #e8eaed;
    --h-text-secondary: #b0b8c1;
    --h-muted: #8b939d;
    --h-border: #2e353d;

    --h-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.35);
    --h-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.50);

    /* Footer dark */
    --h-footer-bg: #0f1114;
    --h-footer-text: #8b939d;
    --h-footer-heading: #e8eaed;
    --h-footer-link: #8b939d;
    --h-footer-link-hover: #e8eaed;
    --h-footer-social-bg: #1e2328;
    --h-footer-border: rgba(255, 255, 255, 0.05);

    /* Form dark */
    --h-form-bg-start: #0f1114;
    --h-form-card-bg: rgba(26, 30, 34, 0.95);
    --h-form-card-border: rgba(255, 255, 255, 0.04);
    --h-form-input-bg: #16191d;
    --h-form-input-border: #2e353d;
    --h-form-input-text: #e8eaed;
    --h-form-label: #b0b8c1;
    --h-form-placeholder: #6b7280;

    /* Focus3 dark card (invertido: card escuro fica mais escuro) */
    --h-focus3-dark-bg: #0f1114;
    --h-focus3-dark-border: rgba(255, 255, 255, 0.04);
    --h-focus3-dark-text: #e8eaed;
    --h-focus3-dark-muted: rgba(255, 255, 255, 0.45);

    --h-overlay-bg: rgba(0, 0, 0, 0.60);
}

/* System preference fallback (only when no explicit choice) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --h-bg: #121416;
        --h-surface: #1a1e22;
        --h-surface-soft: #16191d;
        --h-surface-alt: #252a30;
        --h-text: #e8eaed;
        --h-text-secondary: #b0b8c1;
        --h-muted: #8b939d;
        --h-border: #2e353d;

        --h-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.35);
        --h-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.50);

        --h-footer-bg: #0f1114;
        --h-footer-text: #8b939d;
        --h-footer-heading: #e8eaed;
        --h-footer-link: #8b939d;
        --h-footer-link-hover: #e8eaed;
        --h-footer-social-bg: #1e2328;
        --h-footer-border: rgba(255, 255, 255, 0.05);

        --h-form-bg-start: #0f1114;
        --h-form-card-bg: rgba(26, 30, 34, 0.95);
        --h-form-card-border: rgba(255, 255, 255, 0.04);
        --h-form-input-bg: #16191d;
        --h-form-input-border: #2e353d;
        --h-form-input-text: #e8eaed;
        --h-form-label: #b0b8c1;
        --h-form-placeholder: #6b7280;

        --h-focus3-dark-bg: #0f1114;
        --h-focus3-dark-border: rgba(255, 255, 255, 0.04);
        --h-focus3-dark-text: #e8eaed;
        --h-focus3-dark-muted: rgba(255, 255, 255, 0.45);

        --h-overlay-bg: rgba(0, 0, 0, 0.60);
    }
}

/* 2) TOP BAR */
#top-bar {
    position: relative;
    z-index: 1045;
    background: color-mix(in srgb, var(--h-bg) 94%, transparent);
    border-bottom: 1px solid var(--h-border);
}

#top-bar .language-switcher {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.2rem 0;
}

#top-bar .top-links-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.10rem;
    margin: 0;
    padding: 0.35rem 0.7rem;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--h-surface) 90%, transparent);
}

#top-bar .top-links-item,
#top-bar .top-links-item::marker,
#top-bar .top-links-item::before,
#top-bar .top-links-item::after {
    list-style: none;
    content: none !important;
}

#top-bar .top-links-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    height: 2.05rem;
    padding: 0 0.75rem;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--h-fast), border-color var(--h-fast), box-shadow var(--h-fast), background-color var(--h-fast), filter var(--h-fast);
}

#top-bar .top-links-item .lang-link {
    color: var(--h-text);
    font-family: "Poppins", "Segoe UI", Tahoma, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
}

#top-bar .top-links-item a:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 44%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 7%, var(--h-surface));
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

#top-bar .top-links-item a:active {
    transform: scale(0.95);
}

#top-bar .top-links-item img {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
}

#top-bar .top-links-item .lang-link.is-active {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--accent) 78%, #000000);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, #ffffff), var(--accent));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

#top-bar .top-links-item a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, #ffffff);
    outline-offset: 2px;
}

/* 3) HEADER CORE */
#header {
    position: relative;
    background: transparent;
    border-bottom: 1px solid transparent;
}

#header-wrap {
    width: 100%;
    transition: background-color var(--h-base), border-color var(--h-base), box-shadow var(--h-base), transform var(--h-base);
}

.header-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--h-header-height);
    gap: 0.7rem;
}

.header-wrap-clone {
    display: none;
}

@media (min-width: 992px) {
    #header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 299;
        backdrop-filter: blur(9px);
        will-change: transform;
    }

    #top-bar+#header:not(.sticky-header) #header-wrap,
    .floating-header:not(.sticky-header) #header-wrap,
    body:not(.stretched) #header:not(.sticky-header) #header-wrap {
        position: absolute;
    }

    .header-wrap-clone {
        display: block;
        height: calc(var(--h-header-height) + 1px);
    }

    #header.transparent-header,
    #header.transparent-header:not(.sticky-header) #header-wrap {
        background: transparent;
        border-bottom-color: transparent;
    }

    #header.transparent-header.floating-header {
        margin-top: 54px;
    }

    .transparent-header.floating-header .container {
        background: color-mix(in srgb, var(--h-surface) 92%, transparent);
        border: 1px solid color-mix(in srgb, var(--h-border) 90%, transparent);
        border-radius: var(--h-radius-md);
        padding-left: 22px;
        padding-right: 22px;
        box-shadow: var(--h-shadow-sm);
    }

    .sticky-header #header-wrap,
    #header.hover-light #header-wrap {
        border-bottom-color: var(--h-border);
    }
}

/* 4) LOGO */
#logo {
    display: flex;
    align-items: center;
    margin-right: auto;
    order: 1;
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

#logo a {
    display: flex;
    align-items: center;
}

#logo a.standard-logo {
    display: flex !important;
}

#logo a.retina-logo {
    display: none !important;
}

#logo img {
    display: block;
    height: 70px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: height var(--h-base), opacity var(--h-base), transform var(--h-base);
}

/* Logo light/dark toggle */
#logo .logo-dark {
    display: none;
}

[data-theme="dark"] #logo .logo-light {
    display: none;
}

[data-theme="dark"] #logo .logo-dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) #logo .logo-light {
        display: none;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) #logo .logo-dark {
        display: block;
    }
}

@media (min-width: 992px) {
    .sticky-header #logo img {
        height: 56px;
    }
}

@media only screen and (min-resolution: 2dppx),
only screen and (-webkit-min-device-pixel-ratio: 2) {
    #logo a.standard-logo {
        display: none !important;
    }

    #logo a.retina-logo {
        display: flex !important;
    }
}

/* 5) HEADER MISC */
.header-misc {
    display: flex;
    align-items: center;
    margin-left: 10px;
    gap: 0.42rem;
    order: 3;
    margin-right: 0;
}

#top-search {
    position: relative;
    z-index: 30;
}

.header-misc-icon {
    margin: 0;
}

.header-misc-icon>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 1rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--h-fast), border-color var(--h-fast), background-color var(--h-fast), transform var(--h-fast), box-shadow var(--h-fast);
}

.header-misc-icon>a>i,
#top-cart-trigger>i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
    font-size: 1.02rem;
}

.header-misc-icon>a:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 8%, var(--h-surface));
    transform: none;
    box-shadow: none;
}

.header-misc-icon>a:active {
    transform: scale(0.94);
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
}

.header-user-panel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.header-user-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.header-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    min-height: 2.2rem;
    max-width: min(320px, 52vw);
    padding: 0.24rem 0.58rem 0.24rem 0.28rem;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    text-decoration: none;
    opacity: 0.88;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--h-fast), color var(--h-fast), border-color var(--h-fast), background-color var(--h-fast), transform var(--h-fast), box-shadow var(--h-fast);
}

.header-user-chip:hover {
    opacity: 1;
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 8%, var(--h-surface));
    transform: translateY(-2px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 16%, transparent);
}

.header-user-chip:active {
    transform: scale(0.97);
    opacity: 1;
}

.header-user-avatar {
    width: 1.74rem;
    height: 1.74rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--h-border) 88%, transparent);
    background: #ebeff3 url("../img/sem-foto.jpg") center center / cover no-repeat;
}

.header-user-display-name {
    display: block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    color: var(--h-text);
}

.header-user-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 190px;
    border-radius: 12px;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    z-index: 1200;
}

.header-user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.35rem;
    padding: 0.6rem 0.85rem;
    color: var(--h-text);
    text-decoration: none;
    font-size: 0.84rem;
    transition: background-color var(--h-fast), color var(--h-fast);
}

.header-user-menu-item:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--h-surface));
}

/* 6) PRIMARY MENU */
.primary-menu {
    display: flex;
    flex-grow: 1;
    align-items: center;
    order: 2;
    min-width: 0;
    justify-content: flex-end;
    overflow: visible;
}

.primary-menu-nav {
    position: inherit;
}

.menu-container {
    display: none;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    position: relative;
}

.menu-item:not(:first-child) {
    border-top: 1px solid var(--h-border);
}

.menu-link {
    display: block;
    padding: 14px 10px;
    color: var(--h-text);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: "Poppins", "Segoe UI", Tahoma, sans-serif;
    text-decoration: none;
    transition: color var(--h-fast), background-color var(--h-fast), transform var(--h-fast);
}

.menu-link div {
    line-height: 1.2;
}

.menu-link-label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.menu-link-icon {
    font-size: 0.72rem;
    line-height: 1;
    color: currentColor;
}

.menu-item:hover>.menu-link,
.menu-item.current>.menu-link {
    color: var(--accent);
}

/* Remove qualquer gatilho visual de submenu injetado pelo tema/JS */
.menu-item .sub-menu-trigger,
.menu-link div>i.icon-angle-down,
.sub-menu-container .menu-link div>i.icon-angle-down,
.side-header .primary-menu:not(.on-click) .menu-link i.icon-angle-down {
    display: none !important;
}

.mobile-submenu-toggle {
    display: none;
}

/* 7) SUB MENU */
.sub-menu-container {
    position: relative;
    margin: 0;
    padding-left: 14px;
    border-top: 0;
    list-style: none;
}

.sub-menu-container .menu-item:not(:first-child) {
    border-top: 0;
}

.menu-item.has-submenu>.menu-link::before,
.menu-item.has-submenu>.menu-link::after,
.sub-menu-container .menu-link::before,
.sub-menu-container .menu-link::after {
    content: none !important;
    display: none !important;
}

.sub-menu-container .menu-item>.menu-link {
    padding: 10px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--h-muted);
}

.sub-menu-container .menu-item:hover>.menu-link {
    color: var(--accent);
}

@media (min-width: 992px) {
    .menu-container:not(.mobile-primary-menu) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.1rem;
        justify-content: flex-end;
        width: 100%;
    }

    .menu-container>.menu-item:not(:first-child) {
        border-top: 0;
    }

    .menu-container>.menu-item {
        flex-shrink: 1;
        min-width: 0;
    }

    .menu-container>.menu-item>.menu-link {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 28px 11px;
        border-radius: var(--h-radius-pill);
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Itens com submenu não são clicáveis no desktop */
    .menu-container>.menu-item.has-submenu>.menu-link {
        cursor: default;
    }

    /* Dentro de submenus, itens com sub-submenus também não são clicáveis */
    .sub-menu-container .menu-item.has-submenu>.menu-link {
        cursor: default;
    }

    .sticky-header .menu-link {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .menu-item:hover>.menu-link,
    .menu-item.current>.menu-link {
        background: transparent;
    }

    .sub-menu-container {
        position: absolute;
        top: 100%;
        left: 0;
        width: 236px;
        padding: 0.38rem;
        border: 1px solid var(--h-border);
        border-top: 2px solid color-mix(in srgb, var(--accent) 80%, #000000);
        border-radius: var(--h-radius-sm);
        background: var(--h-surface);
        box-shadow: var(--h-shadow-md);

        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity var(--h-base), transform var(--h-base), visibility var(--h-base);
        z-index: 399;
    }

    .menu-item:hover>.sub-menu-container,
    .menu-item:focus-within>.sub-menu-container {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .sub-menu-container .menu-item>.menu-link {
        border-radius: 8px;
        color: var(--h-text);
        font-weight: 600;
        padding: 10px 12px;
        transition: background-color var(--h-fast), color var(--h-fast), padding-left var(--h-fast);
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
        text-decoration: none;
    }

    .sub-menu-container .menu-link-label {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .sub-menu-container .menu-link-icon-right {
        margin-left: auto;
    }

    .sub-menu-container .menu-item:hover>.menu-link {
        background: transparent;
        padding-left: 12px;
    }

    .sub-menu-container .sub-menu-container {
        top: -2px;
        left: 100%;
    }
}

/* 8) MENU TRIGGER */
#primary-menu-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    cursor: pointer;
    order: 4;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--h-fast), background-color var(--h-fast), transform var(--h-fast), box-shadow var(--h-fast);
}

#primary-menu-trigger:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 9%, var(--h-surface));
}

#primary-menu-trigger:active {
    transform: scale(0.96);
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
}

.svg-trigger {
    width: 28px;
    height: 28px;
}

.svg-trigger path {
    fill: none;
    stroke: var(--h-text);
    stroke-width: 5;
    stroke-linecap: round;
}

@media (min-width: 992px) {
    #primary-menu-trigger {
        display: none;
    }
}

/* 9) TOP SEARCH */
#top-search a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    z-index: 11;
}

#top-search a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
    font-size: 1.02rem;
    transform: none;
    transition: color var(--h-fast), transform var(--h-fast);
}

.top-search-open #top-search a i {
    color: color-mix(in srgb, var(--accent) 78%, #ffffff);
    transform: none;
}

.top-search-form {
    opacity: 0;
    z-index: -2;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(52vw, 640px);
    height: 54px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--h-border));
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--h-surface) 96%, transparent);
    box-shadow: var(--h-shadow-md);
    transition: opacity var(--h-base), transform var(--h-base);
    display: flex;
    align-items: center;
    padding-left: 2.35rem;
}

.top-search-form::before {
    content: "\1F50D";
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-52%);
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--accent) 58%, var(--h-muted));
    pointer-events: none;
}

.top-search-open .top-search-form {
    opacity: 1;
    z-index: 50;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
    background: color-mix(in srgb, #212529 94%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, #ffffff);
}

.top-search-open .top-search-form::before {
    color: color-mix(in srgb, #ffffff 78%, var(--accent));
}

.top-search-open .top-search-form input {
    color: #ffffff !important;
}

.top-search-open .top-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.top-search-form input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0.6rem 4.9rem 0.6rem 0.35rem;
    background: transparent !important;
    color: var(--h-text);
    font-size: clamp(1rem, 1.2vw, 1.45rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: none !important;
}

.top-search-clear,
.top-search-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--h-fast), color var(--h-fast), transform var(--h-fast);
}

.top-search-clear {
    right: 2.55rem;
    width: 1.7rem;
    height: 1.7rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1;
}

.top-search-clear:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.top-search-close {
    right: 0.45rem;
    width: 1.85rem;
    height: 1.85rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: color-mix(in srgb, var(--accent) 72%, var(--h-text));
    font-size: 1.08rem;
    line-height: 1;
}

.top-search-close:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    transform: translateY(-50%) scale(1.03);
}

.top-search-form input::placeholder {
    color: var(--h-muted);
}

/* Enquanto busca estiver aberta, esconde os menus/itens para focar no campo */
.top-search-open #logo,
.top-search-open .primary-menu,
.top-search-open #top-fav,
.top-search-open #top-cart,
.top-search-open .header-user-panel,
.top-search-open #primary-menu-trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity var(--h-fast), visibility var(--h-fast), transform var(--h-fast);
}

.top-search-open .header-misc {
    margin-left: auto;
}

/* 10) TOP CART */
#top-cart {
    position: relative;
}

#top-cart-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: color var(--h-fast), border-color var(--h-fast), background-color var(--h-fast), transform var(--h-fast);
}

#top-cart-trigger:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 8%, var(--h-surface));
    transform: none;
}

.top-cart-number {
    position: absolute;
    top: -7px;
    right: -8px;
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    line-height: 1;
    color: #ffffff;
    background: var(--accent);
}

#top-cart .top-cart-overlay {
    position: fixed;
    inset: 0;
    background: var(--h-overlay-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--h-base), visibility var(--h-base);
    z-index: 1200;
}

#top-cart .top-cart-content {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 92vw);
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    background: var(--h-surface);
    border-left: 1px solid var(--h-border);
    box-shadow: var(--h-shadow-md);
    transform: translate3d(105%, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--h-base), opacity var(--h-fast), visibility var(--h-fast);
    z-index: 1200;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#top-cart .top-cart-header,
#top-cart .top-cart-action {
    padding: 0.7rem 1rem;
    border-color: var(--h-border);
}

#top-cart .top-cart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--h-border);
    background: color-mix(in srgb, var(--h-surface-soft) 76%, var(--h-surface));
}

#top-cart .top-cart-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#top-cart .top-cart-header h4,
#top-cart .top-cart-item-desc a,
#top-cart .top-checkout-price {
    color: var(--h-text);
}

#top-cart .top-cart-selection-summary,
#top-cart .top-cart-selection-summary #top-cart-selection-value {
    color: var(--h-text);
}

#top-cart .top-cart-header h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

#top-cart .top-cart-selection-summary {
    font-size: 0.72rem;
}

#top-cart .top-cart-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.12rem;
    font-size: 0.68rem;
    color: var(--h-muted);
    user-select: none;
    cursor: pointer;
}

#top-cart .top-cart-select-all input[type="checkbox"] {
    width: 0.82rem;
    height: 0.82rem;
    accent-color: var(--accent);
    cursor: pointer;
}

#top-cart .top-cart-select-all input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

#top-cart .top-cart-close {
    width: 1.7rem;
    height: 1.7rem;
    border: 1.5px solid var(--h-border);
    border-radius: 999px;
    background: var(--h-surface);
    color: var(--h-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--h-fast), color var(--h-fast), transform var(--h-fast);
}

#top-cart .top-cart-close:hover {
    border-color: var(--h-text);
    color: var(--h-text);
    transform: scale(1.08);
}

#top-cart .top-cart-items {
    padding: 0.65rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--h-border) 50%, transparent) transparent;
}

#top-cart .top-cart-items::-webkit-scrollbar {
    width: 5px;
}

#top-cart .top-cart-items::-webkit-scrollbar-track {
    background: transparent;
}

#top-cart .top-cart-items::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--h-border) 50%, transparent);
    border-radius: 99px;
}

#top-cart .top-cart-items::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--h-border) 80%, transparent);
}

#top-cart .top-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

#top-cart .top-cart-item:not(:first-child) {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--h-border) 60%, transparent);
}

#top-cart .top-cart-item-image {
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--h-border) 70%, transparent);
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

#top-cart .top-cart-item-image a,
#top-cart .top-cart-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top-cart .top-cart-item-desc {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

#top-cart .top-cart-item-desc-title {
    min-width: 0;
}

#top-cart .top-cart-item-desc-title a {
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.25;
}

#top-cart .top-cart-item-price,
#top-cart .top-cart-item-quantity {
    color: var(--h-muted);
    font-size: 0.74rem;
}

#top-cart .top-cart-item-image:hover {
    border-color: var(--accent);
}

#top-cart .top-cart-item-desc a:hover,
#top-cart .top-cart-action .top-checkout-price {
    color: var(--accent);
}

#top-cart .top-cart-action {
    border-top: 1px solid var(--h-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--h-surface-soft) 76%, var(--h-surface));
}

#top-cart .top-cart-total-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 90px;
}

#top-cart .top-cart-total-values {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.02rem;
}

#top-cart .top-cart-total-old {
    font-size: 0.7rem;
    color: var(--h-muted);
    text-decoration: line-through;
    opacity: 0.95;
}

#top-cart #top-cart-total-value.has-discount {
    color: #16a34a;
}

#top-cart .top-cart-total-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--h-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#top-cart .top-cart-coupon-wrap {
    display: none;
    width: 100%;
    order: 3;
    margin-top: 0.2rem;
}

#top-cart .top-cart-coupon-wrap.is-visible {
    display: block;
}

#top-cart .top-cart-coupon-trigger {
    width: 100%;
    min-height: 1.7rem;
    border-radius: 8px;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 5%, var(--h-surface));
    color: color-mix(in srgb, var(--accent) 85%, var(--h-text));
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--h-fast);
}

#top-cart .top-cart-coupon-trigger:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--h-surface));
}

#top-cart .top-cart-coupon-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.38rem;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--h-border));
    border-radius: 9px;
    background: var(--h-surface);
}

#top-cart .top-cart-coupon-applied {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, #22c55e 45%, var(--h-border));
    background: color-mix(in srgb, #22c55e 12%, var(--h-surface));
    color: #15803d;
    font-size: 0.66rem;
    font-weight: 700;
}

#top-cart .top-cart-coupon-feedback {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    font-size: 0.66rem;
    font-weight: 700;
}

#top-cart .top-cart-coupon-feedback.is-error {
    border: 1px solid color-mix(in srgb, #ef4444 45%, var(--h-border));
    background: color-mix(in srgb, #ef4444 10%, var(--h-surface));
    color: #b91c1c;
}

#top-cart .top-cart-coupon-feedback.is-success {
    border: 1px solid color-mix(in srgb, #22c55e 45%, var(--h-border));
    background: color-mix(in srgb, #22c55e 12%, var(--h-surface));
    color: #15803d;
}

#top-cart .top-cart-coupon-field input {
    height: 1.7rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--h-border) 80%, transparent);
    background: var(--h-surface);
    color: var(--h-text);
    padding: 0 0.5rem;
    font-size: 0.72rem;
}

#top-cart .top-cart-coupon-field input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--h-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

#top-cart .top-cart-coupon-apply {
    min-width: 4.5rem;
    height: 1.7rem;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter var(--h-fast), box-shadow var(--h-fast);
}

#top-cart .top-cart-coupon-apply:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Botão Continuar a compra */
#top-cart .top-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
    order: 4;
    margin-top: 4px;
}

#top-cart .top-cart-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
    filter: brightness(1.08);
    color: #fff !important;
}

#top-cart .top-cart-checkout-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
}

#top-cart .top-cart-checkout-btn i {
    font-size: 0.9rem;
}

body.cart-panel-open #top-cart .top-cart-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.cart-panel-open #top-cart .top-cart-content {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Garantir que o painel do carrinho fique acima de tudo e cubra a tela inteira */
body.cart-panel-open #header-wrap {
    z-index: 99997 !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

body.cart-panel-open #top-bar {
    display: none !important;
}

body.cart-panel-open #header.transparent-header.floating-header {
    margin-top: 0 !important;
}

body.cart-panel-open {
    overflow: hidden;
}

/* Ao abrir carrinho, esconde botões fixos e elementos que atrapalham */
body.cart-panel-open .botao-flutuante-wpp,
body.cart-panel-open .botao-flutuante-wpp.luxo,
body.cart-panel-open #botao-chat,
body.cart-panel-open #chat-suporte,
body.cart-panel-open #gotoTop {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



#content .align-items-stretch>[class*="col-"]>.d-flex.flex-column {
    border: 1px solid color-mix(in srgb, var(--h-border) 88%, transparent);
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(20, 28, 36, 0.12);
    transition: transform var(--h-base), box-shadow var(--h-base), border-color var(--h-fast);
}

#content .align-items-stretch>[class*="col-"]>.d-flex.flex-column:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--h-border));
    box-shadow: 0 24px 40px color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.2));
}

#content .align-items-stretch>[class*="col-"]>.d-flex.flex-column img,
#top-cart .top-cart-item-image img,
.product-image img,
.product img {
    background: #ebeff3 url("../img/sem-foto.jpg") center center / cover no-repeat;
}

/* Grade compacta apenas para itens do carrinho */

#top-cart .row.justify-content-center.col-mb-50.align-items-stretch {
    --product-cols: 5;
    row-gap: 0.9rem;
}

#top-cart .row.justify-content-center.col-mb-50.align-items-stretch>[class*="col-"] {
    flex: 0 0 calc(100% / var(--product-cols)) !important;
    max-width: calc(100% / var(--product-cols)) !important;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}


/* Responsivo */

@media (max-width: 1199.98px) {

    #top-cart .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 4;
    }

}

@media (max-width: 991.98px) {

    #top-cart .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 3;
    }

}

@media (max-width: 767.98px) {

    #top-cart .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 2;
    }

}

@media (max-width: 575.98px) {

    #top-cart .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 1;
    }

}


#top-cart .top-cart-item {
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--h-border) 60%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--h-surface-soft) 60%, var(--h-surface));
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

#top-cart .top-cart-item:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--h-border));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

#top-cart .top-cart-item:not(:first-child) {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--h-border) 60%, transparent);
}

#top-cart .top-cart-item-image {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: #ebeff3 url("../img/sem-foto.jpg") center center / cover no-repeat;
}

#top-cart .top-cart-item-desc {
    gap: 0.35rem;
    align-items: flex-start;
}

#top-cart .top-cart-item-desc-title {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.3rem;
    row-gap: 0.15rem;
    align-items: center;
    min-width: 0;
    width: 100%;
}

/* Linha de controles: ver produto | qty | comprar agora | remover */
#top-cart .top-cart-item-desc-title>.product-view-btn,
#top-cart .top-cart-item-desc-title>.top-cart-item-actions {
    margin-top: 0;
}

#top-cart .top-cart-item-desc-title>a.fw-normal {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    line-height: 1.2;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top-cart .product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0.92rem;
    padding: 0 0.32rem;
    border-radius: 999px;
    margin: 0;
    background: color-mix(in srgb, var(--accent) 10%, var(--h-surface));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--h-border));
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    order: 2;
    align-self: center;
}

#top-cart .product-badge-hot {
    background: color-mix(in srgb, #f59e0b 12%, var(--h-surface));
    border-color: color-mix(in srgb, #f59e0b 35%, var(--h-border));
    color: #b45309;
}

#top-cart .product-price-strong {
    margin: 0;
    order: 3;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--h-text);
}

#top-cart .product-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 5;
    min-height: 1.3rem;
    width: auto;
    padding: 0.1rem 0.48rem;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: background var(--h-fast), color var(--h-fast), box-shadow var(--h-fast);
}

#top-cart .product-view-btn:hover {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* display:contents faz os filhos participarem do flex do desc-title */
#top-cart .top-cart-item-actions {
    order: 5;
    display: contents;
}

#top-cart .buy-now-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    order: 7;
    min-height: 1.3rem;
    padding: 0.04rem 0.3rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--h-border) 80%, transparent);
    background: color-mix(in srgb, var(--h-surface-soft) 88%, var(--h-surface));
    color: var(--h-text);
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

#top-cart .buy-now-checkbox {
    width: 0.7rem;
    height: 0.7rem;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}

#top-cart .quantity-stepper {
    display: inline-flex;
    align-items: center;
    order: 6;
    border: 1.5px solid var(--h-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--h-surface);
}

#top-cart .qty-btn {
    width: 1.3rem;
    height: 1.3rem;
    border: 0;
    background: transparent;
    color: var(--h-text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--h-fast);
}

#top-cart .qty-btn:hover {
    background: var(--h-surface-soft);
}

#top-cart .qty-input {
    width: 1.4rem;
    height: 1.3rem;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--h-border) 70%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--h-border) 70%, transparent);
    background: transparent;
    color: var(--h-text);
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

#top-cart .cart-remove-btn {
    margin-left: auto;
    order: 8;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid color-mix(in srgb, #ef4444 45%, var(--h-border));
    border-radius: 6px;
    background: color-mix(in srgb, #ef4444 8%, var(--h-surface));
    color: #ef4444;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--h-fast), background-color var(--h-fast), color var(--h-fast);
}

#top-cart .cart-remove-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, #ef4444 18%, var(--h-surface));
    color: #dc2626;
}

#top-cart .top-cart-item:hover .product-price-strong {
    filter: brightness(1.03);
}

#top-cart .similar-products-block {
    position: relative;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid color-mix(in srgb, var(--h-border) 50%, transparent);
}

#top-cart .similar-products-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

#top-cart .similar-products-head h5 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--h-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#top-cart .similar-products-nav {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.08rem;
    pointer-events: none;
}

#top-cart .similar-products-nav button {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: var(--h-shadow-sm);
    transition: transform var(--h-fast), background-color var(--h-fast), box-shadow var(--h-fast), border-color var(--h-fast), color var(--h-fast);
}

#top-cart .similar-products-next {
    margin-left: auto;
}

#top-cart .similar-products-nav button i {
    display: block;
    line-height: 1;
    font-size: 0.65rem;
}

#top-cart .similar-products-nav button:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 15%, transparent);
}

#top-cart .similar-products-track {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 25%, var(--h-border)) transparent;
}

#top-cart .similar-products-track::-webkit-scrollbar {
    height: 4px;
}

#top-cart .similar-products-track::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 99px;
}

#top-cart .similar-products-track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 30%, var(--h-border));
    border-radius: 99px;
}

#top-cart .similar-products-track::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 50%, var(--h-border));
}

#top-cart .similar-product-card {
    min-width: 110px;
    flex: 0 0 110px;
    scroll-snap-align: start;
    border: 1px solid color-mix(in srgb, var(--h-border) 60%, transparent);
    border-radius: 9px;
    background: var(--h-surface);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

#top-cart .similar-product-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--h-border));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

#top-cart .similar-product-thumb {
    display: block;
    width: 100%;
    height: 62px;
    background: #ebeff3 url("../img/sem-foto.jpg") center center / cover no-repeat;
}

#top-cart .similar-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#top-cart .similar-product-info {
    padding: 0.32rem 0.35rem 0.38rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

#top-cart .similar-product-name {
    font-size: 0.62rem;
    line-height: 1.25;
    color: var(--h-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top-cart .similar-product-price {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--h-text);
}

#top-cart .similar-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.4rem;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: background var(--h-fast), color var(--h-fast), box-shadow var(--h-fast);
}

#top-cart .similar-product-link:hover {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Card principal da vitrine ganha selo sutil sem mexer no HTML */
#content .row.align-items-stretch>.col-lg-4:first-child>.d-flex.flex-column {
    position: relative;
}

#content .row.align-items-stretch>.col-lg-4:first-child>.d-flex.flex-column::before {
    content: "Destaque";
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
    color: color-mix(in srgb, var(--accent) 92%, var(--h-text));
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#btn_enviar_index,
.btn.bg-color,
.button.button-dark.button-small {
    border: 0 !important;
    border-radius: var(--h-radius-sm) !important;
    background: var(--accent) !important;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: transform var(--h-fast), box-shadow var(--h-fast), filter var(--h-fast);
}

#btn_enviar_index:hover,
.btn.bg-color:hover,
.button.button-dark.button-small:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

#btn_enviar_index:active,
.btn.bg-color:active,
.button.button-dark.button-small:active {
    transform: translateY(0) scale(.98);
}

/* ================================
   FIX CARRINHO SOBRE HEADER
================================ */

#top-cart .top-cart-overlay {
    z-index: 99998 !important;
}

#top-cart .top-cart-content {
    z-index: 99999 !important;
}

/* ========================================
   ESCONDE ELEMENTOS QUANDO CARRINHO ABRE
======================================== */

body.cart-panel-open .header-misc,
body.cart-panel-open #primary-menu-trigger {
    z-index: 1 !important;
}

body.cart-panel-open #primary-menu-trigger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.cart-panel-open .botao-flutuante-wpp,
body.cart-panel-open #botao-chat,
body.cart-panel-open #chat-suporte,
body.cart-panel-open #gotoTop,
body.cart-panel-open .header-user-dropdown,
body.cart-panel-open .header-user-chip {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 12) RESPONSIVE */
@media (max-width: 1399.98px) {
    .menu-link {
        letter-spacing: 0.02em;
    }

    .menu-container>.menu-item>.menu-link {
        padding: 24px 8px;
        font-size: 0.85rem;
    }

    .menu-container:not(.mobile-primary-menu) {
        gap: 0;
    }
}

@media (max-width: 1199.98px) {
    #content .section .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 4;
    }

    #logo img {
        height: 64px;
    }

    .header-misc {
        margin-left: 6px;
    }

    .menu-container>.menu-item>.menu-link {
        padding: 22px 5px;
        font-size: 0.8rem;
    }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
    #logo img {
        height: 54px;
    }

    .menu-container>.menu-item>.menu-link {
        padding: 20px 4px;
        font-size: 0.76rem;
    }

    .header-misc {
        gap: 0.2rem;
    }
}

@media (max-width: 991.98px) {
    #content .section .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 3;
    }

    #header {
        background: color-mix(in srgb, var(--h-bg) 96%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--h-border) 60%, transparent);
    }

    #header-wrap {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .sticky-header #header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 299;
        border-bottom: 1px solid color-mix(in srgb, var(--h-border) 50%, transparent);
        box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
    }

    .sticky-header .header-wrap-clone {
        display: block;
        height: calc(var(--h-header-height-sm) + 1px);
    }

    .header-row {
        min-height: var(--h-header-height-sm);
        padding: 0 0.35rem;
        flex-wrap: nowrap;
        position: relative;
    }

    #header .container {
        overflow: visible;
    }

    .header-misc .container-fluid {
        width: auto;
        padding: 0;
    }

    .primary-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        order: 5;
        justify-content: flex-start;
        margin-top: 0;
        z-index: 300;
        padding: 0 0.5rem;
    }

    #logo {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: 55vw;
    }

    .header-misc {
        order: 3;
        margin-left: auto;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    #primary-menu-trigger {
        order: 4;
        margin-left: 0.15rem;
        flex: 0 0 auto;
    }

    .primary-menu .menu-container {
        display: none;
    }

    body.primary-menu-open .primary-menu .menu-container,
    .primary-menu-open .primary-menu .menu-container,
    .primary-menu .menu-container.d-block {
        display: block;
    }

    #logo img {
        height: 58px;
        max-width: 100%;
    }

    .menu-container {
        width: 100%;
        max-height: 62vh;
        margin: 0.5rem 0 0.65rem;
        padding: 0.35rem;
        border: 1px solid color-mix(in srgb, var(--h-border) 70%, transparent);
        border-radius: var(--h-radius-md);
        background: color-mix(in srgb, var(--h-surface) 97%, transparent);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--h-border) 60%, transparent) transparent;
    }

    .menu-container::-webkit-scrollbar {
        width: 4px;
    }

    .menu-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .menu-container::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--h-border) 60%, transparent);
        border-radius: 99px;
    }

    body.primary-menu-open .menu-container {
        animation: mobileMenuIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .menu-link {
        border-radius: var(--h-radius-sm);
        padding: 0.72rem 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        font-size: 0.88rem;
    }

    .menu-link:active {
        background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
    }

    .menu-item.has-submenu>.menu-link {
        padding-right: 0.35rem;
    }

    .mobile-submenu-toggle {
        display: none;
    }

    .menu-item.has-submenu>.menu-link .menu-link-icon-down {
        transition: transform var(--h-base);
        display: inline-block;
    }

    .menu-item.is-open>.menu-link .menu-link-icon-down {
        transform: rotate(180deg);
    }

    .menu-item:not(:first-child) {
        border-top: 1px solid color-mix(in srgb, var(--h-border) 50%, transparent);
    }

    .sub-menu-container {
        display: none;
        padding-left: 0.65rem;
        margin-top: 0.15rem;
    }

    .sub-menu-container .menu-link {
        padding: 0.55rem 0.65rem;
        font-size: 0.82rem;
    }

    .menu-item.is-open>.sub-menu-container {
        display: block !important;
        animation: subMenuFade 180ms ease;
    }

    .top-search-form input {
        font-size: 1rem;
        letter-spacing: 0.02em;
    }

    .top-search-form {
        width: min(86vw, 620px);
        right: 0;
        height: 50px;
    }

    /* User chip mobile */
    .header-user-chip {
        gap: 0.4rem;
        padding: 0.2rem 0.48rem 0.2rem 0.22rem;
    }

    .header-user-menu {
        border-radius: var(--h-radius-sm);
    }

}

@keyframes mobileMenuIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes subMenuFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767.98px) {
    #logo {
        max-width: 50vw;
    }

    #logo img {
        height: 50px;
        max-width: 100%;
    }

    #content .section .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 2;
    }

    #top-cart .similar-products-nav button {
        width: 1.6rem;
        height: 1.6rem;
    }

    #top-cart .similar-product-card {
        min-width: 95px;
        flex-basis: 95px;
    }

    #top-cart .similar-product-thumb {
        height: 55px;
    }

    #top-cart .product-price-strong {
        font-size: 0.78rem;
    }

    #top-cart .product-view-btn {
        min-height: 1.2rem;
        padding: 0.08rem 0.4rem;
        font-size: 0.56rem;
    }

    #content .align-items-stretch>[class*="col-"]>.d-flex.flex-column img {
        height: 138px;
    }

    /* Top bar compacto */
    #top-bar {
        border-bottom: none;
    }

    #top-bar .top-links-container {
        gap: 0.08rem;
        padding: 0.25rem 0.5rem;
        background: color-mix(in srgb, var(--h-surface) 80%, transparent);
    }

    #top-bar .top-links-item a {
        min-width: 1.85rem;
        height: 1.85rem;
        padding: 0 0.32rem;
        border-color: color-mix(in srgb, var(--h-border) 60%, transparent);
    }

    #top-bar .top-links-item img {
        width: 1rem;
        height: 1rem;
    }

    /* Header icons phone */
    .header-misc-icon>a {
        width: 2.1rem;
        height: 2.1rem;
        border-color: color-mix(in srgb, var(--h-border) 70%, transparent);
    }

    #primary-menu-trigger {
        width: 42px;
        height: 42px;
        border-radius: var(--h-radius-sm);
        border-color: color-mix(in srgb, var(--h-border) 70%, transparent);
    }

    .svg-trigger {
        width: 24px;
        height: 24px;
    }

    /* Menu links tighter */
    .menu-link {
        padding: 0.62rem 0.65rem;
        font-size: 0.86rem;
    }

    .menu-container {
        padding: 0.3rem;
        margin: 0.35rem 0 0.5rem;
    }
}

@media (max-width: 575.98px) {
    #content .section .row.justify-content-center.col-mb-50.align-items-stretch {
        --product-cols: 1;
    }

    #content .row.align-items-stretch>.col-lg-4:first-child>.d-flex.flex-column::before {
        top: 0.62rem;
        right: 0.62rem;
    }

    #content .align-items-stretch>[class*="col-"]>.d-flex.flex-column {
        border-radius: 12px !important;
    }

    #btn_enviar_index,
    .btn.bg-color,
    .button.button-dark.button-small {
        border-radius: var(--h-radius-sm) !important;
    }

    /* Top bar ultra-compact */
    #top-bar .language-switcher {
        padding: 0.1rem 0;
    }

    #top-bar .top-links-container {
        width: auto;
        max-width: 100%;
        justify-content: center;
        border-radius: var(--h-radius-pill);
        gap: 0.04rem;
        padding: 0.2rem 0.4rem;
    }

    #top-bar .top-links-item a {
        min-width: 1.7rem;
        height: 1.7rem;
        padding: 0 0.25rem;
    }

    #top-bar .top-links-item .lang-link {
        font-size: 0.7rem;
    }

    /* Header compact phone */
    .header-row {
        min-height: 64px;
        gap: 0.35rem;
        padding: 0 0.2rem;
    }

    #logo {
        max-width: 52vw;
    }

    #logo img {
        height: 40px;
        max-width: 100%;
        width: auto;
    }

    #logo a.standard-logo {
        display: flex !important;
    }

    #logo a.retina-logo {
        display: none !important;
    }

    /* User phone */
    .header-user-chip {
        max-width: 38vw;
        min-height: 1.9rem;
        padding: 0.18rem 0.4rem 0.18rem 0.2rem;
        gap: 0.32rem;
    }

    .header-user-display-name {
        display: none;
    }

    .header-user-avatar {
        width: 1.55rem;
        height: 1.55rem;
    }

    .header-user-menu {
        gap: 0.2rem;
        min-width: 160px;
        border-radius: var(--h-radius-sm);
    }

    .header-user-menu-item {
        min-height: 2.1rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Icons phone */
    .header-misc {
        gap: 0.25rem;
    }

    .header-misc-icon>a {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.9rem;
    }

    #top-cart-trigger {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.9rem;
    }

    .header-misc-icon>a>i,
    #top-cart-trigger>i {
        width: 0.95rem;
        height: 0.95rem;
        font-size: 0.9rem;
    }

    /* Hamburger phone */
    #primary-menu-trigger {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .svg-trigger {
        width: 22px;
        height: 22px;
    }

    /* Search fullwidth phone */
    .top-search-form {
        width: calc(100vw - 1rem);
        right: -0.15rem;
        height: 44px;
        padding-left: 2rem;
        border-radius: var(--h-radius-sm);
    }

    .top-search-clear {
        right: 2.2rem;
        width: 1.45rem;
        height: 1.45rem;
    }

    .top-search-close {
        width: 1.55rem;
        height: 1.55rem;
        right: 0.3rem;
    }

    .top-search-form::before {
        left: 0.7rem;
        font-size: 0.88rem;
    }

    /* Menu phone */
    .menu-container {
        border-radius: var(--h-radius-sm);
    }
}

/* Breakpoint extra-small */
@media (max-width: 400px) {
    #logo {
        max-width: 40vw;
    }

    #logo img {
        height: 34px;
        max-width: 100%;
        width: auto;
    }

    .header-row {
        min-height: 58px;
        gap: 0.25rem;
    }

    .header-misc {
        gap: 0.15rem;
    }

    .header-misc-icon>a {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
    }

    #top-cart-trigger {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
    }

    #primary-menu-trigger {
        width: 34px;
        height: 34px;
    }

    .svg-trigger {
        width: 20px;
        height: 20px;
    }

    #top-bar .top-links-item a {
        min-width: 1.55rem;
        height: 1.55rem;
        padding: 0 0.18rem;
    }

    #top-bar .top-links-item img {
        width: 0.9rem;
        height: 0.9rem;
    }

    .top-search-form {
        height: 40px;
    }
}

/* Slider Header Custom */
/* SLIDER FULLSCREEN */
#slider {
    height: 100vh;
    margin-top: -150px;
    position: relative;
    overflow: hidden;
}

/* HEADER NA FRENTE */
#header {
    position: relative;
    z-index: 1000;
}

/* IMAGEM */
#slider .swiper-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;

    /* melhora nitidez da imagem */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* GRADIENTE SUAVE */
#slider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0));
    z-index: 2;
}

/* TEXTO */
#slider .slider-caption {
    position: relative;
    z-index: 3;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#slider h2 {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    animation: fadeUp 1.2s ease;
    position: relative;
    z-index: 4;
}

#slider p {
    color: #ffffff;
    font-size: 1.5rem;
    max-width: 700px;
    margin-top: 10px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    animation: fadeUp 1.6s ease;
    position: relative;
    z-index: 4;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TITULO */
.section-highlight h1 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* TEXTO */
.section-highlight .lead {
    font-size: 1.15rem;
    color: #6c757d;
    line-height: 1.7;
}

/* CONTAINER DA IMAGEM */
.image-wrapper {
    border-radius: 12px;
}

/* IMAGEM PRINCIPAL */
.img-main {
    width: 100%;
    height: auto;
    display: block;
}

/* IMAGEM OVERLAY */
.img-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* RESPONSIVO */
@media (max-width:991px) {

    .section-highlight {
        padding: 80px 0;
        text-align: center;
    }

    .section-highlight h1 {
        font-size: 2.2rem;
    }

}



/* card 3 icones */
/* SEÇÃO */
.features-section {
    padding: 100px 0;
}

/* CARD */
.feature-card {
    background: var(--accent);
    padding: 40px 30px;
    border-radius: 16px;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease;
    position: relative;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

/* HOVER */
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* ÍCONE */
.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 26px;
    color: #ffffff;
    transition: all .3s ease;
}

.feature-icon i {
    color: #ffffff !important;
}

/* HOVER DO ICONE */
.feature-card:hover .feature-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
}

/* SUBTITULO */
.feature-card .before-heading {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* TITULO */
.feature-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 18px;
    color: #ffffff;
    position: relative;
}

/* LINHA ANIMADA */
.feature-card h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background: #ffffff;
    transition: width .35s ease;
}

.feature-card:hover h4::after {
    width: 70px;
}

/* TEXTO */
.feature-card p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* RESPONSIVO */
@media (max-width: 991px) {

    .features-section {
        padding: 80px 0;
    }

    /* centraliza conteúdo */
    .feature-card {
        text-align: center;
    }

    .feature-card h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* espaço entre cards */
    .features-section .row>[class*="col-"] {
        margin-bottom: 25px;
    }

    .features-section .row>[class*="col-"]:last-child {
        margin-bottom: 0;
    }

}


/**********************************
 Nosso foco
 *********************************/

/* ===== SECTION ===== */

.features-focus {
    padding: 10px 0;
}

/* ===== TITULO CENTRAL ===== */

.features-focus .heading-block {
    text-align: center;
    margin-bottom: 48px;
}

.features-focus .heading-block h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: var(--h-text);
}

.features-focus .heading-block h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--accent);
    margin: 16px auto 0;
    border-radius: var(--h-radius-pill);
    opacity: .85;
}

/* SUBTITULO */
.features-focus .heading-block span {
    font-size: 16px;
    color: var(--h-muted);
    max-width: 600px;
    margin: auto;
    display: block;
    line-height: 1.65;
}

/* ===== GRID ===== */

.features-focus .row {
    align-items: center;
}

/* ===== CARD ===== */

.features-focus .feature-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--h-surface);
    padding: 22px 24px;
    border-radius: var(--h-radius-md);
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--h-border) 50%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        transform var(--h-base) ease,
        box-shadow var(--h-base) ease,
        border-color var(--h-base) ease;
}

.features-focus .feature-box:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--h-border));
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--accent) 6%, rgba(0, 0, 0, 0.06)),
        0 1px 3px rgba(0, 0, 0, 0.03);
}

/* ===== ICON ===== */

.features-focus .fbox-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--h-radius-sm);
    background: color-mix(in srgb, var(--accent) 8%, var(--h-surface-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--accent);
    transition:
        background var(--h-base) ease,
        color var(--h-fast) ease,
        transform var(--h-base) ease;
}

/* gap cuida do espaçamento — zera margins legados */
.features-focus .feature-box .fbox-icon {
    margin: 0;
}

.features-focus .feature-box.flex-md-row-reverse .fbox-icon {
    margin: 0;
}

.features-focus .feature-box:hover .fbox-icon {
    background: color-mix(in srgb, var(--accent) 14%, var(--h-surface-soft));
    transform: scale(1.05);
}

/* ===== CONTEÚDO ===== */

.features-focus .fbox-content {
    flex: 1;
    min-width: 0;
}

.features-focus .fbox-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--h-text);
    letter-spacing: -0.01em;
}

.features-focus .fbox-content p {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.6;
    margin: 0;
}

/* ===== IMAGEM CENTRAL ===== */

.focus-image {
    max-width: 320px;
    margin: auto;
    display: block;
    animation: focusFloat 5s ease-in-out infinite;
}

@keyframes focusFloat {

    0%,
    100% {
        transform: translateY(0);
        filter: blur(0px);
    }

    50% {
        transform: translateY(-10px);
        filter: blur(2.5px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ===== CENTRALIZAR IMAGEM COM CARDS ===== */

.features-focus .col-lg-4.text-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 991px) {
    .features-focus {
        padding: 60px 0;
    }

    .features-focus .heading-block {
        margin-bottom: 36px;
    }

    .features-focus .feature-box {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .features-focus .heading-block h2 {
        font-size: 30px;
    }
}

@media (max-width: 575.98px) {
    .features-focus .heading-block h2 {
        font-size: 26px;
    }

    .features-focus .feature-box {
        padding: 18px 18px;
    }
}

/* ===== #CONTENT FEATURE-BOX (geral) ===== */

#content .feature-box {
    padding: 0.72rem 0.68rem;
    transition:
        transform var(--h-base) ease,
        border-color var(--h-base) ease,
        box-shadow var(--h-base) ease;
}

#content .feature-box:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--h-border));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 10%, rgba(0, 0, 0, 0.10));
}

#content .feature-box .fbox-icon i {
    width: 44px;
    height: 44px;
    border-radius: var(--h-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/**********************************
 SEÇÃO 3 CARDS PREMIUM
 *********************************/

/* ===== SECTION ===== */

.focus3-section {
    padding: 48px 0;
    position: relative;
}

.focus3-section .row {
    row-gap: 28px;
}

/* ===== CARD BASE ===== */

.focus3-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    padding: 36px 34px;
    border-radius: var(--h-radius-md);
    overflow: hidden;
    height: 100%;
    transition:
        transform var(--h-base) ease,
        box-shadow var(--h-base) ease,
        border-color var(--h-base) ease;
}

/* ===== CARD CLARO ===== */

.focus3-light {
    background: var(--h-surface);
    border: 1px solid color-mix(in srgb, var(--h-border) 60%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.focus3-light:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--h-border));
    box-shadow:
        0 12px 32px color-mix(in srgb, var(--accent) 6%, rgba(0, 0, 0, 0.07)),
        0 2px 6px rgba(0, 0, 0, 0.03);
}

/* ===== CARD ESCURO ===== */

.focus3-dark {
    background: var(--h-focus3-dark-bg);
    border: 1px solid var(--h-focus3-dark-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.focus3-dark:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--h-focus3-dark-border));
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.25),
        0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ===== BADGE ===== */

.focus3-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: var(--h-radius-sm);
    margin-bottom: 22px;
    display: inline-block;
    width: fit-content;
    text-transform: uppercase;
}

.focus3-badge-danger {
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface-soft));
    color: var(--accent);
}

.focus3-badge-dark {
    background: color-mix(in srgb, var(--h-focus3-dark-text) 10%, transparent);
    color: color-mix(in srgb, var(--h-focus3-dark-text) 70%, transparent);
}

/* ===== TITULO ===== */

.focus3-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--h-text);
}

.focus3-dark h3 {
    color: var(--h-focus3-dark-text);
}

/* ===== TEXTO ===== */

.focus3-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--h-muted);
}

.focus3-dark p {
    color: var(--h-focus3-dark-muted);
}

.focus3-small {
    font-size: 13px;
    line-height: 1.6;
}

/* ===== IMAGEM ===== */

.focus3-card img {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
    margin-top: auto;
    padding-top: 24px;
    border-radius: var(--h-radius-sm);
    transition: transform var(--h-base) ease;
    animation: focus3Float 5s ease-in-out infinite;
}

.focus3-card:hover img {
    transform: scale(1.04);
}

@keyframes focus3Float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ===== RESPONSIVO ===== */

@media (max-width: 991px) {
    .focus3-section {
        padding: 60px 0;
    }

    .focus3-card {
        padding: 28px 26px;
        min-height: 400px;
    }

    .focus3-card h3 {
        font-size: 21px;
    }
}

@media (max-width: 575.98px) {
    .focus3-card {
        padding: 24px 20px;
        min-height: auto;
    }

    .focus3-card h3 {
        font-size: 19px;
    }

    .focus3-card p {
        font-size: 14px;
    }
}


/* formulario */
/* =================================================
   FORM SECTION
================================================= */

/* ── Index Form Section (.idx-form-) ── */
.idx-form-section {
    padding: 88px 0;
    background: var(--h-bg);
}

.idx-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.idx-form-header-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.idx-form-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 10px;
}

.idx-form-header p {
    color: var(--h-text-secondary);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.idx-form-card {
    max-width: 780px;
    margin: 0 auto;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 40px;
}

.idx-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.idx-form-group {
    margin-bottom: 16px;
    position: relative;
}

.idx-form-row .idx-form-group {
    margin-bottom: 0;
}

.idx-form-group label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 6px;
}

.idx-form-group label i {
    color: var(--accent);
    font-size: .78rem;
    margin-right: 2px;
}

.idx-form-group label span {
    color: #ef4444;
    font-weight: 400;
}

.idx-form-group input,
.idx-form-group textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--h-radius-sm);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .92rem;
    font-family: inherit;
    transition: border-color .25s ease, box-shadow .25s ease;
    -webkit-appearance: none;
}

.idx-form-group input::placeholder,
.idx-form-group textarea::placeholder {
    color: var(--h-muted);
    opacity: .65;
}

.idx-form-group input:focus,
.idx-form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.idx-form-group textarea {
    resize: vertical;
    min-height: 120px;
    max-height: 300px;
}

/* Phone row (DDD + número) */
.idx-form-phone {
    display: flex;
    gap: 10px;
}

.idx-form-ddd {
    max-width: 80px;
    text-align: center;
}

.idx-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.idx-form-privacy {
    font-size: .78rem;
    color: var(--h-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.idx-form-privacy i {
    color: #16a34a;
}

.idx-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 34px;
    border-radius: var(--h-radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s ease;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.idx-form-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
    filter: brightness(1.08);
}

.idx-form-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}


/* =================================================
   RESPONSIVO
================================================= */

@media(max-width:768px) {
    .idx-form-section {
        padding: 56px 0;
    }

    .idx-form-card {
        padding: 24px;
    }

    .idx-form-header h2 {
        font-size: 1.55rem;
    }

    .idx-form-row {
        grid-template-columns: 1fr;
    }

    .idx-form-footer {
        flex-direction: column;
        text-align: center;
    }

    .idx-form-btn {
        width: 100%;
    }
}

/* ================================
   CLIENTS SECTION
================================ */

.clients-section {
    padding: 90px 0;
    background: var(--h-surface-soft);
}

.clients-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 60px;
    color: var(--accent);
}

.clients-carousel {
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    margin: auto;
}


/* ================================
FADE LATERAIS (APPLE STYLE)
================================ */

.clients-fade-left,
.clients-fade-right {
    position: absolute;
    top: 0;
    width: 140px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.clients-fade-left {
    left: 0;
    background: linear-gradient(to right,
            var(--h-surface-soft) 0%,
            color-mix(in srgb, var(--h-surface-soft) 95%, transparent) 30%,
            transparent 100%);
}

.clients-fade-right {
    right: 0;
    background: linear-gradient(to left,
            var(--h-surface-soft) 0%,
            color-mix(in srgb, var(--h-surface-soft) 95%, transparent) 30%,
            transparent 100%);
}

.clients-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    width: max-content;
    animation: clientsScroll var(--clients-speed, 40s) linear infinite;
}

.clients-carousel:hover .clients-track {
    animation-play-state: paused;
}

/* ITEM */
.client-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 14px;
    padding: 14px;
    background: transparent;
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background .35s ease;
}

.client-item img {
    width: 120px;
    height: 50px;
    object-fit: contain;
    filter: grayscale(100%) brightness(.85) opacity(.7);
    transition: all .45s ease;
}

/* HOVER */
.client-item:hover {
    transform: translateY(-6px) scale(1.08);
    background: color-mix(in srgb, var(--h-surface-soft) 92%, var(--h-border));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .08),
        0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
}

.client-item:hover img {
    filter: grayscale(0%) brightness(1) opacity(1);
}

.client-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    transition: .45s;
}

.client-item:hover::after {
    opacity: 1;
    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, .35),
        0 0 20px color-mix(in srgb, var(--accent) 25%, transparent);
}


/* ================================
ENTRADA SUAVE
================================ */

@keyframes logoFade {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes clientsScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media(max-width:768px) {
    .clients-track {
        gap: 40px;
        animation-duration: 30s;
    }

    .client-item {
        width: 130px;
        height: 70px;
    }

    .client-item img {
        width: 90px;
        height: 40px;
    }
}

/* =================================
   TESTIMONIALS SECTION
================================ */

.testimonials-section {
    padding: 120px 0;
    background: var(--h-surface-soft);
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: all .8s ease;
}

.testimonials-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.testimonials-title {
    font-size: 38px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}

.testimonials-sub {
    color: var(--h-muted);
    margin-bottom: 8px;
}

.testimonials-count {
    font-weight: 600;
    margin-bottom: 60px;
}

.testimonials-carousel {
    position: relative;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

.testi-fade-left,
.testi-fade-right {
    position: absolute;
    top: 0;
    width: 180px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.testi-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--h-surface-soft), transparent);
}

.testi-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--h-surface-soft), transparent);

}


/* track */

.testi-track {
    display: flex;
    align-items: center;
    gap: 40px;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

/* CARD */
.testi-card {
    min-width: 360px;
    background: var(--h-surface);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
    transition:
        transform .6s ease,
        filter .6s ease,
        opacity .6s ease;
}

.testi-card.active {
    transform: scale(1.08);
    z-index: 2;
}

.testi-card.side {
    transform: scale(.85);
    filter: blur(2px);
    opacity: .6;
}

/* PARALLAX */
.testi-card.active .testi-avatar {
    transform: translateY(-4px);
    transition: transform .6s ease;
}

.testi-card.active .testi-text {
    transform: translateY(3px);
    transition: transform .6s ease;
}

.testi-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.testi-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
}

.testi-company {
    color: var(--h-muted);
    margin-bottom: 10px;
}


/* =================================
ESTRELAS ANIMADAS
================================ */

.testi-stars {
    color: var(--h-star-color);
    font-size: 18px;
    margin-bottom: 16px;
    opacity: 0;
    transform: scale(.8);
    animation: starFade .8s forwards;
}

@keyframes starFade {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.testi-text {
    color: var(--h-text);
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.85;
}

.testi-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--h-surface-soft) 92%, var(--h-border));
    color: var(--accent);
    text-decoration: none;
    transition: .3s;
}

.testi-btn:hover {
    background: var(--accent);
    color: #ffffff;
}


/* CONTROLES */
.testi-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

.testimonials-carousel:hover .testi-controls {
    opacity: 1;
}

.testi-controls button {
    pointer-events: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    background: var(--accent);
    backdrop-filter: blur(12px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s ease;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.testi-controls button:hover {
    transform: scale(1.12);
    background: var(--h-surface);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, .18),
        0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--accent);
}

@media (max-width:768px) {
    .testi-controls {
        opacity: 1;
    }
}

/* PROGRESS BAR */
.testi-progress {
    width: 220px;
    height: 4px;
    background: color-mix(in srgb, var(--h-border) 50%, transparent);
    border-radius: 4px;
    margin: 40px auto 0;
    overflow: hidden;
}

.testi-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width linear;
    animation-play-state: running;
}

@media(max-width:768px) {
    .testi-card {
        min-width: 280px;
    }
}

/* =================================
   FOOTER
================================ */

.site-footer {
    background: var(--h-footer-bg);
    color: var(--h-footer-text);
    padding-top: 70px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    padding-bottom: 50px;
}

.footer-col h4 {
    color: var(--h-footer-heading);
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--h-footer-link);
    text-decoration: none;
    transition: color .3s;
}

.footer-col ul li a:hover {
    color: var(--h-footer-link-hover);
}

.footer-col p {
    color: var(--h-footer-text);
    line-height: 1.6;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    max-width: calc(4 * 36px + 3 * 10px); /* 4 ícones por linha */
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--h-footer-social-bg);
    color: var(--h-footer-heading);
    transition: background .3s, transform .3s;
}

.footer-social a:hover {
    background: var(--accent);
    transform: translateY(-3px);
}

/* ─── Newsletter no rodapé ───────────────────────────────── */
.footer-nl-mini {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}

.footer-nl-mini input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #f3f4f6;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}

.footer-nl-mini input[type="email"]::placeholder {
    color: #6b7280;
}

.footer-nl-mini input[type="email"]:focus {
    border-color: var(--accent, #6366f1);
}

.footer-nl-mini button {
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 6px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: opacity .2s;
}

.footer-nl-mini button:hover {
    opacity: .85;
}

.footer-nl-mini button.is-subscribed {
    background: #16a34a;
    cursor: default;
}

.footer-nl-mini button:disabled {
    cursor: not-allowed;
}

.footer-payments {
    border-top: 1px solid var(--h-footer-border);
    padding: 25px 0;
    text-align: center;
}

.footer-payments ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
}

.footer-payments img {
    height: 26px;
    opacity: .8;
}

.footer-bottom {
    border-top: 1px solid var(--h-footer-border);
    padding: 20px 0;
    font-size: 14px;
}

.footer-bottom-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom a {
    color: var(--h-footer-link-hover);
    text-decoration: none;
}

@media(max-width:900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom-grid {
        flex-direction: column;
    }
}

/* =================================
   THEME TOGGLE BUTTON
================================ */

.footer-theme-toggle-wrap {
    margin-top: 14px;
    list-style: none;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--h-footer-border);
    border-radius: 50%;
    background: var(--h-footer-social-bg);
    color: var(--h-footer-text);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--h-fast), color var(--h-fast), transform var(--h-fast), border-color var(--h-fast);
}

.theme-toggle-btn:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Ícones controlados via JS — esconde todos por padrão */
.theme-toggle-btn i {
    display: none;
}

/* Fallback: mostra system se JS não rodou ainda */
.theme-icon-system {
    display: inline;
}


/* =====================================
   SHOP PREVIEW SECTION
===================================== */

.shop-preview-section {
    padding: 80px 0 90px;
    background: var(--h-bg);
}

.shop-preview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 20px;
}

.shop-preview-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.shop-preview-sub {
    font-size: 15px;
    color: var(--h-muted);
    margin: 0;
}

.shop-preview-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 20px;
    border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--h-radius-pill);
    transition: all var(--h-base);
}

.shop-preview-cta:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
}

.shop-preview-cta i {
    font-size: 12px;
    transition: transform var(--h-fast);
}

.shop-preview-cta:hover i {
    transform: translateX(3px);
}

/* -- Carousel Wrapper -- */

.shop-carousel-wrap {
    position: relative;
    margin-bottom: 56px;
}

.shop-bestsellers .shop-carousel-wrap {
    margin-bottom: 0;
}

.shop-carousel-viewport {
    overflow: hidden;
    border-radius: var(--h-radius-md);
}

.shop-carousel-track {
    display: flex;
    gap: 16px;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

/* Nav Buttons */
.shop-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: var(--h-shadow-sm);
    transition: all var(--h-base);
    opacity: 1;
}

.shop-carousel-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.shop-carousel-btn[hidden] {
    opacity: 0;
    pointer-events: none;
}

.shop-carousel-prev {
    left: -21px;
}

.shop-carousel-next {
    right: -21px;
}

/* -- Categories inside carousel -- */

.shop-categories-track .shop-cat-card {
    flex: 0 0 calc((100% - 80px) / 6);
    min-width: 140px;
}

.shop-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 0;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    text-decoration: none;
    overflow: hidden;
    transition: all var(--h-base);
}

.shop-cat-card:hover {
    border-color: var(--accent);
    box-shadow: var(--h-shadow-md);
    transform: translateY(-5px);
}

/* Label above image */
.shop-cat-label {
    width: 100%;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.shop-cat-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
    line-height: 1.3;
    transition: color var(--h-fast);
}

.shop-cat-card:hover .shop-cat-name {
    color: var(--accent);
}

.shop-cat-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--h-muted);
    letter-spacing: 0.02em;
}

/* Image */
.shop-cat-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--h-surface-soft);
}

.shop-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.shop-cat-card:hover .shop-cat-img img {
    transform: scale(1.08);
}

/* -- Bestsellers -- */

.shop-bestsellers {
    margin-top: 0;
}

.shop-bestsellers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.shop-bestsellers-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-bestsellers-title i {
    color: #ef4444;
    font-size: 18px;
}

.shop-bestsellers-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--h-fast);
}

.shop-bestsellers-link:hover {
    color: var(--accent);
}

.shop-bestsellers-link i {
    font-size: 10px;
    transition: transform var(--h-fast);
}

.shop-bestsellers-link:hover i {
    transform: translateX(3px);
}

/* -- Products inside carousel -- */

.shop-products-track .shop-product-card {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 220px;
}

.shop-product-card {
    position: relative;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    transition: all var(--h-base);
}

.shop-product-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: var(--h-shadow-md);
    transform: translateY(-4px);
}

/* Badge */
.shop-product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--h-radius-pill);
    color: #fff;
    text-transform: uppercase;
}

.badge-hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.badge-new {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #000));
}

.badge-sale {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Thumb */
.shop-product-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--h-surface-soft);
}

.shop-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.shop-product-card:hover .shop-product-thumb img {
    transform: scale(1.06);
}

/* Info */
.shop-product-info {
    padding: 16px 18px 20px;
}

.shop-product-cat {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 6px;
    display: block;
}

.shop-product-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text);
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--h-fast);
}

.shop-product-name:hover {
    color: var(--accent);
}

/* Rating */
.shop-product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.shop-stars {
    color: var(--h-star-color);
    font-size: 13px;
    letter-spacing: 1px;
}

.shop-reviews {
    font-size: 12px;
    color: var(--h-muted);
}

/* Prices */
.shop-product-prices {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.shop-price-old {
    font-size: 13px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.shop-price-current {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text);
}

/* Add to cart */
.shop-add-cart {
    width: 100%;
    padding: 10px 0;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: transparent;
    color: var(--h-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--h-base);
}

.shop-add-cart:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.shop-add-cart i {
    font-size: 14px;
}

/* -- Responsive -- */

@media (max-width: 1199.98px) {
    .shop-categories-track .shop-cat-card {
        flex: 0 0 calc((100% - 48px) / 4);
    }

    .shop-products-track .shop-product-card {
        flex: 0 0 calc((100% - 40px) / 3);
    }
}

@media (max-width: 991.98px) {
    .shop-carousel-prev {
        left: -16px;
    }

    .shop-carousel-next {
        right: -16px;
    }

    .shop-carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

@media (max-width: 767.98px) {
    .shop-preview-section {
        padding: 50px 0 60px;
    }

    .shop-preview-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 28px;
    }

    .shop-preview-title {
        font-size: 26px;
    }

    .shop-categories-track .shop-cat-card {
        flex: 0 0 calc((100% - 20px) / 3);
        min-width: 110px;
    }

    .shop-cat-label {
        padding: 12px 8px 10px;
    }

    .shop-cat-name {
        font-size: 12px;
    }

    .shop-cat-count {
        font-size: 10px;
    }

    .shop-products-track .shop-product-card {
        flex: 0 0 calc((100% - 12px) / 2);
        min-width: 160px;
    }

    .shop-carousel-track {
        gap: 12px;
    }

    .shop-product-info {
        padding: 12px 12px 16px;
    }

    .shop-product-name {
        font-size: 13px;
    }

    .shop-price-current {
        font-size: 16px;
    }

    .shop-bestsellers-title {
        font-size: 18px;
    }

    .shop-carousel-prev {
        left: -10px;
    }

    .shop-carousel-next {
        right: -10px;
    }

    .shop-carousel-btn {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .shop-categories-track .shop-cat-card {
        flex: 0 0 calc((100% - 10px) / 2.3);
        min-width: 120px;
    }

    .shop-products-track .shop-product-card {
        flex: 0 0 75%;
    }
}


/* =================================================================
   LOJA PAGE
   Complete shop page — hero, categories, filters, products, combos
================================================================= */

/* -- HERO -- */

.loja-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--h-muted);
}

.loja-breadcrumb a {
    color: var(--h-muted);
    text-decoration: none;
    transition: color var(--h-fast);
}

.loja-breadcrumb a:hover {
    color: var(--accent);
}

.loja-breadcrumb i {
    font-size: 9px;
    opacity: 0.5;
}

.loja-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
}

.loja-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.loja-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.loja-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.loja-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.loja-hero .blog-breadcrumb,
.loja-hero .blog-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.loja-hero .blog-breadcrumb a:hover {
    color: #fff;
}

.loja-hero .blog-breadcrumb i {
    opacity: .35;
}

.loja-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.loja-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loja-hero-sub {
    max-width: 600px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.loja-hero-search {
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--h-radius-pill);
    padding: 6px 6px 6px 20px;
    backdrop-filter: blur(8px);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.loja-hero-search:focus-within {
    border-color: rgba(255, 255, 255, .4);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}

.loja-hero-search i {
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    margin-right: 12px;
    flex-shrink: 0;
}

.loja-hero-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #fff;
    font-family: inherit;
}

.loja-hero-search input::placeholder {
    color: rgba(255, 255, 255, .45);
}

#loja-search-btn {
    flex-shrink: 0;
    padding: 10px 24px;
    background: #fff;
    color: var(--accent);
    border: none;
    border-radius: var(--h-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
}

#loja-search-btn:hover {
    background: rgba(255, 255, 255, .9);
    transform: translateY(-1px);
}

/* -- LOJA MAIN -- */

.loja-main {
    padding: 0 0 80px;
    background: var(--h-bg);
}

.loja-main>.container>div {
    margin-bottom: 60px;
}

.loja-main>.container>div:last-child {
    margin-bottom: 0;
}

/* -- Section heads -- */

.loja-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.loja-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.loja-section-title i {
    color: var(--accent);
    font-size: 20px;
}

.loja-ver-todas {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color var(--h-fast);
}

.loja-ver-todas:hover {
    color: var(--accent);
}

.loja-ver-todas i {
    font-size: 10px;
    transition: transform var(--h-fast);
}

.loja-ver-todas:hover i {
    transform: translateX(3px);
}

/* -- CAROUSEL GENÉRICO LOJA -- */

.loja-cat-carousel,
.loja-carousel-large {
    position: relative;
    padding: 0 28px;
}

.loja-carousel-viewport {
    overflow: hidden;
    border-radius: var(--h-radius-md);
}

.loja-carousel-track {
    display: flex;
    gap: 16px;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
    cursor: grab;
}

.loja-carousel-track:active {
    cursor: grabbing;
}

.loja-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--h-shadow-sm);
    transition: all var(--h-fast);
}

.loja-carousel-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.loja-carousel-btn[hidden] {
    display: none;
}

.loja-carousel-prev {
    left: -2px;
}

.loja-carousel-next {
    right: -2px;
}

/* -- CATEGORIAS LOJA -- */

.loja-categorias-destaque {
    padding-top: 50px;
}

.loja-cat-track .loja-cat-card {
    flex: 0 0 calc((100% - 112px) / 8);
    min-width: 130px;
}

.loja-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    text-decoration: none;
    overflow: hidden;
    transition: all var(--h-base);
}

.loja-cat-card:hover {
    border-color: var(--accent);
    box-shadow: var(--h-shadow-md);
    transform: translateY(-5px);
}

.loja-cat-label {
    width: 100%;
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.loja-cat-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--h-text);
    line-height: 1.3;
    transition: color var(--h-fast);
}

.loja-cat-card:hover .loja-cat-name {
    color: var(--accent);
}

.loja-cat-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--h-muted);
}

.loja-cat-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--h-surface-soft);
}

.loja-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.loja-cat-card:hover .loja-cat-img img {
    transform: scale(1.08);
}

/* -- BANNER PROMO -- */

.loja-promo-carousel {
    position: relative;
    margin: 0 0 42px;
    border-radius: var(--h-radius-md);
    overflow: hidden;
    box-shadow: var(--h-shadow-md);
}

.loja-promo-viewport {
    overflow: hidden;
    border-radius: inherit;
}

.loja-promo-track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.loja-promo-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.loja-promo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 16, 24, 0.78) 0%, rgba(10, 16, 24, 0.54) 38%, rgba(10, 16, 24, 0.22) 100%);
}

.loja-promo-banner {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 52px;
    position: relative;
    color: #fff;
}

.loja-promo-content {
    max-width: 60%;
    position: relative;
    z-index: 1;
}

.loja-promo-tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--h-radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
    backdrop-filter: blur(4px);
}

.loja-promo-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.loja-promo-desc {
    font-size: 15px;
    opacity: 0.85;
    margin: 0 0 22px;
    line-height: 1.5;
}

.loja-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #fff;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--h-radius-pill);
    text-decoration: none;
    transition: all var(--h-base);
}

.loja-promo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.loja-promo-btn i {
    font-size: 12px;
    transition: transform var(--h-fast);
}

.loja-promo-btn:hover i {
    transform: translateX(3px);
}

.loja-promo-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.loja-promo-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

.loja-promo-percent {
    position: absolute;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.loja-promo-percent small {
    font-size: 28px;
    vertical-align: super;
}

.loja-promo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    backdrop-filter: blur(6px);
    transition: all var(--h-fast);
}

.loja-promo-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}

.loja-promo-prev {
    left: 18px;
}

.loja-promo-next {
    right: 18px;
}

.loja-promo-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.loja-promo-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    transition: all var(--h-fast);
}

.loja-promo-dot.active {
    width: 28px;
    border-radius: 999px;
    background: #fff;
}

/* -- PRODUTO CARD (usado em toda a loja) -- */

.loja-produto-card {
    position: relative;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    transition: all var(--h-base);
}

.loja-produto-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: var(--h-shadow-md);
    transform: translateY(-4px);
}

/* Badges */
.loja-produto-badges {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    padding: 0 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.loja-badge {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--h-radius-pill);
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}

.loja-badge-sale {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.loja-badge-novo {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #000));
}

.loja-badge-destaque {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.loja-badge-mais-vendido {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.loja-badge-promo {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.loja-badge-ultimos-dias {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

/* Thumb */
.loja-produto-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--h-surface-soft);
    position: relative;
}

.loja-produto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.loja-produto-card:hover .loja-produto-thumb img {
    transform: scale(1.06);
}

/* Quick actions on hover */
.loja-thumb-actions {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: all var(--h-base);
}

.loja-produto-card:hover .loja-thumb-actions {
    opacity: 1;
    transform: translateX(0);
}

.loja-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all var(--h-fast);
}

.loja-action-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
}

/* Info */
.loja-produto-info {
    padding: 16px 18px 20px;
}

.loja-produto-cat {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: 6px;
    display: block;
}

.loja-produto-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text);
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--h-fast);
}

.loja-produto-name:hover {
    color: var(--accent);
}

.loja-produto-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.loja-stars {
    display: flex;
    gap: 1px;
    color: var(--h-star-color);
    font-size: 12px;
}

.loja-reviews {
    font-size: 12px;
    color: var(--h-muted);
}

.loja-produto-prices {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.loja-price-old {
    font-size: 13px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.loja-price-current {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text);
}

.loja-produto-envio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #16a34a;
    font-weight: 500;
    margin-bottom: 14px;
}

.loja-produto-envio i {
    font-size: 11px;
}

.loja-add-cart {
    width: 100%;
    padding: 10px 0;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: transparent;
    color: var(--h-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--h-base);
    font-family: inherit;
}

.loja-add-cart:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.loja-add-cart i {
    font-size: 14px;
}

/* Vendidos count */
.loja-vendidos-count {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--h-muted);
    margin-bottom: 12px;
}

/* -- DESTAQUES CAROUSEL -- */

.loja-destaques-track .loja-destaque-card {
    flex: 0 0 calc((100% - 48px) / 4);
    min-width: 240px;
}

/* -- VENDIDOS CAROUSEL -- */

.loja-vendidos-track .loja-vendido-card {
    flex: 0 0 calc((100% - 48px) / 4);
    min-width: 240px;
}

/* -- COMBOS -- */

.loja-combos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.loja-combo-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    transition: all var(--h-base);
}

.loja-combo-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: var(--h-shadow-md);
    transform: translateY(-4px);
}

.loja-combo-visual {
    padding: 24px 20px;
    background: var(--h-surface-soft);
    border-bottom: 1px solid var(--h-border);
}

.loja-combo-imgs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.loja-combo-img {
    width: 72px;
    height: 72px;
    border-radius: var(--h-radius-sm);
    object-fit: cover;
    border: 2px solid var(--h-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loja-combo-plus {
    color: var(--h-muted);
    font-size: 14px;
}

.loja-combo-info {
    padding: 20px;
}

.loja-combo-tag {
    display: inline-block;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--h-radius-pill);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.loja-combo-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 6px;
}

.loja-combo-desc {
    font-size: 13px;
    color: var(--h-muted);
    margin: 0 0 14px;
}

.loja-combo-prices {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.loja-combo-price-old {
    font-size: 14px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.loja-combo-price-current {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text);
}

.loja-combo-economy {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: color-mix(in srgb, #16a34a 10%, transparent);
    padding: 3px 10px;
    border-radius: var(--h-radius-pill);
}

/* -- TOOLBAR -- */

.loja-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
}

.loja-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    background: transparent;
    color: var(--h-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.loja-filter-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.loja-filter-count {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
}

.loja-toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.loja-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.loja-sort label {
    font-size: 13px;
    color: var(--h-muted);
    font-weight: 500;
    white-space: nowrap;
}

.loja-sort select {
    padding: 7px 32px 7px 12px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--h-fast);
}

.loja-sort select:focus {
    outline: none;
    border-color: var(--accent);
}

.loja-view-toggle {
    display: flex;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    overflow: hidden;
}

.loja-view-btn {
    width: 36px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--h-muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--h-fast);
}

.loja-view-btn.active {
    background: var(--accent);
    color: #fff;
}

.loja-view-btn:not(.active):hover {
    color: var(--h-text);
}

/* -- LAYOUT: sidebar + grid -- */

.loja-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* -- SIDEBAR -- */

.loja-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
}

.loja-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--h-border);
}

.loja-sidebar-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loja-sidebar-header h3 i {
    font-size: 14px;
    color: var(--accent);
}

.loja-sidebar-close {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--h-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all var(--h-fast);
}

.loja-sidebar-close:hover {
    background: var(--h-surface-soft);
    color: var(--h-text);
}

.loja-sidebar-body {
    padding: 4px 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.loja-sidebar-body::-webkit-scrollbar {
    width: 4px;
}

.loja-sidebar-body::-webkit-scrollbar-thumb {
    background: var(--h-border);
    border-radius: 4px;
}

/* Filter groups */
.loja-filter-group {
    border-bottom: 1px solid var(--h-border);
}

.loja-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: var(--h-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--h-fast);
}

.loja-filter-title:hover {
    color: var(--accent);
}

.loja-filter-title i {
    font-size: 10px;
    color: var(--h-muted);
    transition: transform var(--h-base);
}

.loja-filter-body {
    display: none;
    padding: 0 20px 16px;
}

.loja-filter-body.open {
    display: block;
}

.loja-filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--h-text);
    transition: color var(--h-fast);
}

.loja-filter-check:hover {
    color: var(--accent);
}

.loja-filter-check input[type="checkbox"],
.loja-filter-check input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.loja-filter-check small {
    margin-left: auto;
    color: var(--h-muted);
    font-size: 12px;
}

.loja-filter-stars {
    color: var(--h-star-color);
    font-size: 14px;
    letter-spacing: 1px;
}

/* Price range */
.loja-price-range {
    padding-top: 4px;
}

.loja-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.loja-price-field {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface-soft);
    flex: 1;
}

.loja-price-field span {
    font-size: 13px;
    color: var(--h-muted);
    font-weight: 600;
}

.loja-price-field input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--h-text);
    font-family: inherit;
}

.loja-price-sep {
    color: var(--h-muted);
    font-size: 12px;
}

.loja-range-slider {
    width: 100%;
    height: 4px;
    appearance: none;
    background: var(--h-border);
    border-radius: 4px;
    outline: none;
}

.loja-range-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid var(--h-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.loja-range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid var(--h-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Size grid */
.loja-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loja-size-btn {
    min-width: 42px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: transparent;
    color: var(--h-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.loja-size-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.loja-size-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Color swatches */
.loja-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loja-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--h-border);
    background: var(--swatch);
    cursor: pointer;
    transition: all var(--h-fast);
    position: relative;
}

.loja-color-swatch:hover {
    transform: scale(1.15);
}

.loja-color-swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.loja-color-swatch.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Clear filters */
.loja-clear-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px);
    margin: 12px 20px 20px;
    padding: 10px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: transparent;
    color: var(--h-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.loja-clear-filters:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Sidebar overlay (mobile) */
.loja-sidebar-overlay {
    display: none;
}

/* -- ACTIVE FILTERS -- */

.loja-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.loja-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--h-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

.loja-active-tag button {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    opacity: 0.7;
    transition: opacity var(--h-fast);
}

.loja-active-tag button:hover {
    opacity: 1;
}

.loja-clear-all {
    border: none;
    background: transparent;
    color: var(--h-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--h-fast);
    padding: 0;
    font-family: inherit;
}

.loja-clear-all:hover {
    color: #ef4444;
}

/* -- RESULTS INFO -- */

.loja-results-info {
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--h-muted);
}

.loja-results-info strong {
    color: var(--h-text);
}

/* -- PRODUCTS GRID -- */

.loja-produtos-area {
    flex: 1;
    min-width: 0;
}

.loja-produtos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* List view */
.loja-produtos-grid.loja-list-view {
    grid-template-columns: 1fr;
}

.loja-produtos-grid.loja-list-view .loja-produto-card {
    display: grid;
    grid-template-columns: 200px 1fr;
}

.loja-produtos-grid.loja-list-view .loja-produto-thumb {
    aspect-ratio: auto;
    height: 100%;
}

.loja-produtos-grid.loja-list-view .loja-produto-badges {
    top: 10px;
    left: 10px;
}

.loja-produtos-grid.loja-list-view .loja-produto-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 24px;
}

.loja-produtos-grid.loja-list-view .loja-produto-name {
    white-space: normal;
    font-size: 16px;
}

/* -- PAGINATION -- */

.loja-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
}

.loja-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--h-fast);
    font-family: inherit;
}

.loja-page-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.loja-page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.loja-page-next {
    padding: 0 18px;
}

.loja-page-dots {
    color: var(--h-muted);
    font-size: 14px;
    padding: 0 4px;
}

/* -- PROMOÇÕES GRID -- */

.loja-promo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.loja-promo-card {
    position: relative;
}

.loja-promo-timer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border-radius: var(--h-radius-md) var(--h-radius-md) 0 0;
}

.loja-timer-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.loja-timer-digits {
    display: flex;
    align-items: center;
    gap: 4px;
}

.loja-timer-block {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.loja-timer-num {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.loja-timer-block small {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.loja-timer-sep {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-size: 14px;
}

/* ============================
   LOJA RESPONSIVE
============================ */

@media (max-width: 1199.98px) {

    .loja-destaques-track .loja-destaque-card,
    .loja-vendidos-track .loja-vendido-card {
        flex: 0 0 calc((100% - 32px) / 3);
    }

    .loja-produtos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .loja-promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .loja-combos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .loja-cat-track .loja-cat-card {
        flex: 0 0 calc((100% - 80px) / 6);
    }
}

@media (max-width: 991.98px) {

    /* Sidebar becomes drawer */
    .loja-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        z-index: 9999;
        border-radius: 0;
        border: none;
        transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
    }

    .loja-sidebar.open {
        left: 0;
    }

    .loja-sidebar-close {
        display: flex;
    }

    .loja-sidebar-body {
        max-height: calc(100vh - 70px);
    }

    .loja-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }

    .loja-sidebar-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .loja-destaques-track .loja-destaque-card,
    .loja-vendidos-track .loja-vendido-card {
        flex: 0 0 calc((100% - 16px) / 2);
        min-width: 200px;
    }

    .loja-carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .loja-promo-banner {
        padding: 32px 28px;
    }

    .loja-promo-nav {
        width: 38px;
        height: 38px;
    }

    .loja-promo-title {
        font-size: 22px;
    }

    .loja-promo-circle {
        width: 110px;
        height: 110px;
    }

    .loja-promo-percent {
        font-size: 42px;
    }
}

@media (max-width: 767.98px) {
    .loja-hero {
        padding: 88px 0 48px;
    }

    .loja-hero-title {
        font-size: 1.8rem;
    }

    .loja-hero-sub {
        font-size: .95rem;
    }

    .loja-hero-search {
        flex-direction: column;
        border-radius: var(--h-radius-md);
        padding: 8px;
        gap: 8px;
    }

    .loja-hero-search i {
        display: none;
    }

    .loja-hero-search input {
        width: 100%;
        padding: 10px 14px;
    }

    #loja-search-btn {
        width: 100%;
        padding: 12px;
    }

    .loja-section-title {
        font-size: 20px;
    }

    .loja-cat-track .loja-cat-card {
        flex: 0 0 calc((100% - 24px) / 3);
        min-width: 100px;
    }

    .loja-cat-label {
        padding: 10px 8px 8px;
    }

    .loja-cat-name {
        font-size: 11px;
    }

    .loja-cat-count {
        font-size: 10px;
    }

    .loja-promo-banner {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
        min-height: 300px;
    }

    .loja-promo-nav {
        top: auto;
        bottom: 18px;
        transform: none;
    }

    .loja-promo-prev {
        left: 16px;
    }

    .loja-promo-next {
        right: 16px;
    }

    .loja-promo-dots {
        bottom: 30px;
    }

    .loja-promo-content {
        max-width: 100%;
    }

    .loja-promo-visual {
        margin-top: 20px;
    }

    .loja-promo-circle {
        width: 90px;
        height: 90px;
    }

    .loja-promo-percent {
        font-size: 36px;
    }

    .loja-combos-grid {
        grid-template-columns: 1fr;
    }

    .loja-produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .loja-produtos-grid .loja-produto-info {
        padding: 12px 12px 16px;
    }

    .loja-produtos-grid .loja-produto-name {
        font-size: 13px;
    }

    .loja-produtos-grid .loja-price-current {
        font-size: 16px;
    }

    .loja-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }

    .loja-toolbar-right {
        justify-content: space-between;
    }

    .loja-sort label {
        display: none;
    }

    .loja-promo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .loja-promo-timer {
        padding: 8px 10px;
    }

    .loja-timer-num {
        font-size: 13px;
    }

    .loja-pagination {
        flex-wrap: wrap;
    }

    .loja-cat-carousel,
    .loja-carousel-large {
        padding: 0 16px;
    }

    .loja-carousel-prev {
        left: -4px;
    }

    .loja-carousel-next {
        right: -4px;
    }

    /* List view fallback */
    .loja-produtos-grid.loja-list-view {
        grid-template-columns: 1fr;
    }

    .loja-produtos-grid.loja-list-view .loja-produto-card {
        grid-template-columns: 140px 1fr;
    }
}

@media (max-width: 480px) {
    .loja-produtos-grid {
        grid-template-columns: 1fr;
    }

    .loja-destaques-track .loja-destaque-card,
    .loja-vendidos-track .loja-vendido-card {
        flex: 0 0 80%;
    }

    .loja-cat-track .loja-cat-card {
        flex: 0 0 calc((100% - 12px) / 2.3);
    }

    .loja-promo-grid {
        grid-template-columns: 1fr;
    }

    .loja-hero-title {
        font-size: 1.55rem;
    }

    .loja-produtos-grid.loja-list-view .loja-produto-card {
        grid-template-columns: 1fr;
    }

    .loja-produtos-grid.loja-list-view .loja-produto-thumb {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}


/* =================================================================
   CATEGORIA PAGE — Hero & Subcategorias
================================================================= */

.cat-hero {
    position: relative;
    padding: 140px 0 60px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--h-bg)), var(--h-bg));
    overflow: hidden;
}

.cat-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.cat-hero-content {
    position: relative;
    z-index: 1;
}

.cat-hero-info {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 20px;
}

.cat-hero-icon {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: var(--h-radius-md);
    overflow: hidden;
    border: 3px solid var(--h-surface);
    box-shadow: var(--h-shadow-md);
}

.cat-hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-hero-text {
    flex: 1;
    min-width: 0;
}

.cat-hero-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
}

.cat-hero-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
}

.cat-hero-parent-link a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--h-fast);
}

.cat-hero-parent-link a:hover {
    opacity: .75;
    text-decoration: underline;
}

.cat-hero-desc {
    font-size: 15px;
    color: var(--h-text-secondary);
    margin: 0 0 12px;
    line-height: 1.5;
    max-width: 560px;
}

.cat-hero-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    padding: 6px 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: var(--h-radius-pill);
}

.cat-hero-count i {
    font-size: 12px;
}

/* Subcategorias section */
.cat-subcategorias {
    padding-top: 50px;
}

/* Active subcategory card highlight */
.shop-cat-card.cat-subcat-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.shop-cat-card.cat-subcat-active .shop-cat-name {
    color: var(--accent);
}

/* ============================
   SUBCATEGORIA PAGE — Cards Grid
============================ */

.subcat-section {
    padding: 50px 0 60px;
}

.subcat-section-head {
    text-align: center;
    margin-bottom: 40px;
}

.subcat-section-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.subcat-section-subtitle {
    font-size: 15px;
    color: var(--h-text-secondary);
    margin: 0;
}

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

.subcat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--h-text);
    transition: transform var(--h-fast), box-shadow var(--h-fast), border-color var(--h-fast);
}

.subcat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--h-shadow-lg);
    border-color: var(--accent);
}

.subcat-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--h-bg);
}

.subcat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.subcat-card:hover .subcat-card-img img {
    transform: scale(1.06);
}

.subcat-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity var(--h-fast);
}

.subcat-card:hover .subcat-card-overlay {
    opacity: .7;
}

.subcat-card-info {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subcat-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
    transition: color var(--h-fast);
}

.subcat-card:hover .subcat-card-name {
    color: var(--accent);
}

.subcat-card-count {
    font-size: 13px;
    color: var(--h-text-secondary);
    font-weight: 500;
}

.subcat-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    transition: gap var(--h-fast);
}

.subcat-card:hover .subcat-card-link {
    gap: 10px;
}

.subcat-card-link i {
    font-size: 11px;
    transition: transform var(--h-fast);
}

.subcat-card:hover .subcat-card-link i {
    transform: translateX(3px);
}

/* Empty state */
.subcat-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--h-text-secondary);
}

.subcat-empty i {
    font-size: 48px;
    color: var(--h-border);
    margin-bottom: 16px;
    display: block;
}

.subcat-empty p {
    font-size: 16px;
    margin: 0 0 20px;
}

.subcat-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: var(--h-radius-pill);
    text-decoration: none;
    transition: opacity var(--h-fast);
}

.subcat-empty-btn:hover {
    opacity: .85;
}

/* CTA button */
.subcat-cta {
    text-align: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--h-border);
}

.subcat-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 2px solid var(--accent);
    border-radius: var(--h-radius-pill);
    text-decoration: none;
    transition: background var(--h-fast), color var(--h-fast);
}

.subcat-cta-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* Responsive */
@media (max-width: 991.98px) {
    .subcat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .subcat-section {
        padding: 36px 0 48px;
    }

    .subcat-section-title {
        font-size: 24px;
    }

    .subcat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .subcat-card-info {
        padding: 14px 16px 16px;
    }

    .subcat-card-name {
        font-size: 15px;
    }

    .subcat-cta-btn {
        font-size: 14px;
        padding: 12px 24px;
    }
}

@media (max-width: 480px) {
    .subcat-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .subcat-card {
        flex-direction: row;
    }

    .subcat-card-img {
        width: 120px;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }

    .subcat-card-info {
        justify-content: center;
    }
}

/* ============================
   CATEGORIA RESPONSIVE
============================ */

@media (max-width: 767.98px) {
    .cat-hero {
        padding: 120px 0 40px;
    }

    .cat-hero-info {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }

    .cat-hero-icon {
        width: 90px;
        height: 90px;
    }

    .cat-hero-title {
        font-size: 28px;
    }

    .cat-hero-desc {
        font-size: 14px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .cat-hero-title {
        font-size: 24px;
    }

    .cat-hero-icon {
        width: 76px;
        height: 76px;
    }
}


/* ===========================================================================
   PRODUTO — PDP (Product Detail Page)
   =========================================================================== */

/* ---------- breadcrumb wrap ---------- */
.pdp-breadcrumb-wrap {
    padding: 18px 0 0;
    background: var(--h-bg);
}

/* ---------- layout principal ---------- */
.pdp-main {
    padding: 32px 0 56px;
    background: var(--h-bg);
}

.pdp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* ============ GALERIA ============ */
.pdp-gallery {
    position: sticky;
    top: calc(var(--h-header-height) + 20px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
    min-width: 0;
}

.pdp-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* imagem principal */
.pdp-main-image {
    position: relative;
    border-radius: var(--h-radius-md);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    cursor: zoom-in;
    z-index: 20;
}

.pdp-image-container {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--h-radius-md);
}

.pdp-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease;
}

.pdp-fullscreen-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    color: var(--h-text);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--h-fast);
    box-shadow: var(--h-shadow-sm);
    z-index: 3;
}

.pdp-main-image:hover .pdp-fullscreen-btn {
    opacity: 1;
}

.pdp-fullscreen-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* thumbnails */
.pdp-thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.pdp-thumbs-viewport {
    flex: 1;
    overflow: hidden;
}

.pdp-thumbs-track {
    display: flex;
    gap: 10px;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.pdp-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    border: 2px solid var(--h-border);
    cursor: pointer;
    background: var(--h-surface);
    padding: 0;
    transition: all var(--h-fast);
    opacity: .6;
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-thumb.active,
.pdp-thumb:hover {
    border-color: var(--accent);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.pdp-thumb-nav {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    cursor: pointer;
    font-size: 11px;
    color: var(--h-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--h-fast);
}

.pdp-thumb-nav:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ============ INFO / DETALHES ============ */
.pdp-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pdp-info-header {
    margin-bottom: 20px;
}

.pdp-brand {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: 8px;
}

.pdp-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--h-text);
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.pdp-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pdp-rating-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pdp-rating-inline .loja-stars {
    font-size: 14px;
}

.pdp-rating-value {
    font-weight: 700;
    font-size: 14px;
    color: var(--h-text);
}

.pdp-reviews-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--h-fast);
}

.pdp-reviews-link:hover {
    opacity: .75;
    text-decoration: underline;
}

.pdp-meta-sep {
    color: var(--h-border);
    font-size: 14px;
}

.pdp-sold {
    font-size: 13px;
    color: var(--h-muted);
}

.pdp-sold i {
    color: #ef4444;
}

/* preços */
.pdp-pricing {
    background: var(--h-surface-soft);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 20px 22px;
    margin-bottom: 24px;
}

.pdp-pricing-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.pdp-price-old {
    font-size: 16px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.pdp-price-current {
    font-size: 32px;
    font-weight: 800;
    color: var(--h-text);
    letter-spacing: -0.02em;
}

.pdp-price-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--h-radius-pill);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.pdp-installments {
    font-size: 14px;
    color: var(--h-text-secondary);
    margin-bottom: 8px;
}

.pdp-installments i {
    color: var(--accent);
    margin-right: 4px;
}

.pdp-pix {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--h-text-secondary);
    background: color-mix(in srgb, #32bcad 8%, transparent);
    padding: 8px 12px;
    border-radius: var(--h-radius-sm);
    border: 1px solid color-mix(in srgb, #32bcad 20%, transparent);
}

.pdp-pix-icon {
    font-size: 18px;
    color: #32bcad;
}

.pdp-pix strong {
    color: #32bcad;
}

.pdp-pix small {
    color: #32bcad;
    font-weight: 600;
}

/* divider */
.pdp-divider {
    border: none;
    border-top: 1px solid var(--h-border);
    margin: 22px 0;
}

/* opções (cor, tamanho) */
.pdp-option-group {
    margin-bottom: 22px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.pdp-option-group-error {
    border-color: #e74c3c;
}

.pdp-option-group-error .pdp-option-label {
    color: #e74c3c;
}

/* ===== loja.php — modal de características ===== */
.loja-carac-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--h-overlay-bg, rgba(0, 0, 0, .55));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.loja-carac-modal {
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--h-shadow-md, 0 8px 32px rgba(0, 0, 0, .25));
    animation: lojaCaracFade .2s ease;
    color: var(--h-text);
}

@keyframes lojaCaracFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loja-carac-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--h-border, #e5e5e5);
}

.loja-carac-modal-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--h-text, #222);
}

.loja-carac-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--h-muted, #666);
    padding: 0 4px;
    transition: color .15s;
}

.loja-carac-modal-close:hover {
    color: var(--h-text);
}

.loja-carac-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.loja-carac-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--h-border, #e5e5e5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loja-carac-preco-display {
    text-align: center;
    font-size: 15px;
    color: var(--h-text, #333);
    padding: 6px 12px;
    background: var(--h-surface-alt, #f5f5f5);
    border-radius: 8px;
    border: 1px solid var(--h-border, #e5e5e5);
}

.loja-carac-preco-display strong {
    color: var(--accent, #24425c);
    font-size: 17px;
}

.loja-carac-modal-add {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--accent, #24425c);
    color: #fff;
    transition: opacity .2s, background .2s;
}

.loja-carac-modal-add:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent, #24425c) 85%, #000);
}

.loja-carac-modal-add:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.loja-carac-modal-loading {
    text-align: center;
    padding: 32px 0;
    color: var(--h-text-secondary, #999);
    font-size: 14px;
}

.loja-carac-group {
    margin-bottom: 18px;
}

.loja-carac-group:last-child {
    margin-bottom: 0;
}

.loja-carac-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-secondary, #555);
    margin-bottom: 8px;
}

.loja-carac-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loja-carac-btn {
    min-width: 40px;
    height: 38px;
    padding: 0 14px;
    border: 2px solid var(--h-border, #ddd);
    border-radius: 8px;
    background: var(--h-surface, #fff);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--h-text, #333);
    transition: border-color .15s, background .15s;
}

.loja-carac-btn:hover:not(.disabled):not(.loja-carac-sem-estoque) {
    border-color: var(--accent, #24425c);
}

.loja-carac-btn.active {
    border-color: var(--accent, #24425c);
    background: var(--accent, #24425c);
    color: #fff;
}

.loja-carac-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Sem estoque (variação esgotada) */
.loja-carac-btn.loja-carac-sem-estoque,
.loja-carac-btn.loja-carac-sem-estoque:hover {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
    color: var(--h-muted, #999);
    pointer-events: none;
}

.loja-carac-btn-color.loja-carac-sem-estoque,
.loja-carac-btn-color.loja-carac-sem-estoque:hover {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

.loja-carac-btn-color.loja-carac-sem-estoque::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(to bottom right,
            transparent 42%,
            rgba(150, 150, 150, .85) 43%,
            rgba(150, 150, 150, .85) 57%,
            transparent 58%);
    z-index: 1;
    pointer-events: none;
}

.loja-carac-btn-color {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--swatch, #ccc);
    position: relative;
}

.loja-carac-btn-color.active {
    box-shadow: 0 0 0 3px var(--accent, #24425c);
    border-color: var(--h-surface, #fff);
    background: var(--swatch, #ccc);
}

/* ── Combo step bar ──────────────────────────────────── */
.loja-combo-step-bar {
    padding: 10px 20px 0;
}

.loja-combo-step-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.loja-combo-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--h-border, #ddd);
    transition: background .2s, width .2s, border-radius .2s;
}

.loja-combo-step-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--accent, #24425c);
}

.loja-combo-step-dot.done {
    background: #28a745;
}

.loja-combo-prod-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #24425c);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--h-border);
}

.pdp-option-label {
    display: block;
    font-size: 14px;
    color: var(--h-text-secondary);
    margin-bottom: 10px;
}

.pdp-option-label strong {
    color: var(--h-text);
}

/* cores */
.pdp-color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pdp-color-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--h-border);
    cursor: pointer;
    background: var(--swatch, #ccc);
    transition: all var(--h-fast);
    position: relative;
}

.pdp-color-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color var(--h-fast);
}

.pdp-color-btn.active::after {
    border-color: var(--accent);
}

.pdp-color-btn:hover {
    transform: scale(1.1);
}

.pdp-color-btn[style*="#ffffff"] {
    border-color: #d0d0d0;
}

/* tamanhos */
.pdp-size-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pdp-size-btn {
    min-width: 48px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--h-radius-sm);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
}

.pdp-size-btn:hover:not(.disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.pdp-size-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pdp-size-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Sem estoque (reativo por JS ou marcado pelo PHP) */
.pdp-size-btn.pdp-sem-estoque,
.pdp-size-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
    color: var(--h-muted, #999);
    pointer-events: none;
}

.pdp-color-btn.pdp-sem-estoque,
.pdp-color-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Linha diagonal sobre a swatch de cor sem estoque */
.pdp-color-btn.pdp-sem-estoque::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(to bottom right,
            transparent 42%,
            rgba(150, 150, 150, .85) 43%,
            rgba(150, 150, 150, .85) 57%,
            transparent 58%);
    z-index: 1;
    pointer-events: none;
}

.pdp-size-guide {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity var(--h-fast);
}

.pdp-size-guide:hover {
    opacity: .75;
    text-decoration: underline;
}

/* indicador de estoque (sem variações) */
.pdp-estoque-info {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
}
.pdp-est-ok {
    color: var(--h-success, #1a9e5a);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pdp-est-baixo {
    color: #e07b00;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pdp-est-esgotado {
    color: var(--h-danger, #d93025);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ações (qty, add cart, wishlist) */
.pdp-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pdp-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    background: var(--h-surface);
    height: 48px;
}

.pdp-qty-btn {
    width: 40px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--h-text);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--h-fast);
}

.pdp-qty-btn:hover {
    background: var(--h-surface-soft);
}

#pdp-qty-input {
    width: 44px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--h-border);
    border-right: 1px solid var(--h-border);
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: var(--h-text);
    outline: none;
    -moz-appearance: textfield;
}

#pdp-qty-input::-webkit-inner-spin-button,
#pdp-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.pdp-add-cart {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: var(--h-radius-sm);
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--h-fast);
    letter-spacing: .01em;
}

.pdp-add-cart:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-1px);
}

.pdp-add-cart:active {
    transform: translateY(0) scale(.98);
}

.pdp-wishlist-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--h-radius-sm);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--h-fast);
}

.pdp-wishlist-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.pdp-wishlist-btn.active {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

[data-theme="dark"] .pdp-wishlist-btn.active {
    background: rgba(239, 68, 68, .12);
}

/* comprar agora */
.pdp-buy-now {
    width: 100%;
    height: 48px;
    border: 2px solid var(--accent);
    border-radius: var(--h-radius-sm);
    background: transparent;
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--h-fast);
}

.pdp-buy-now:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* info rápida */
.pdp-quick-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.pdp-quick-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--h-radius-sm);
    background: var(--h-surface-soft);
    border: 1px solid var(--h-border);
}

.pdp-quick-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.pdp-quick-item strong {
    display: block;
    font-size: 13px;
    color: var(--h-text);
    margin-bottom: 1px;
}

.pdp-quick-item small {
    font-size: 11px;
    color: var(--h-muted);
}

/* share row */
.pdp-share-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pdp-sku {
    font-size: 12px;
    color: var(--h-muted);
    font-weight: 500;
}

.pdp-share {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--h-muted);
}

.pdp-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-muted);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--h-fast);
}

.pdp-share-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ============ ABAS ============ */
.pdp-tabs-section {
    padding: 0 0 64px;
    background: var(--h-bg);
}

.pdp-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--h-border);
    margin-bottom: 32px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pdp-tabs-nav::-webkit-scrollbar {
    display: none;
}

.pdp-tab-btn {
    padding: 14px 28px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--h-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--h-fast);
}

.pdp-tab-btn:hover {
    color: var(--h-text);
}

.pdp-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.pdp-tab-panel {
    display: none;
}

.pdp-tab-panel.active {
    display: block;
    animation: pdpFadeIn .35s ease;
}

@keyframes pdpFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* tab descrição */
.pdp-description-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 14px;
}

.pdp-description-content p {
    font-size: 15px;
    color: var(--h-text-secondary);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 720px;
}

.pdp-desc-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 36px;
}

.pdp-desc-feature {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--h-radius-md);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    transition: all var(--h-base);
}

.pdp-desc-feature:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: var(--h-shadow-sm);
}

.pdp-desc-feature-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--h-radius-sm);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.pdp-desc-feature strong {
    display: block;
    font-size: 14px;
    color: var(--h-text);
    margin-bottom: 4px;
}

.pdp-desc-feature p {
    font-size: 13px;
    color: var(--h-muted);
    line-height: 1.5;
    margin: 0;
}

.pdp-description-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 16px;
}

.pdp-care-icons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.pdp-care-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    font-size: 12px;
    color: var(--h-muted);
    text-align: center;
    min-width: 110px;
}

.pdp-care-item i {
    font-size: 22px;
    color: var(--accent);
}

/* palavras-chave */
.pdp-keywords {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pdp-keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--h-radius-sm);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--h-fast);
}

.pdp-keyword-tag::before {
    content: "\f02b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--accent);
}

.pdp-keyword-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb, 99, 102, 241), .06);
}

.pdp-desc-longa {
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.pdp-desc-longa img {
    max-width: 100%;
    height: auto;
}

.pdp-desc-longa table {
    width: 100%;
    max-width: 100%;
}

.pdp-description-content {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* tab especificações */
.pdp-specs-table {
    border-radius: var(--h-radius-md);
    overflow: hidden;
    border: 1px solid var(--h-border);
}

.pdp-specs-table table {
    width: 100%;
    border-collapse: collapse;
}

.pdp-specs-table tr:not(:last-child) {
    border-bottom: 1px solid var(--h-border);
}

.pdp-specs-table th,
.pdp-specs-table td {
    padding: 14px 20px;
    font-size: 14px;
    text-align: left;
}

.pdp-specs-table th {
    width: 220px;
    background: var(--h-surface-soft);
    color: var(--h-text-secondary);
    font-weight: 600;
}

.pdp-specs-table td {
    color: var(--h-text);
    background: var(--h-surface);
}

/* tab avaliações */
.pdp-reviews-summary {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 28px 32px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    margin-bottom: 32px;
}

.pdp-reviews-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    text-align: center;
}

.pdp-reviews-number {
    font-size: 48px;
    font-weight: 800;
    color: var(--h-text);
    line-height: 1;
    letter-spacing: -0.03em;
}

.pdp-reviews-big .loja-stars {
    font-size: 16px;
}

.pdp-reviews-total {
    font-size: 13px;
    color: var(--h-muted);
}

.pdp-reviews-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--h-muted);
}

.pdp-bar-row .loja-stars,
.pdp-bar-row i {
    color: var(--h-star-color);
    font-size: 11px;
}

.pdp-bar {
    flex: 1;
    height: 8px;
    background: var(--h-surface-soft);
    border-radius: var(--h-radius-pill);
    overflow: hidden;
    border: 1px solid var(--h-border);
}

.pdp-bar-fill {
    height: 100%;
    background: var(--h-star-color);
    border-radius: var(--h-radius-pill);
    transition: width .6s ease;
}

/* review items */
.pdp-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

.pdp-review-item {
    padding: 22px 24px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    transition: border-color var(--h-fast);
}

.pdp-review-item:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.pdp-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pdp-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdp-review-author {
    flex: 1;
}

.pdp-review-author strong {
    display: block;
    font-size: 14px;
    color: var(--h-text);
    margin-bottom: 2px;
}

.pdp-review-author .loja-stars {
    font-size: 12px;
}

.pdp-review-date {
    font-size: 12px;
    color: var(--h-muted);
    white-space: nowrap;
}

.pdp-review-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: color-mix(in srgb, #16a34a 8%, transparent);
    padding: 3px 10px;
    border-radius: var(--h-radius-pill);
    margin-bottom: 10px;
}

.pdp-review-tag i {
    font-size: 10px;
}

.pdp-review-text {
    font-size: 14px;
    color: var(--h-text-secondary);
    line-height: 1.65;
    margin: 0 0 14px;
}

.pdp-review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pdp-review-variant {
    font-size: 12px;
    color: var(--h-muted);
}

.pdp-review-helpful {
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-muted);
    padding: 5px 14px;
    border-radius: var(--h-radius-pill);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all var(--h-fast);
}

.pdp-review-helpful:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pdp-load-more-reviews {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
}

.pdp-load-more-reviews:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ============ RELACIONADOS ============ */
.pdp-related {
    padding: 0 0 72px;
    background: var(--h-bg);
}

.pdp-section-header {
    text-align: center;
    margin-bottom: 32px;
}

.pdp-section-header h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.pdp-section-header p {
    font-size: 15px;
    color: var(--h-muted);
    margin: 0;
}

.pdp-related .loja-produto-card {
    flex: 0 0 260px;
    min-width: 220px;
}

/* ============ LIGHTBOX ============ */
.pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease;
}

.pdp-lightbox.open {
    visibility: visible;
    opacity: 1;
}

.pdp-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
}

.pdp-lightbox-content {
    position: relative;
    max-width: 85vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.pdp-lightbox-img-wrap {
    border-radius: var(--h-radius-md);
    overflow: hidden;
    background: #111;
}

.pdp-lightbox-img-wrap img {
    max-width: 85vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.pdp-lightbox-close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--h-fast);
}

.pdp-lightbox-close:hover {
    background: rgba(255, 255, 255, .25);
}

.pdp-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--h-fast);
    z-index: 2;
}

.pdp-lightbox-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.pdp-lightbox-prev {
    left: -60px;
}

.pdp-lightbox-next {
    right: -60px;
}

.pdp-lightbox-counter {
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    font-weight: 600;
}

/* ============ PDP RESPONSIVO ============ */
@media (max-width: 1024px) {
    .pdp-grid {
        gap: 32px;
    }

    .pdp-title {
        font-size: 24px;
    }

    .pdp-price-current {
        font-size: 28px;
    }

    .pdp-desc-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pdp-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pdp-gallery {
        position: static;
    }

    .pdp-title {
        font-size: 22px;
    }

    .pdp-price-current {
        font-size: 26px;
    }

    .pdp-quick-info {
        grid-template-columns: 1fr;
    }

    .pdp-reviews-summary {
        flex-direction: column;
        gap: 24px;
        padding: 20px;
    }

    .pdp-reviews-big {
        flex-direction: row;
        min-width: auto;
        gap: 12px;
    }

    .pdp-reviews-number {
        font-size: 36px;
    }

    .pdp-tab-btn {
        padding: 12px 18px;
        font-size: 14px;
    }

    .pdp-lightbox-prev {
        left: 10px;
    }

    .pdp-lightbox-next {
        right: 10px;
    }

    .pdp-lightbox-img-wrap img {
        max-width: 95vw;
    }
}

@media (max-width: 480px) {
    .pdp-main {
        padding: 20px 0 40px;
    }

    .pdp-title {
        font-size: 20px;
    }

    .pdp-pricing {
        padding: 16px;
    }

    .pdp-price-current {
        font-size: 24px;
    }

    .pdp-actions {
        flex-wrap: wrap;
    }

    .pdp-qty {
        width: 100%;
        justify-content: center;
    }

    .pdp-add-cart {
        flex: 1;
    }

    .pdp-wishlist-btn {
        flex-shrink: 0;
        width: 48px;
    }

    .pdp-buy-now {
        font-size: 14px;
    }

    .pdp-thumb {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
    }

    .pdp-care-icons {
        flex-direction: column;
    }

    .pdp-care-item {
        flex-direction: row;
        text-align: left;
        min-width: auto;
    }

    .pdp-specs-table th {
        width: 130px;
        font-size: 13px;
        padding: 12px 14px;
    }

    .pdp-specs-table td {
        font-size: 13px;
        padding: 12px 14px;
    }

    .pdp-review-item {
        padding: 16px;
    }

    .pdp-section-header h2 {
        font-size: 22px;
    }
}

@media (max-width: 360px) {
    .pdp-grid {
        gap: 20px;
    }

    .pdp-title {
        font-size: 18px;
    }

    .pdp-price-current {
        font-size: 22px;
    }

    .pdp-pricing {
        padding: 14px;
    }

    .pdp-share-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pdp-specs-table {
        overflow-x: auto;
    }

    .pdp-specs-table table {
        min-width: 260px;
    }

    .pdp-thumb {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }
}


/* ===========================================================================
   CARRINHO PAGE — Stepper, Items, Summary, Combos, Similares
   =========================================================================== */

/* --- Stepper --- */
.cart-page-stepper-section {
    padding: 32px 0 0;
    background: var(--h-bg);
}

.cart-stepper-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.cart-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.cart-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-muted);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--h-base);
}

.cart-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-muted);
    white-space: nowrap;
    transition: color var(--h-base);
}

.cart-step-connector {
    flex: 0 0 60px;
    height: 2px;
    background: var(--h-border);
    margin: 0 8px;
    margin-bottom: 26px;
    border-radius: 2px;
    transition: background var(--h-base);
}

/* Active step */
.cart-step.is-active .cart-step-icon {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.cart-step.is-active .cart-step-label {
    color: var(--accent);
    font-weight: 700;
}

/* Completed step */
.cart-step.is-completed .cart-step-icon {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
    color: var(--accent);
}

.cart-step.is-completed .cart-step-label {
    color: var(--h-text);
}

.cart-step.is-completed+.cart-step-connector {
    background: var(--accent);
}

/* --- Main Grid --- */
.cart-page-main {
    padding: 32px 0 48px;
    background: var(--h-bg);
}

.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

/* --- Header --- */
.cart-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cart-page-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.cart-page-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0;
}

.cart-page-count {
    font-size: 14px;
    color: var(--h-muted);
    font-weight: 500;
}

.cart-page-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-secondary);
    cursor: pointer;
    user-select: none;
}

.cart-page-select-all input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- Cart Items --- */

/* --- Mini-cart Empty State --- */
.top-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 8px;
}

.top-cart-empty i {
    font-size: 2rem;
    color: #bbb;
}

.top-cart-empty p {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
}

.top-cart-empty-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    background: var(--themecolor);
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity .2s;
}

.top-cart-empty-btn:hover {
    opacity: .85;
}

/* --- Cart Page Empty State --- */
.cart-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 10px;
}

.cart-page-empty i {
    font-size: 2.8rem;
    color: #ccc;
}

.cart-page-empty p {
    margin: 0;
    font-size: 1rem;
    color: #888;
}

.cart-page-empty-link {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--themecolor);
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity .2s;
}

.cart-page-empty-link:hover {
    opacity: .85;
}

.cart-page-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-page-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.cart-page-item:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--h-border));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 8%, transparent);
}

.cart-page-item-check {
    display: flex;
    align-items: center;
    padding-top: 16px;
    cursor: pointer;
}

.cart-page-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.cart-page-item-thumb {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--h-border);
    background: var(--h-surface-soft);
}

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

.cart-page-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-page-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.cart-page-item-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-page-item-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--accent) 10%, var(--h-surface));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--h-border));
}

.cart-page-item-badge-hot {
    background: color-mix(in srgb, #f59e0b 12%, var(--h-surface));
    border-color: color-mix(in srgb, #f59e0b 35%, var(--h-border));
    color: #b45309;
}

.cart-page-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--h-fast);
}

.cart-page-item-name:hover {
    color: var(--accent);
}

.cart-page-item-carac {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.cart-page-item-carac-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent, #24425c) 10%, var(--h-surface, #f5f5f5));
    color: var(--h-text-secondary, #555);
}

.cart-page-item-variant {
    font-size: 13px;
    color: var(--h-muted);
}

.cart-page-remove-btn {
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, #ef4444 30%, var(--h-border));
    border-radius: var(--h-radius-sm);
    background: color-mix(in srgb, #ef4444 5%, var(--h-surface));
    color: #ef4444;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--h-fast);
}

.cart-page-remove-btn:hover {
    background: color-mix(in srgb, #ef4444 15%, var(--h-surface));
    color: #dc2626;
    transform: translateY(-1px);
}

.cart-page-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cart-page-item-prices {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-page-item-price-old {
    font-size: 14px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.cart-page-item-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--h-text);
}

/* Quantity stepper */
.cart-page-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    background: var(--h-surface);
}

.cart-page-qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--h-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--h-fast);
}

.cart-page-qty-btn:hover {
    background: var(--h-surface-soft);
}

.cart-page-qty-input {
    width: 48px;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--h-border);
    border-right: 1px solid var(--h-border);
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: var(--h-text);
    outline: none;
}

/* --- Summary Sidebar --- */
.cart-page-summary {
    position: sticky;
    top: calc(var(--h-header-height) + 20px);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-page-summary-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0;
}

.cart-page-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-page-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--h-text-secondary);
}

.cart-page-summary-row span:last-child {
    font-weight: 600;
    color: var(--h-text);
}

.cart-page-frete-free {
    color: #16a34a !important;
    font-weight: 600 !important;
}

.cart-page-frete-free i {
    margin-right: 4px;
}

/* ── Frete — Seção dinâmica ── */
.cart-page-frete-wrap {
    padding-bottom: 4px;
}

.cart-page-frete-digital {
    padding: 8px 0 0;
}

.cart-page-frete-digital span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--accent);
    font-weight: 600;
}

.cart-page-frete-digital-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}

.cart-page-frete-gratis {
    padding: 8px 0 0;
}

.cart-page-frete-gratis span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #16a34a;
    font-weight: 600;
}

.cart-page-frete-gratis-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
}

.cart-page-frete-fixo {
    padding: 8px 0 0;
}

.cart-page-frete-fixo span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #7c3aed;
    font-weight: 600;
}

.cart-page-frete-price {
    font-weight: 700;
    color: var(--h-text);
}

/* CEP input row */
.cart-page-frete-cep {
    padding: 10px 0 0;
}

.cart-page-frete-cep-row {
    display: flex;
    gap: 8px;
}

.cart-page-frete-cep-row input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    font-size: 13px;
    color: var(--h-text);
    outline: none;
    transition: border-color var(--h-fast);
}

.cart-page-frete-cep-row input:focus {
    border-color: var(--accent);
}

.cart-page-frete-calc-btn {
    padding: 9px 18px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--h-radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--h-fast);
}

.cart-page-frete-calc-btn:hover {
    opacity: .85;
}

.cart-page-frete-calc-btn:disabled {
    opacity: .5;
    cursor: default;
}

.cart-page-frete-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cart-page-frete-link:hover {
    color: var(--h-text);
}

/* Frete feedback */
.cart-page-frete-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--h-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
}

.cart-page-frete-feedback.is-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.cart-page-frete-feedback.is-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Frete opções */
.cart-page-frete-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.cart-page-frete-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    cursor: pointer;
    transition: border-color var(--h-fast), background var(--h-fast);
}

.cart-page-frete-option:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 3%, var(--h-surface));
}

.cart-page-frete-option.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--h-surface));
}

.cart-page-frete-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin: 0;
    flex-shrink: 0;
}

.cart-page-frete-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cart-page-frete-option-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--h-text);
}

.cart-page-frete-option-prazo {
    font-size: 11.5px;
    color: var(--h-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cart-page-frete-option-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
    white-space: nowrap;
}

.cart-page-summary-discount span:last-child {
    color: #16a34a !important;
}

/* Coupon */
.cart-page-coupon {
    border-top: 1px solid var(--h-border);
    padding-top: 16px;
}

.cart-page-coupon-trigger {
    width: 100%;
    padding: 10px 16px;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--h-border));
    border-radius: var(--h-radius-sm);
    background: color-mix(in srgb, var(--accent) 4%, var(--h-surface));
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--h-fast);
}

.cart-page-coupon-trigger:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--h-surface));
}

.cart-page-coupon-trigger i {
    font-size: 14px;
}

.cart-page-coupon-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 12px;
}

.cart-page-coupon-field input {
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14px;
    outline: none;
    transition: border-color var(--h-fast);
}

.cart-page-coupon-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.cart-page-coupon-apply {
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: var(--h-radius-sm);
    background: var(--accent);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--h-fast), box-shadow var(--h-fast);
}

.cart-page-coupon-apply:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

.cart-page-coupon-applied {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--h-radius-sm);
    border: 1px solid color-mix(in srgb, #22c55e 40%, var(--h-border));
    background: color-mix(in srgb, #22c55e 8%, var(--h-surface));
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
}

.cart-page-coupon-feedback {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--h-radius-sm);
    font-size: 13px;
    font-weight: 700;
}

.cart-page-coupon-feedback.is-error {
    border: 1px solid color-mix(in srgb, #ef4444 40%, var(--h-border));
    background: color-mix(in srgb, #ef4444 8%, var(--h-surface));
    color: #b91c1c;
}

.cart-page-coupon-feedback.is-success {
    border: 1px solid color-mix(in srgb, #22c55e 40%, var(--h-border));
    background: color-mix(in srgb, #22c55e 8%, var(--h-surface));
    color: #15803d;
}

/* Total */
.cart-page-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--h-border);
    padding-top: 16px;
}

.cart-page-summary-total>span:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--h-text);
}

.cart-page-total-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cart-page-total-old {
    font-size: 13px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.cart-page-total-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--h-text);
}

/* Checkout button */
.cart-page-checkout-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--h-radius-sm);
    background: var(--accent);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: filter var(--h-fast), box-shadow var(--h-fast), transform var(--h-fast);
}

.cart-page-checkout-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-2px);
}

.cart-page-checkout-btn:active {
    transform: translateY(0) scale(.98);
}

.cart-page-checkout-btn i {
    font-size: 14px;
    transition: transform var(--h-fast);
}

.cart-page-checkout-btn:hover i {
    transform: translateX(3px);
}

/* Trust badges */
.cart-page-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--h-border);
}

.cart-page-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--h-muted);
}

.cart-page-trust-item i {
    font-size: 15px;
    color: var(--accent);
    width: 20px;
    text-align: center;
}

/* ── Formas de Pagamento ── */
.cp-payment {
    border-top: 1px solid var(--h-border);
    padding-top: 18px;
    margin-bottom: 20px;
}

.cp-payment-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--h-text);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.cp-payment-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-payment-card {
    cursor: pointer;
    display: block;
}

.cp-payment-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cp-payment-card-inner {
    border: 2px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    overflow: hidden;
    transition: border-color var(--h-fast), background var(--h-fast), box-shadow var(--h-fast);
}

.cp-payment-card:hover .cp-payment-card-inner {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--h-border));
}

.cp-payment-card.is-selected .cp-payment-card-inner {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 3%, var(--h-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.cp-payment-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.cp-payment-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cp-payment-icon-pix {
    background: color-mix(in srgb, #32bcad 12%, var(--h-surface));
    color: #32bcad;
}

.cp-payment-icon-credito {
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
    color: var(--accent);
}

.cp-payment-icon-debito {
    background: color-mix(in srgb, #0ea5e9 12%, var(--h-surface));
    color: #0ea5e9;
}

.cp-payment-icon-boleto {
    background: color-mix(in srgb, #6b7280 12%, var(--h-surface));
    color: #6b7280;
}

.cp-payment-icon-mp {
    background: color-mix(in srgb, #009ee3 12%, var(--h-surface));
    color: #009ee3;
}

.cp-payment-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cp-payment-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--h-text);
}

.cp-payment-hint {
    font-size: 11.5px;
    color: var(--h-text-muted);
}

.cp-payment-check {
    font-size: 18px;
    color: var(--h-border);
    transition: color var(--h-fast), transform var(--h-fast);
    flex-shrink: 0;
}

.cp-payment-card.is-selected .cp-payment-check {
    color: var(--accent);
    transform: scale(1.1);
}

/* Detail panels */
.cp-payment-detail {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--h-border);
    background: color-mix(in srgb, var(--h-border) 15%, var(--h-surface));
}

/* PIX detail */
.cp-payment-detail-pix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-payment-discount-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--h-radius-pill);
    background: #f0fdf4;
    color: #16a34a;
    font-size: 11.5px;
    font-weight: 700;
}

.cp-payment-pix-total {
    font-size: 16px;
    font-weight: 800;
    color: #16a34a;
}

/* Crédito detail */
.cp-payment-detail-credito {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-payment-installments {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cp-payment-installments::-webkit-scrollbar {
    width: 4px;
}

.cp-payment-installments::-webkit-scrollbar-thumb {
    background: var(--h-border);
    border-radius: 4px;
}

.cp-installment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--h-text);
    transition: background var(--h-fast);
    cursor: pointer;
}

.cp-installment-row:hover {
    background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
}

.cp-installment-row.is-selected {
    background: color-mix(in srgb, var(--accent) 10%, var(--h-surface));
    font-weight: 700;
}

.cp-installment-row .cp-inst-label {
    font-weight: 600;
}

.cp-installment-row .cp-inst-value {
    color: var(--h-text-muted);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-installment-row .cp-inst-nojuros {
    color: #16a34a;
    font-size: 10.5px;
    font-weight: 700;
}

.cp-installment-row .cp-inst-juros {
    color: #e07b00;
    font-size: 10.5px;
    font-weight: 700;
}

.cp-installment-row .cp-inst-total-val {
    color: var(--h-text-muted);
    font-size: 10.5px;
}

.cp-payment-card-flags {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.cp-payment-card-flags img {
    height: 22px;
    width: auto;
    opacity: .7;
    transition: opacity var(--h-fast);
}

.cp-payment-card-flags img:hover {
    opacity: 1;
}

/* Boleto detail */
.cp-payment-boleto-info,
.cp-payment-mp-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--h-text-muted);
    line-height: 1.5;
}

.cp-payment-boleto-info i,
.cp-payment-mp-info i {
    font-size: 13px;
    flex-shrink: 0;
}

/* --- Section Titles (Combos / Semelhantes) --- */
.cart-page-section {
    padding: 48px 0;
    background: var(--h-bg);
}

.cart-page-section-alt {
    background: var(--h-surface);
    border-top: 1px solid var(--h-border);
    padding-bottom: 64px;
}

.cart-page-section-head {
    text-align: center;
    margin-bottom: 32px;
}

.cart-page-section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
}

.cart-page-section-title i {
    color: var(--accent);
    margin-right: 6px;
}

.cart-page-section-sub {
    font-size: 15px;
    color: var(--h-muted);
    margin: 0;
}

/* --- Combos --- */
.cart-page-combos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cart-combo-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.cart-combo-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--h-border));
    box-shadow: var(--h-shadow-md);
    transform: translateY(-3px);
}

.cart-combo-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cart-combo-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    border: 1px solid var(--h-border);
    background: var(--h-surface-soft);
    flex-shrink: 0;
    display: block;
}

.cart-combo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-combo-plus {
    font-size: 14px;
    color: var(--h-muted);
    flex-shrink: 0;
}

.cart-combo-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.cart-combo-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
}

.cart-combo-prices {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-combo-price-old {
    font-size: 14px;
    color: var(--h-muted);
    text-decoration: line-through;
}

.cart-combo-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--h-text);
}

.cart-combo-save {
    display: inline-flex;
    padding: 3px 12px;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, #16a34a 10%, var(--h-surface));
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
}

.cart-combo-add-btn {
    width: 100%;
    padding: 10px 0;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: transparent;
    color: var(--h-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--h-base);
    font-family: inherit;
}

.cart-combo-add-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.cart-combo-add-btn i {
    font-size: 14px;
}

/* --- Grid de Produtos Semelhantes --- */
.cart-page-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* --- RESPONSIVE (Cart Page) --- */
@media (max-width: 1199.98px) {
    .cart-page-grid {
        grid-template-columns: 1fr 340px;
    }

    .cart-page-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .cart-page-grid {
        grid-template-columns: 1fr;
    }

    .cart-page-summary {
        position: static;
    }

    .cart-page-combos {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-page-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cart-step-connector {
        flex: 0 0 32px;
    }
}

@media (max-width: 767.98px) {
    .cart-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cart-page-item {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .cart-page-item-thumb {
        width: 80px;
        height: 80px;
    }

    .cart-page-item-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cart-page-combos {
        grid-template-columns: 1fr;
    }

    .cart-page-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-step-icon {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .cart-step-label {
        font-size: 11px;
    }

    .cart-step-connector {
        flex: 0 0 20px;
    }

    .cart-page-stepper-section {
        padding: 20px 0 0;
    }

    .cart-page-main {
        padding: 24px 0 32px;
    }

    .cart-page-section {
        padding: 32px 0;
    }
}

@media (max-width: 575.98px) {
    .cart-page-products-grid {
        grid-template-columns: 1fr;
    }

    .cart-page-title {
        font-size: 20px;
    }

    .cart-page-summary {
        padding: 20px 16px;
    }
}


/* ===========================================================================
   ENTREGA PAGE — Login Wall, Digital, Endereço
   =========================================================================== */

/* --- Login Wall --- */
.entrega-login-wall {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 48px 0;
}

.entrega-login-card {
    text-align: center;
    max-width: 460px;
    width: 100%;
    padding: 48px 40px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    box-shadow: var(--h-shadow-md);
}

.entrega-login-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, var(--h-surface));
    color: var(--accent);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entrega-login-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
}

.entrega-login-desc {
    font-size: 14px;
    color: var(--h-text-muted);
    margin: 0 0 28px;
    line-height: 1.6;
}

.entrega-login-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.entrega-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--h-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--h-fast);
    cursor: pointer;
    border: 2px solid transparent;
}

.entrega-login-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.entrega-login-btn-primary:hover {
    opacity: .88;
    color: #fff;
}

.entrega-login-btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.entrega-login-btn-outline:hover {
    background: var(--accent);
    color: #fff;
}

.entrega-login-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-muted);
    text-decoration: none;
    transition: color var(--h-fast);
}

.entrega-login-back:hover {
    color: var(--accent);
}

/* --- Grid de entrega --- */
.entrega-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.entrega-summary {
    position: sticky;
    top: 100px;
}

.entrega-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-muted);
    text-decoration: none;
    transition: color var(--h-fast);
}

.entrega-back-link:hover {
    color: var(--accent);
}

/* --- User Card --- */
.entrega-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    margin-bottom: 24px;
}

.entrega-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
    color: var(--accent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entrega-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.entrega-user-greet {
    font-size: 14px;
    color: var(--h-text);
}

.entrega-user-greet strong {
    font-weight: 700;
}

.entrega-user-email {
    font-size: 12.5px;
    color: var(--h-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrega-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--h-radius-pill);
    background: #f0fdf4;
    color: #16a34a;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Seções (Digital / Físico) --- */
.entrega-section {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px;
    margin-bottom: 24px;
}

.entrega-section-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.entrega-section-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.entrega-icon-digital {
    background: color-mix(in srgb, #8b5cf6 12%, var(--h-surface));
    color: #8b5cf6;
}

.entrega-icon-fisico {
    background: color-mix(in srgb, var(--accent) 12%, var(--h-surface));
    color: var(--accent);
}

.entrega-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 4px;
}

.entrega-section-desc {
    font-size: 13px;
    color: var(--h-text-muted);
    margin: 0;
}

/* --- Mini itens dentro das seções --- */
.entrega-mini-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--h-border) 30%, var(--h-surface));
    border-radius: var(--h-radius-sm);
    margin-bottom: 8px;
}

.entrega-mini-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.entrega-mini-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.entrega-mini-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrega-mini-variant {
    font-size: 11.5px;
    color: var(--h-text-muted);
}

.entrega-mini-qty {
    font-size: 12px;
    font-weight: 700;
    color: var(--h-text-muted);
    flex-shrink: 0;
}

/* --- Métodos de entrega digital --- */
.entrega-method-group {
    margin-top: 20px;
}

.entrega-method-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
    margin-bottom: 12px;
}

.entrega-method-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.entrega-method-card {
    cursor: pointer;
}

.entrega-method-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.entrega-method-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 2px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    transition: all var(--h-fast);
}

.entrega-method-card:hover .entrega-method-card-inner {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--h-border));
    background: color-mix(in srgb, var(--accent) 2%, var(--h-surface));
}

.entrega-method-card.is-selected .entrega-method-card-inner {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--h-surface));
}

.entrega-method-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, var(--h-surface));
    color: var(--accent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entrega-method-card[data-method="whatsapp"] .entrega-method-icon {
    background: color-mix(in srgb, #25d366 10%, var(--h-surface));
    color: #25d366;
}

.entrega-method-card[data-method="download"] .entrega-method-icon {
    background: color-mix(in srgb, #8b5cf6 10%, var(--h-surface));
    color: #8b5cf6;
}

.entrega-method-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.entrega-method-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
}

.entrega-method-hint {
    font-size: 12px;
    color: var(--h-text-muted);
}

.entrega-method-check {
    font-size: 20px;
    color: var(--h-border);
    transition: color var(--h-fast);
}

.entrega-method-card.is-selected .entrega-method-check {
    color: var(--accent);
}

/* --- Campo alternativo (email/whatsapp) --- */
.entrega-alt-field {
    margin-top: 16px;
    padding: 16px;
    background: color-mix(in srgb, var(--h-border) 20%, var(--h-surface));
    border-radius: var(--h-radius-sm);
}

.entrega-alt-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 8px;
}

.entrega-alt-input-row input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    font-size: 13.5px;
    color: var(--h-text);
    outline: none;
    transition: border-color var(--h-fast);
}

.entrega-alt-input-row input:focus {
    border-color: var(--accent);
}

/* --- Nota digital --- */
.entrega-digital-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    background: color-mix(in srgb, #8b5cf6 6%, var(--h-surface));
    border: 1px solid color-mix(in srgb, #8b5cf6 20%, var(--h-border));
    border-radius: var(--h-radius-sm);
    font-size: 12.5px;
    color: var(--h-text);
    line-height: 1.6;
}

.entrega-digital-note i {
    color: #8b5cf6;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* --- Formulário de Endereço --- */
.entrega-address-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.entrega-form-row {
    display: flex;
    gap: 14px;
}

.entrega-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.entrega-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entrega-form-full {
    width: 100%;
}

.entrega-form-cep {
    max-width: 260px;
}

.entrega-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text);
}

.entrega-form-group label .req {
    color: #ef4444;
}

.entrega-form-group input,
.entrega-form-group select {
    padding: 11px 14px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    font-size: 13.5px;
    color: var(--h-text);
    outline: none;
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
    width: 100%;
}

.entrega-form-group input:focus,
.entrega-form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.entrega-form-group input.is-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.entrega-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* CEP com botão de buscar */
.entrega-input-with-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.entrega-input-with-btn input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.entrega-cep-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-left: none;
    border-top-right-radius: var(--h-radius-sm);
    border-bottom-right-radius: var(--h-radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: opacity var(--h-fast);
}

.entrega-cep-search:hover {
    opacity: .85;
}

.entrega-use-saved-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--h-surface, #f5f5f5));
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--h-radius-sm);
    cursor: pointer;
    transition: background var(--h-fast), border-color var(--h-fast);
}

.entrega-use-saved-btn:hover {
    background: color-mix(in srgb, var(--accent) 15%, var(--h-surface, #f5f5f5));
    border-color: var(--accent);
}

.entrega-use-saved-btn i {
    font-size: 13px;
}

.entrega-help-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entrega-help-link:hover {
    color: var(--h-text);
}

/* --- Shipping selected info --- */
.entrega-shipping-selected {
    margin-top: 16px;
}

/* --- Frete — cálculo dinâmico --- */
.entrega-frete-wrap {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
}

.entrega-frete-simples {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
}

.entrega-frete-simples-text {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

.entrega-frete-fixo-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7c3aed;
    font-size: 13px;
}

.entrega-frete-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
    margin-bottom: 12px;
}

.entrega-frete-header i {
    color: var(--accent);
    font-size: 15px;
}

.entrega-frete-feedback {
    font-size: 12.5px;
    padding: 8px 12px;
    border-radius: var(--h-radius-sm);
    margin-bottom: 10px;
}

.entrega-frete-feedback.is-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.entrega-frete-loading {
    font-size: 13px;
    color: var(--h-text-muted);
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.entrega-frete-loading i {
    color: var(--accent);
}

.entrega-frete-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entrega-frete-option {
    font-size: 13px;
}

.entrega-frete-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--h-radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--h-border));
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text);
}

.entrega-frete-selected i {
    color: var(--accent);
    font-size: 14px;
}

/* --- Aviso de frete não selecionado --- */
.entrega-frete-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--h-radius-sm);
    background: #fef9ec;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.entrega-frete-aviso i {
    color: #d97706;
    font-size: 14px;
    flex-shrink: 0;
}

/* --- Containers dos iframes seguros do Mercado Pago --- */
.mp-iframe-container {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--h-form-input-text, var(--h-text));
    background: var(--h-form-input-bg, #fff);
    border: 1px solid var(--h-form-input-border, var(--h-border));
    border-radius: var(--h-radius-sm);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
    display: flex;
    align-items: center;
}

.mp-iframe-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.mp-iframe-container:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* --- Feedback cartão de crédito --- */
.pgto-credito-feedback {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--h-radius-sm);
    font-size: 13px;
    font-weight: 600;
    margin-top: 14px;
    line-height: 1.4;
}

.pgto-credito-feedback--erro {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.pgto-credito-feedback--erro i {
    color: #dc2626;
    flex-shrink: 0;
}

.pgto-credito-feedback--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.pgto-credito-feedback--info i {
    color: #2563eb;
    flex-shrink: 0;
}

.pgto-credito-feedback--ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.pgto-credito-feedback--ok i {
    color: #16a34a;
    flex-shrink: 0;
}

/* --- Resumo lateral — Itens --- */
.entrega-summary-items {
    border-bottom: 1px solid var(--h-border);
    padding-bottom: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entrega-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entrega-summary-item-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--h-border);
}

.entrega-summary-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.entrega-summary-item-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--h-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrega-summary-item-meta {
    font-size: 11px;
    color: var(--h-text-muted);
}

.entrega-summary-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--h-text);
    white-space: nowrap;
}

/* --- Payment Chosen (Entrega Page) --- */
.entrega-payment-chosen {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
}

.entrega-payment-chosen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.entrega-payment-chosen-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.entrega-payment-chosen-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--h-radius-sm);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 17px;
    flex-shrink: 0;
}

.entrega-payment-chosen-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entrega-payment-chosen-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--h-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.entrega-payment-chosen-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
}

.entrega-payment-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--h-radius-pill);
    text-decoration: none;
    transition: all var(--h-fast);
    flex-shrink: 0;
}

.entrega-payment-change-btn:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}

.entrega-payment-chosen-pix-discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--h-border);
}

.entrega-payment-pix-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    background: color-mix(in srgb, #16a34a 8%, transparent);
    padding: 4px 10px;
    border-radius: var(--h-radius-pill);
}

.entrega-payment-pix-total {
    font-size: 15px;
    font-weight: 800;
    color: #16a34a;
}

/* --- Responsive (Entrega Page) --- */
@media (max-width: 1199.98px) {
    .entrega-grid {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 991.98px) {
    .entrega-grid {
        grid-template-columns: 1fr;
    }

    .entrega-summary {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .entrega-login-card {
        padding: 32px 24px;
    }

    .entrega-section {
        padding: 20px 16px;
    }

    .entrega-form-row-2col {
        grid-template-columns: 1fr;
    }

    .entrega-form-cep {
        max-width: 100%;
    }

    .entrega-method-card-inner {
        padding: 14px;
        gap: 10px;
    }

    .entrega-method-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
        border-radius: 10px;
    }

    .entrega-user-card {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .entrega-login-title {
        font-size: 18px;
    }

    .entrega-section-header {
        flex-direction: column;
        gap: 10px;
    }

    .entrega-summary {
        padding: 20px 16px;
    }
}


/* ===========================================================================
   PAGAMENTO PAGE
   =========================================================================== */

/* --- Grid --- */
.pgto-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    padding: 40px 0 60px;
    align-items: start;
}

.pgto-summary {
    position: sticky;
    top: 100px;
}

/* --- Tabs --- */
.pgto-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    margin-bottom: 24px;
    overflow-x: auto;
}

.pgto-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--h-radius-sm);
    cursor: pointer;
    transition: all var(--h-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.pgto-tab:hover {
    color: var(--h-text);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.pgto-tab.is-active {
    color: var(--accent);
    background: var(--h-surface);
    border-color: var(--h-border);
    box-shadow: var(--h-shadow-sm);
}

/* --- Panels --- */
.pgto-panel {
    display: none;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px;
}

.pgto-panel.is-active {
    display: block;
}

/* --- Panel Header --- */
.pgto-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--h-border);
    flex-wrap: wrap;
}

.pgto-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--h-radius-sm);
    font-size: 20px;
    flex-shrink: 0;
}

.pgto-icon-pix {
    background: color-mix(in srgb, #32BCAD 12%, transparent);
    color: #32BCAD;
}

.pgto-icon-credito {
    background: color-mix(in srgb, #5B6FE6 12%, transparent);
    color: #5B6FE6;
}

.pgto-icon-debito {
    background: color-mix(in srgb, #0ea5e9 12%, transparent);
    color: #0ea5e9;
}

.pgto-icon-boleto {
    background: color-mix(in srgb, #6b7280 12%, transparent);
    color: #6b7280;
}

.pgto-icon-mp {
    background: color-mix(in srgb, #00AEEF 12%, transparent);
    color: #00AEEF;
}

.pgto-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
}

.pgto-panel-desc {
    font-size: 13px;
    color: var(--h-text-muted);
    margin: 2px 0 0;
}

.pgto-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    background: color-mix(in srgb, #16a34a 10%, transparent);
    border-radius: var(--h-radius-pill);
}

.pgto-card-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.pgto-card-flags img {
    height: 24px;
    width: auto;
    border-radius: 3px;
}

/* ============================
   PIX PANEL
============================= */
.pgto-pix-content {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
}

.pgto-pix-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pgto-pix-qr-frame {
    width: 180px;
    height: 180px;
    border: 2px dashed var(--h-border);
    border-radius: var(--h-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.pgto-pix-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--h-text-muted);
    font-size: 13px;
}

.pgto-pix-qr-placeholder i {
    font-size: 48px;
    color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.pgto-pix-qr-hint {
    font-size: 11px;
    color: var(--h-text-muted);
    text-align: center;
}

.pgto-pix-divider {
    display: flex;
    align-items: center;
    color: var(--h-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.pgto-pix-divider span {
    padding: 8px 0;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

.pgto-pix-key-section {
    flex: 1;
    min-width: 0;
}

.pgto-pix-key-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--h-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pgto-pix-key-row {
    display: flex;
    gap: 8px;
}

.pgto-pix-key-input {
    flex: 1;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--h-text);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    min-width: 0;
    user-select: all;
}

.pgto-pix-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--h-radius-sm);
    cursor: pointer;
    transition: all var(--h-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.pgto-pix-copy-btn:hover {
    opacity: .88;
}

.pgto-pix-copy-btn.is-copied {
    background: #16a34a;
}

.pgto-pix-titular {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--h-text-muted);
}

.pgto-pix-instructions {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: var(--h-radius-sm);
    padding: 20px 22px;
    margin-bottom: 16px;
}

.pgto-pix-instructions h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pgto-pix-instructions ol {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--h-text-muted);
    line-height: 1.8;
}

.pgto-pix-instructions ol strong {
    color: var(--accent);
}

.pgto-pix-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 12px;
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 8%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 20%, transparent);
    border-radius: var(--h-radius-sm);
}

.pgto-pix-timer i {
    font-size: 15px;
}

/* ============================
   CARD FORMS (Credit / Debit / Boleto)
============================= */
.pgto-fieldset {
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    padding: 20px;
    margin: 0 0 20px;
}

.pgto-fieldset-legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--h-text);
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pgto-fieldset-legend i {
    color: var(--accent);
    font-size: 14px;
}

.pgto-form-row {
    margin-bottom: 16px;
}

.pgto-form-row:last-child {
    margin-bottom: 0;
}

.pgto-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pgto-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pgto-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--h-text);
}

.pgto-form-group label .req {
    color: #ef4444;
}

.pgto-form-group input,
.pgto-form-group select {
    padding: 11px 14px;
    font-size: 14px;
    color: var(--h-form-input-text, var(--h-text));
    background: var(--h-form-input-bg, #fff);
    border: 1px solid var(--h-form-input-border, var(--h-border));
    border-radius: var(--h-radius-sm);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
    outline: none;
}

.pgto-form-group input::placeholder {
    color: var(--h-form-placeholder, #9ca3af);
}

.pgto-form-group input:focus,
.pgto-form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.pgto-input-icon {
    position: relative;
}

.pgto-input-icon input {
    width: 100%;
    padding-right: 52px;
}

.pgto-card-brand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* --- Installment info --- */
.pgto-installment-info {
    margin-top: 12px;
}

.pgto-inst-highlight {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--h-radius-sm);
    font-size: 13px;
    font-weight: 600;
}

.pgto-inst-nojuros {
    background: color-mix(in srgb, #16a34a 8%, transparent);
    color: #16a34a;
    border: 1px solid color-mix(in srgb, #16a34a 15%, transparent);
}

.pgto-inst-comjuros {
    background: color-mix(in srgb, #f59e0b 8%, transparent);
    color: #b45309;
    border: 1px solid color-mix(in srgb, #f59e0b 15%, transparent);
}

/* --- Debit total box --- */
.pgto-debito-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: var(--h-radius-sm);
    font-size: 14px;
    color: var(--h-text);
}

.pgto-debito-total-box strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
}

/* ============================
   BOLETO PANEL
============================= */
.pgto-boleto-info-card {
    background: color-mix(in srgb, var(--accent) 3%, transparent);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.pgto-boleto-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
}

.pgto-boleto-info-row:not(:last-child) {
    border-bottom: 1px solid var(--h-border);
}

.pgto-boleto-info-row>i {
    font-size: 18px;
    color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.pgto-boleto-info-row div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pgto-boleto-info-row div strong {
    font-size: 13px;
    color: var(--h-text);
}

.pgto-boleto-info-row div span {
    font-size: 12px;
    color: var(--h-text-muted);
}

.pgto-boleto-value {
    font-size: 16px !important;
    font-weight: 800;
    color: var(--accent) !important;
}

.pgto-boleto-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 12px;
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 8%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 18%, transparent);
    border-radius: var(--h-radius-sm);
    margin-bottom: 22px;
}

.pgto-boleto-notice i {
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================
   MERCADO PAGO PANEL
============================= */
.pgto-mp-content {
    text-align: center;
}

.pgto-mp-info-card {
    padding: 20px;
}

.pgto-mp-icon-big {
    color: #00AEEF;
    margin-bottom: 16px;
}

.pgto-mp-info-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 8px;
}

.pgto-mp-info-desc {
    font-size: 14px;
    color: var(--h-text-muted);
    margin: 0 0 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.pgto-mp-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 420px;
    margin: 0 auto 24px;
    text-align: left;
}

.pgto-mp-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, #00AEEF 5%, transparent);
    border: 1px solid color-mix(in srgb, #00AEEF 12%, transparent);
    border-radius: var(--h-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--h-text);
}

.pgto-mp-feature i {
    color: #00AEEF;
    font-size: 16px;
    flex-shrink: 0;
}

.pgto-mp-value-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    font-size: 14px;
    color: var(--h-text);
}

.pgto-mp-value-box strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent);
}

/* --- Confirm button override --- */
.pgto-confirm-btn {
    gap: 8px;
}

/* --- Summary items (reuse entrega styles) --- */
.pgto-summary-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--h-border);
    max-height: 240px;
    overflow-y: auto;
}

/* --- Discount row --- */
.pgto-discount-row .pgto-discount-val {
    color: #16a34a;
    font-weight: 700;
}

/* --- Responsive (Pagamento Page) --- */
@media (max-width: 1199.98px) {
    .pgto-grid {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 991.98px) {
    .pgto-grid {
        grid-template-columns: 1fr;
    }

    .pgto-summary {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .pgto-panel {
        padding: 20px 16px;
    }

    .pgto-pix-content {
        flex-direction: column;
        gap: 20px;
    }

    .pgto-pix-divider span {
        writing-mode: horizontal-tb;
    }

    .pgto-pix-key-row {
        flex-direction: column;
    }

    .pgto-pix-copy-btn {
        justify-content: center;
    }

    .pgto-form-row-2col {
        grid-template-columns: 1fr;
    }

    .pgto-tabs {
        gap: 4px;
        padding: 4px;
    }

    .pgto-tab {
        padding: 9px 12px;
        font-size: 12px;
    }

    .pgto-mp-features {
        grid-template-columns: 1fr;
    }

    .pgto-panel-header {
        gap: 10px;
    }

    .pgto-card-flags {
        margin-left: 0;
        margin-top: 4px;
    }

    .pgto-discount-badge {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .pgto-grid {
        padding: 24px 0 40px;
        gap: 20px;
    }

    .pgto-summary {
        padding: 20px 16px;
    }

    .pgto-pix-qr-frame {
        width: 150px;
        height: 150px;
    }
}

/* --- Comprovante Notice (sidebar pagamento.php) --- */
.pgto-comprovante-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    background: var(--h-surface, #f8f9fa);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 10px;
}

.pgto-comprovante-notice i {
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.pgto-comprovante-notice-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pgto-comprovante-notice-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
}

.pgto-comprovante-notice-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}


/* ===========================================================================
   CONFIRMAÇÃO PAGE
   =========================================================================== */

/* --- Grid --- */
.conf-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    padding: 32px 0 56px;
    align-items: start;
}

.conf-col-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Status Card --- */
.conf-status-card {
    text-align: center;
    padding: 36px 28px;
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 14px;
}

.conf-status-icon {
    font-size: 52px;
    color: #16a34a;
    margin-bottom: 14px;
}

.conf-status-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 8px;
}

.conf-status-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px;
    line-height: 1.5;
}

.conf-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
}

.conf-status-aguardando {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.conf-status-aprovado,
.conf-status-pago {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.conf-status-cancelado {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* --- Error message (upload / NF) --- */
.conf-upload-error,
.conf-nf-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #fca5a5;
}

.conf-upload-error i,
.conf-nf-error i {
    font-size: 18px;
}

/* --- Section blocks --- */
.conf-section {
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 14px;
    padding: 24px;
}

.conf-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.conf-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
    color: #fff;
    background: var(--accent);
}

.conf-icon-comprovante {
    background: #2563eb;
}

.conf-icon-nf {
    background: #7c3aed;
}

.conf-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 2px;
}

.conf-section-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.conf-optional-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #9ca3af;
    vertical-align: middle;
    margin-left: 6px;
}

/* --- Order details --- */
.conf-order-details {
    display: flex;
    flex-direction: column;
}

.conf-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--h-border, #f0f0f0);
}

.conf-detail-row:last-child {
    border-bottom: none;
}

.conf-detail-label {
    font-size: 13px;
    color: #6b7280;
}

.conf-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
}

.conf-detail-highlight {
    color: var(--accent);
    font-size: 14px;
}

/* --- Order items --- */
.conf-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.conf-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--h-border, #f0f0f0);
    border-radius: 10px;
    background: var(--h-bg, #fafafa);
}

.conf-item-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f3f4f6;
}

.conf-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.conf-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    line-height: 1.3;
}

.conf-item-variant {
    font-size: 12px;
    color: #6b7280;
}

.conf-item-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.conf-item-type {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.conf-type-digital {
    background: #ede9fe;
    color: #6d28d9;
}

.conf-type-fisico {
    background: #ecfdf5;
    color: #059669;
}

.conf-item-qty {
    font-size: 12px;
    color: #9ca3af;
}

.conf-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin-left: auto;
}

/* --- Upload comprovante --- */
.conf-upload-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.conf-upload-dropzone {
    border: 2px dashed var(--h-border, #d1d5db);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--h-bg, #fafafa);
}

.conf-upload-dropzone:hover,
.conf-upload-dropzone.is-dragover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 36, 66, 92), .04);
}

.conf-upload-placeholder i {
    font-size: 32px;
    color: #9ca3af;
    margin-bottom: 10px;
    display: block;
}

.conf-upload-text {
    font-size: 14px;
    color: var(--h-text, #374151);
    display: block;
    margin-bottom: 4px;
}

.conf-upload-text strong {
    color: var(--accent);
}

.conf-upload-hint {
    font-size: 12px;
    color: #9ca3af;
    display: block;
}

.conf-upload-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.conf-upload-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--h-border, #e5e7eb);
}

.conf-upload-pdf-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 28px;
}

.conf-upload-preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conf-upload-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    word-break: break-all;
}

.conf-upload-filesize {
    font-size: 12px;
    color: #9ca3af;
}

.conf-upload-remove {
    font-size: 12px;
    color: #dc2626;
    background: none;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.conf-upload-remove:hover {
    background: #fef2f2;
}

.conf-upload-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
    transition: opacity .2s;
}

.conf-upload-send-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.conf-upload-send-btn:not(:disabled):hover {
    opacity: .88;
}

.conf-upload-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #d1fae5;
    color: #065f46;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #6ee7b7;
}

.conf-upload-success i {
    font-size: 18px;
}

/* --- Nota fiscal form --- */
.conf-nf-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.conf-nf-type-toggle {
    display: flex;
    gap: 10px;
}

.conf-nf-type-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 2px solid var(--h-border, #e2e5e9);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    transition: border-color .2s, color .2s, background .2s;
    background: var(--h-bg, #fafafa);
    text-align: center;
}

.conf-nf-type-option input {
    display: none;
}

.conf-nf-type-option.is-selected {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb, 36, 66, 92), .06);
}

.conf-nf-form .pgto-form-row {
    margin-bottom: 0;
}

.conf-nf-form .pgto-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
    display: block;
}

.conf-nf-form .pgto-form-group input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--h-form-input-text, var(--h-text, #1a1a2e));
    background: var(--h-form-input-bg, #fff);
    border: 1px solid var(--h-form-input-border, var(--h-border, #d1d5db));
    border-radius: 8px;
    transition: border-color .2s;
    box-sizing: border-box;
}

.conf-nf-form .pgto-form-group input::placeholder {
    color: var(--h-form-placeholder, #9ca3af);
}

.conf-nf-form .pgto-form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.conf-nf-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.conf-nf-save-btn:hover {
    background: var(--accent);
    color: #fff;
}

.conf-nf-save-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.conf-nf-save-btn.is-saved {
    border-color: #16a34a;
    color: #16a34a;
}

.conf-nf-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #d1fae5;
    color: #065f46;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #6ee7b7;
}

.conf-nf-success i {
    font-size: 18px;
}

/* --- Downloads Section (Produtos Digitais) --- */
.conf-icon-downloads {
    background: #0891b2;
}

.conf-dl-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #fcd34d;
    margin-bottom: 16px;
}

.conf-dl-locked i {
    font-size: 16px;
    flex-shrink: 0;
}

.conf-dl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conf-dl-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--h-border, #e5e7eb);
    border-radius: 10px;
    background: var(--h-bg, #fafafa);
    transition: border-color .2s;
}

.conf-dl-card:hover {
    border-color: var(--accent);
}

.conf-dl-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.conf-dl-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.conf-dl-check input[type="checkbox"]:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.conf-dl-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f3f4f6;
}

.conf-dl-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.conf-dl-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conf-dl-meta {
    font-size: 12px;
    color: #9ca3af;
}

.conf-dl-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.conf-dl-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--h-border, #d1d5db);
    border-radius: 8px;
    background: var(--h-surface, #fff);
    color: #9ca3af;
    font-size: 14px;
    cursor: not-allowed;
    opacity: .4;
    transition: all .2s;
    text-decoration: none;
    padding: 0;
}

.conf-dl-btn.is-enabled,
.conf-dl-btn:not(:disabled):not([aria-disabled="true"]) {
    opacity: 1;
    cursor: pointer;
    color: var(--h-text, #374151);
}

.conf-dl-btn-single.is-enabled:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.conf-dl-btn-email-single:not(:disabled):hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.conf-dl-btn-whatsapp-single:not(:disabled):hover {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.conf-dl-btn.is-sent {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

/* Actions bar */
.conf-dl-actions {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 10px;
    background: var(--h-surface, #fff);
}

.conf-dl-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.conf-dl-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #374151);
    cursor: pointer;
}

.conf-dl-select-all input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.conf-dl-selected-count {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.conf-dl-action-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.conf-dl-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border: none;
}

.conf-dl-action-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.conf-dl-btn-download {
    background: var(--accent);
    color: #fff;
}

.conf-dl-btn-download:not(:disabled):hover {
    opacity: .88;
}

.conf-dl-btn-email {
    background: #2563eb;
    color: #fff;
}

.conf-dl-btn-email:not(:disabled):hover {
    opacity: .88;
}

.conf-dl-btn-email.is-sent {
    background: #d1fae5;
    color: #065f46;
}

.conf-dl-btn-whatsapp {
    background: #25d366;
    color: #fff;
}

.conf-dl-btn-whatsapp:not(:disabled):hover {
    opacity: .88;
}

/* --- Summary sidebar (Confirmação) --- */
.conf-summary {
    position: sticky;
    top: 100px;
}

.conf-summary-order-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--h-border, #e2e5e9);
    margin-top: 2px;
}

.conf-summary-order-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--h-text, #374151);
}

.conf-summary-order-row i {
    width: 18px;
    text-align: center;
    color: var(--accent);
    font-size: 14px;
}

.conf-home-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.conf-discount-row span:first-child {
    color: #16a34a;
    font-weight: 600;
}

/* --- Responsive (Confirmação Page) --- */
@media (max-width: 1199px) {
    .conf-grid {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 991px) {
    .conf-grid {
        grid-template-columns: 1fr;
    }

    .conf-summary {
        position: static;
        order: -1;
    }

    .conf-status-card {
        padding: 28px 20px;
    }

    .conf-status-icon {
        font-size: 44px;
    }

    .conf-status-title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .conf-grid {
        gap: 20px;
        padding: 24px 0 40px;
    }

    .conf-section {
        padding: 18px;
    }

    .conf-status-card {
        padding: 24px 16px;
    }

    .conf-upload-dropzone {
        padding: 20px 14px;
    }

    .conf-nf-type-toggle {
        flex-direction: column;
    }

    .conf-dl-action-btns {
        flex-direction: column;
    }

    .conf-dl-action-btn {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .conf-item {
        flex-direction: column;
        text-align: center;
    }

    .conf-item-img {
        margin: 0 auto;
    }

    .conf-item-bottom {
        justify-content: center;
        flex-wrap: wrap;
    }

    .conf-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .conf-upload-preview {
        flex-direction: column;
        text-align: center;
    }

    .conf-dl-card {
        flex-wrap: wrap;
    }

    .conf-dl-info {
        min-width: calc(100% - 90px);
    }

    .conf-dl-btns {
        margin-left: auto;
    }
}


/* ===========================================================================
   RASTREIO PAGE
   =========================================================================== */

/* --- Hero / Search --- */
.rastreio-hero {
    padding: 56px 0 40px;
    background: var(--h-surface, #f8f9fa);
    border-bottom: 1px solid var(--h-border, #e2e5e9);
}

.rastreio-hero-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.rastreio-hero-icon {
    font-size: 44px;
    color: var(--accent);
    margin-bottom: 14px;
}

.rastreio-hero-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 8px;
}

.rastreio-hero-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 28px;
    line-height: 1.55;
}

.rastreio-search-wrap {
    display: flex;
    align-items: center;
    background: var(--h-form-input-bg, #fff);
    border: 2px solid var(--h-border, #d1d5db);
    border-radius: 14px;
    padding: 6px 6px 6px 18px;
    transition: border-color .25s, box-shadow .25s;
}

.rastreio-search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 36, 66, 92), .1);
}

.rastreio-search-icon {
    font-size: 16px;
    color: #9ca3af;
    margin-right: 12px;
    flex-shrink: 0;
}

.rastreio-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--h-form-input-text, var(--h-text, #1a1a2e));
    letter-spacing: 1.5px;
    outline: none;
    min-width: 0;
    padding: 8px 0;
}

.rastreio-search-input::placeholder {
    color: var(--h-form-placeholder, #9ca3af);
    font-weight: 400;
    letter-spacing: 0;
}

.rastreio-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
    transition: opacity .2s;
    flex-shrink: 0;
}

.rastreio-search-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.rastreio-search-btn:not(:disabled):hover {
    opacity: .88;
}

.rastreio-search-hint {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #9ca3af;
}

/* --- Result Grid --- */
.rastreio-result-section {
    padding: 32px 0 56px;
}

.rastreio-result-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

.rastreio-col-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Current Status Card --- */
.rastreio-current-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid var(--h-border, #e2e5e9);
    background: var(--h-surface, #fff);
}

.rastreio-current-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    color: #fff;
    background: #6b7280;
}

.rastreio-status-posted .rastreio-current-icon {
    background: #6366f1;
}

.rastreio-status-transit .rastreio-current-icon {
    background: #f59e0b;
}

.rastreio-status-out .rastreio-current-icon {
    background: #0891b2;
}

.rastreio-status-delivered .rastreio-current-icon {
    background: #16a34a;
}

.rastreio-current-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rastreio-current-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
}

.rastreio-current-desc {
    font-size: 13px;
    color: #6b7280;
}

.rastreio-current-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.rastreio-badge-posted {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.rastreio-badge-transit {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.rastreio-badge-out {
    background: #cffafe;
    color: #155e75;
    border: 1px solid #67e8f9;
}

.rastreio-badge-delivered {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

/* --- Progress Bar --- */
.rastreio-progress {
    padding: 24px;
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 14px;
}

.rastreio-progress-bar {
    height: 6px;
    background: var(--h-border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}

.rastreio-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

.rastreio-progress-steps {
    display: flex;
    justify-content: space-between;
}

.rastreio-pstep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rastreio-pstep-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--h-border, #d1d5db);
    border: 2px solid var(--h-border, #d1d5db);
    transition: all .3s;
}

.rastreio-pstep.is-done .rastreio-pstep-dot {
    background: var(--accent);
    border-color: var(--accent);
}

.rastreio-pstep.is-current .rastreio-pstep-dot {
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 36, 66, 92), .2);
}

.rastreio-pstep-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-align: center;
}

.rastreio-pstep.is-done .rastreio-pstep-label {
    color: var(--h-text, #374151);
}

/* --- Section --- */
.rastreio-section {
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 14px;
    padding: 24px;
}

.rastreio-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.rastreio-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
    color: #fff;
    background: var(--accent);
}

.rastreio-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 2px;
}

.rastreio-section-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* --- Timeline --- */
.rastreio-timeline {
    position: relative;
    padding-left: 28px;
}

.rastreio-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--h-border, #e5e7eb);
}

.rastreio-event {
    position: relative;
    padding: 0 0 24px 20px;
}

.rastreio-event:last-child {
    padding-bottom: 0;
}

.rastreio-event-dot {
    position: absolute;
    left: -28px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: var(--h-surface, #fff);
    border: 2px solid var(--h-border, #d1d5db);
    color: #9ca3af;
    z-index: 1;
}

.rastreio-event.is-latest .rastreio-event-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 36, 66, 92), .15);
}

.rastreio-ev-delivered.is-latest .rastreio-event-dot {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
}

.rastreio-ev-out.is-latest .rastreio-event-dot {
    background: #0891b2;
    border-color: #0891b2;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, .15);
}

.rastreio-event-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.rastreio-event-date {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.rastreio-event-latest-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
}

.rastreio-event-desc {
    font-size: 14px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 4px;
    line-height: 1.4;
}

.rastreio-event-location {
    font-size: 12px;
    color: #9ca3af;
}

.rastreio-event-location i {
    font-size: 11px;
    margin-right: 3px;
}

/* --- Sidebar --- */
.rastreio-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 100px;
}

.rastreio-sidebar-card {
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 14px;
    padding: 20px;
}

.rastreio-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rastreio-sidebar-title i {
    color: var(--accent);
    font-size: 15px;
}

.rastreio-sidebar-rows {
    display: flex;
    flex-direction: column;
}

.rastreio-sidebar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--h-border, #f0f0f0);
}

.rastreio-sidebar-row:last-child {
    border-bottom: none;
}

.rastreio-sidebar-label {
    font-size: 12px;
    color: #6b7280;
}

.rastreio-sidebar-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
}

.rastreio-code-val {
    color: var(--accent);
    font-family: monospace;
    letter-spacing: .5px;
}

.rastreio-estimate {
    color: #16a34a;
}

/* --- Route --- */
.rastreio-route {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
}

.rastreio-route-point {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rastreio-route-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rastreio-route-origin {
    background: var(--accent);
}

.rastreio-route-dest {
    background: #16a34a;
}

.rastreio-route-label {
    font-size: 11px;
    color: #9ca3af;
    display: block;
}

.rastreio-route-city {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    display: block;
}

.rastreio-route-line {
    width: 2px;
    height: 20px;
    background: var(--h-border, #e5e7eb);
    margin-left: 5px;
}

/* --- Side Actions --- */
.rastreio-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rastreio-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border: 2px solid var(--h-border, #e2e5e9);
    background: var(--h-surface, #fff);
    color: var(--h-text, #374151);
}

.rastreio-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.rastreio-action-new {
    border-color: var(--accent);
    color: var(--accent);
}

.rastreio-action-new:hover {
    background: var(--accent);
    color: #fff;
}

/* --- Empty / Error state --- */
.rastreio-empty-section {
    padding: 60px 0;
}

.rastreio-empty {
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

.rastreio-empty>i {
    font-size: 52px;
    color: #d1d5db;
    margin-bottom: 18px;
}

.rastreio-empty h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 8px;
}

.rastreio-empty p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.55;
    margin: 0 0 24px;
}

.rastreio-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    transition: all .2s;
}

.rastreio-empty-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* --- Responsive (Rastreio Page) --- */
@media (max-width: 1199px) {
    .rastreio-result-grid {
        grid-template-columns: 1fr 320px;
    }
}

@media (max-width: 991px) {
    .rastreio-result-grid {
        grid-template-columns: 1fr;
    }

    .rastreio-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rastreio-sidebar-card {
        flex: 1;
        min-width: 260px;
    }

    .rastreio-sidebar-actions {
        flex-direction: row;
        flex: 100%;
    }
}

@media (max-width: 767px) {
    .rastreio-hero {
        padding: 36px 0 28px;
    }

    .rastreio-hero-title {
        font-size: 22px;
    }

    .rastreio-search-btn {
        padding: 12px 16px;
    }

    .rastreio-btn-text {
        display: none;
    }

    .rastreio-current-status {
        flex-wrap: wrap;
    }

    .rastreio-current-badge {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    .rastreio-progress-steps {
        gap: 4px;
    }

    .rastreio-pstep-label {
        font-size: 10px;
    }
}

@media (max-width: 575px) {
    .rastreio-sidebar {
        flex-direction: column;
    }

    .rastreio-sidebar-card {
        min-width: auto;
    }

    .rastreio-sidebar-actions {
        flex-direction: column;
    }

    .rastreio-section {
        padding: 18px;
    }

    .rastreio-timeline {
        padding-left: 24px;
    }

    .rastreio-event-dot {
        left: -24px;
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .rastreio-timeline::before {
        left: 9px;
    }
}


/* ===========================================================================
   TOP FAVORITES (Header icon)
   =========================================================================== */
#top-fav {
    position: relative;
}

#top-fav>a {
    position: relative;
}

.top-fav-count {
    position: absolute;
    top: -7px;
    right: -8px;
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    line-height: 1;
    color: #ffffff;
    background: #ef4444;
}


/* ===========================================================================
   FAVORITOS PAGE
   =========================================================================== */

/* --- Hero --- */
.fav-hero {
    padding: 40px 0 28px;
    background: var(--h-surface, #f8f9fa);
    border-bottom: 1px solid var(--h-border, #e2e5e9);
}

.fav-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fav-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fav-hero-title i {
    color: #ef4444;
}

.fav-hero-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* --- Toolbar --- */
.fav-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 16px;
    flex-wrap: wrap;
}

.fav-toolbar-left,
.fav-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fav-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--h-text, #374151);
}

.fav-view-toggle {
    display: flex;
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 8px;
    overflow: hidden;
}

.fav-view-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--h-surface, #fff);
    color: #9ca3af;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}

.fav-view-btn+.fav-view-btn {
    border-left: 1px solid var(--h-border, #e2e5e9);
}

.fav-view-btn.is-active {
    background: var(--accent);
    color: #fff;
}

.fav-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.fav-sort-select {
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #d1d5db);
    border-radius: 8px;
    cursor: pointer;
    appearance: auto;
}

.fav-clear-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.fav-clear-btn:hover {
    background: #fef2f2;
}

/* --- Grid --- */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    padding-bottom: 56px;
}

/* --- Card --- */
.fav-card {
    background: var(--h-surface, #fff);
    border: 1px solid var(--h-border, #e2e5e9);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, opacity .3s;
}

.fav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.fav-card.is-removing {
    opacity: 0;
    transform: scale(.92);
}

.fav-card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f4f6;
}

.fav-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.fav-card:hover .fav-card-img {
    transform: scale(1.05);
}

.fav-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: var(--accent);
    color: #fff;
}

.fav-card-discount {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: #dc2626;
    color: #fff;
}

.fav-card-remove {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s;
}

.fav-card:hover .fav-card-remove {
    opacity: 1;
}

.fav-card-remove:hover {
    background: #dc2626;
}

/* Card body */
.fav-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fav-card-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--accent);
}

.fav-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--h-text, #1a1a2e);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fav-card-name:hover {
    color: var(--accent);
}

.fav-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fav-card-stars {
    display: flex;
    gap: 1px;
    font-size: 11px;
    color: #f59e0b;
}

.fav-card-reviews {
    font-size: 11px;
    color: #9ca3af;
}

.fav-card-prices {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.fav-card-old-price {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
}

.fav-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
}

.fav-card-actions {
    margin-top: 8px;
}

.fav-card-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
    transition: opacity .2s;
}

.fav-card-cart-btn:hover {
    opacity: .88;
}

.fav-card-cart-btn:disabled {
    cursor: default;
}

.fav-card-cart-btn.is-added {
    background: #16a34a;
}

/* --- List view --- */
.fav-grid-list {
    grid-template-columns: 1fr;
}

.fav-grid-list .fav-card {
    display: grid;
    grid-template-columns: 180px 1fr;
}

.fav-grid-list .fav-card-img-wrap {
    aspect-ratio: auto;
    height: 100%;
}

.fav-grid-list .fav-card-body {
    padding: 20px;
    justify-content: center;
}

.fav-grid-list .fav-card-actions {
    max-width: 240px;
}

/* --- Empty state --- */
.fav-empty-inner {
    max-width: 420px;
    margin: 60px auto;
    text-align: center;
}

.fav-empty-inner>i {
    font-size: 56px;
    color: #d1d5db;
    margin-bottom: 18px;
}

.fav-empty-inner h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text, #1a1a2e);
    margin: 0 0 8px;
}

.fav-empty-inner p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.55;
}

.fav-empty-inner p>i {
    color: #ef4444;
}

.fav-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: var(--accent);
    text-decoration: none;
    transition: opacity .2s;
}

.fav-empty-btn:hover {
    opacity: .88;
}

/* --- Responsive (Favoritos Page) --- */
@media (max-width: 991px) {
    .fav-grid-list .fav-card {
        grid-template-columns: 140px 1fr;
    }
}

@media (max-width: 767px) {
    .fav-hero {
        padding: 28px 0 20px;
    }

    .fav-hero-title {
        font-size: 20px;
    }

    .fav-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fav-toolbar-left,
    .fav-toolbar-right {
        justify-content: space-between;
    }

    .fav-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .fav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .fav-card-body {
        padding: 12px;
    }

    .fav-card-name {
        font-size: 13px;
    }

    .fav-grid-list {
        grid-template-columns: 1fr;
    }

    .fav-grid-list .fav-card {
        grid-template-columns: 120px 1fr;
    }

    .fav-card-remove {
        opacity: 1;
    }
}


/* ===========================================================================
   PDP — ZOOM LENS
   =========================================================================== */

.pdp-zoom-lens {
    display: none;
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 8px 32px rgba(0, 0, 0, .18);
    background: rgba(255, 255, 255, .15);
    pointer-events: none;
    z-index: 5;
    backdrop-filter: blur(1px);
    transition: none;
    transform: translate(-50%, -50%);
}

.pdp-zoom-result {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 18px);
    width: 420px;
    height: 420px;
    border-radius: var(--h-radius-md);
    border: 1px solid var(--h-border);
    background-color: var(--h-surface);
    background-repeat: no-repeat;
    box-shadow: var(--h-shadow-md);
    z-index: 50;
    pointer-events: none;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .pdp-zoom-result {
        width: 340px;
        height: 340px;
    }
}

@media (max-width: 768px) {

    .pdp-zoom-lens,
    .pdp-zoom-result {
        display: none !important;
    }
}


/* ===========================================================================
   PDP — COMENTÁRIOS DO SERVIÇO
   =========================================================================== */

.pdp-comments {
    padding: 0 0 72px;
    background: var(--h-bg);
}

.pdp-comments .pdp-section-header h2 i {
    color: var(--accent);
    margin-right: 8px;
}

/* topbar: contagem + filtros */
.pdp-comments-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
}

.pdp-comments-stat {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pdp-comments-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--h-text);
}

.pdp-comments-avg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--h-muted);
}

.pdp-comments-avg .loja-stars {
    font-size: 13px;
}

.pdp-comments-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pdp-comment-filter {
    padding: 6px 16px;
    border-radius: var(--h-radius-pill);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--h-fast);
}

.pdp-comment-filter i {
    font-size: 11px;
    color: var(--h-star-color);
}

.pdp-comment-filter:hover {
    border-color: var(--accent);
    color: var(--h-text);
}

.pdp-comment-filter.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pdp-comment-filter.active i {
    color: #fff;
}

/* scroll container */
.pdp-comments-scroll {
    max-height: 620px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 6px;
    margin-bottom: 24px;
    scroll-behavior: smooth;
}

.pdp-comments-scroll::-webkit-scrollbar {
    width: 5px;
}

.pdp-comments-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pdp-comments-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--h-radius-pill);
}

.pdp-comments-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* comment card */
.pdp-comment-card {
    display: flex;
    gap: 20px;
    padding: 24px 28px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    transition: all var(--h-base);
    animation: pdpFadeIn .4s ease both;
}

.pdp-comment-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: var(--h-shadow-sm);
}

.pdp-comment-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    text-align: center;
}

.pdp-comment-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #6366f1));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

.pdp-comment-author-info strong {
    display: block;
    font-size: 14px;
    color: var(--h-text);
    white-space: nowrap;
}

.pdp-comment-location {
    font-size: 11px;
    color: var(--h-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.pdp-comment-location i {
    font-size: 9px;
    color: var(--accent);
}

/* body */
.pdp-comment-body {
    flex: 1;
    min-width: 0;
}

.pdp-comment-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pdp-comment-top .loja-stars {
    font-size: 13px;
}

.pdp-comment-date {
    font-size: 12px;
    color: var(--h-muted);
    white-space: nowrap;
}

.pdp-comment-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 6px;
}

.pdp-comment-text {
    font-size: 14px;
    color: var(--h-text-secondary);
    line-height: 1.65;
    margin: 0 0 12px;
}

/* tags */
.pdp-comment-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pdp-comment-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.pdp-comment-tag i {
    font-size: 10px;
}

/* fotos do comentário */
.pdp-comment-photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.pdp-comment-photo {
    display: block;
    width: 68px;
    height: 68px;
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--h-border);
    background: none;
    padding: 0;
    cursor: pointer;
    transition: border-color .2s;
}

.pdp-comment-photo:hover {
    border-color: var(--accent);
}

.pdp-comment-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* lightbox fotos de comentários */
.pdp-comment-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.pdp-comment-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.pdp-comment-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}

.pdp-comment-lightbox-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90vw;
    height: 90vh;
    max-width: 900px;
}

.pdp-comment-lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pdp-comment-lightbox-img-wrap img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--h-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .4);
}

.pdp-comment-lightbox-close {
    position: absolute;
    top: -40px;
    right: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-comment-lightbox-close:hover {
    background: rgba(255, 255, 255, .3);
}

.pdp-comment-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-comment-lightbox-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.pdp-comment-lightbox-prev {
    left: -60px;
}

.pdp-comment-lightbox-next {
    right: -60px;
}

.pdp-comment-lightbox-counter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .pdp-comment-lightbox-prev {
        left: 8px;
    }

    .pdp-comment-lightbox-next {
        right: 8px;
    }

    .pdp-comment-lightbox-close {
        top: 8px;
        right: 8px;
    }

    .pdp-comment-lightbox-counter {
        bottom: 16px;
    }
}

/* estado vazio */
.pdp-comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--h-text-muted);
    text-align: center;
}

.pdp-comments-empty i {
    font-size: 36px;
    opacity: .45;
}

.pdp-comments-empty p {
    margin: 0;
    font-size: 14px;
}

/* paginação */
.pdp-comments-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pdp-comments-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--h-radius-sm);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--h-fast);
}

.pdp-comments-page-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pdp-comments-page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pdp-comments-page-next {
    padding: 0 20px;
}

/* ============ COMENTÁRIOS RESPONSIVO ============ */
@media (max-width: 768px) {
    .pdp-comment-card {
        flex-direction: column;
        gap: 14px;
        padding: 18px 20px;
    }

    .pdp-comment-left {
        flex-direction: row;
        min-width: auto;
        text-align: left;
    }

    .pdp-comments-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .pdp-comments-scroll {
        max-height: 480px;
    }
}

@media (max-width: 480px) {
    .pdp-comments-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pdp-comments-filters::-webkit-scrollbar {
        display: none;
    }

    .pdp-comment-filter {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .pdp-comments-scroll {
        max-height: 400px;
    }

    .pdp-comment-title {
        font-size: 15px;
    }

    .pdp-comment-form {
        padding: 16px;
    }

    .pdp-comment-form-rating {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pdp-comment-form-actions {
        flex-direction: column;
    }

    .pdp-comment-cancel,
    .pdp-comment-submit {
        width: 100%;
        justify-content: center;
    }

    .pdp-new-comment-toggle {
        width: 100%;
        justify-content: center;
    }
}


/* ===========================================================================
   PDP — NOVO COMENTÁRIO (botão + form + login gate)
   =========================================================================== */

/* botão toggle */
.pdp-new-comment-wrap {
    margin-bottom: 28px;
}

.pdp-new-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--h-radius-sm);
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--h-fast);
}

.pdp-new-comment-toggle:hover,
.pdp-new-comment-toggle.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* area container */
.pdp-new-comment-area {
    margin-top: 20px;
    animation: pdpFadeIn .35s ease both;
}

/* ========== FORM (logado) ========== */
.pdp-comment-form {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px 32px;
}

.pdp-comment-form-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--h-border);
}

.pdp-comment-form-header strong {
    display: block;
    font-size: 15px;
    color: var(--h-text);
}

.pdp-comment-form-header small {
    font-size: 12px;
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* star picker */
.pdp-comment-form-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.pdp-comment-form-rating label {
    font-size: 14px;
    color: var(--h-text-secondary);
    font-weight: 600;
}

.pdp-star-picker {
    display: flex;
    gap: 4px;
}

.pdp-star-picker button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 22px;
    color: var(--h-star-color);
    transition: transform .15s ease;
}

.pdp-star-picker button:hover {
    transform: scale(1.25);
}

.pdp-star-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--h-star-color);
    min-width: 70px;
}

/* form fields */
.pdp-comment-form-field {
    margin-bottom: 14px;
    position: relative;
}

.pdp-comment-form-field input,
.pdp-comment-form-field textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--h-radius-sm);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface-soft);
    color: var(--h-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
    outline: none;
    resize: vertical;
}

.pdp-comment-form-field input::placeholder,
.pdp-comment-form-field textarea::placeholder {
    color: var(--h-muted);
}

.pdp-comment-form-field input:focus,
.pdp-comment-form-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.pdp-comment-char-count {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 11px;
    color: var(--h-muted);
    pointer-events: none;
}

/* Tag picker */
.pdp-comment-form-tags {
    margin-bottom: 16px;
}

.pdp-comment-form-tags label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-secondary);
    margin-bottom: 8px;
}

.pdp-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pdp-tag-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--h-radius-pill);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.pdp-tag-option:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.pdp-tag-option.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

.pdp-tag-option i {
    font-size: 11px;
}

.pdp-tag-group-label {
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--h-text-secondary);
    margin-top: 6px;
    padding-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pdp-tag-group-label:first-child {
    margin-top: 0;
}

.pdp-tag-group-label i {
    font-size: 12px;
    color: var(--accent);
}

/* Photo upload */
.pdp-comment-form-photos {
    margin-bottom: 16px;
}

.pdp-comment-form-photos>label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-secondary);
    margin-bottom: 8px;
}

.pdp-comment-form-photos>label small {
    font-weight: 400;
    color: var(--h-muted);
}

.pdp-photo-upload-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface-soft);
    transition: border-color var(--h-fast);
}

.pdp-photo-upload-area:has(.pdp-photo-add-btn:hover) {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.pdp-photo-previews {
    display: contents;
}

.pdp-photo-preview {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--h-border);
    background: var(--h-bg);
    flex-shrink: 0;
}

.pdp-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdp-photo-preview-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--h-fast);
}

.pdp-photo-preview:hover .pdp-photo-preview-remove {
    opacity: 1;
}

/* Dropzone completo quando não há fotos */
.pdp-photo-previews:empty~.pdp-photo-add-btn {
    width: 100%;
    height: 72px;
    flex-direction: row;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
    border-style: dashed;
}

.pdp-photo-previews:empty~.pdp-photo-add-btn i {
    font-size: 26px;
    flex-shrink: 0;
}

/* Tile pequeno quando há fotos */
.pdp-photo-previews:not(:empty)~.pdp-photo-add-btn {
    width: 76px;
    height: 76px;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    border-style: dashed;
}

.pdp-photo-previews:not(:empty)~.pdp-photo-add-btn .pdp-photo-add-texts {
    display: none;
}

.pdp-photo-previews:not(:empty)~.pdp-photo-add-btn i {
    font-size: 18px;
}

/* Base do botão (comum) */
.pdp-photo-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--h-radius-sm);
    border: 2px dashed var(--h-border);
    background: transparent;
    color: var(--h-muted);
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
    text-align: left;
}

.pdp-photo-add-btn i {
    font-size: 18px;
    flex-shrink: 0;
}

.pdp-photo-add-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.pdp-photo-add-texts small {
    font-size: 11px;
    font-weight: 400;
    color: var(--h-muted);
    opacity: .85;
}

.pdp-photo-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.pdp-photo-add-btn:hover .pdp-photo-add-texts small {
    color: var(--accent);
    opacity: .75;
}

.pdp-photo-add-btn.hidden {
    display: none;
}

/* actions */
.pdp-comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.pdp-comment-cancel {
    padding: 10px 22px;
    border-radius: var(--h-radius-sm);
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
}

.pdp-comment-cancel:hover {
    border-color: var(--h-text-secondary);
    color: var(--h-text);
}

.pdp-comment-submit {
    padding: 10px 28px;
    border-radius: var(--h-radius-sm);
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--h-fast);
}

.pdp-comment-submit:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.pdp-comment-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pdp-comment-submit.sent {
    background: #16a34a;
    opacity: 1;
}

/* ========== LOGIN GATE (não logado) ========== */
.pdp-comment-login-gate {
    text-align: center;
    padding: 48px 32px;
    background: var(--h-surface);
    border: 1.5px dashed var(--h-border);
    border-radius: var(--h-radius-md);
}

.pdp-login-gate-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.pdp-comment-login-gate h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 8px;
}

.pdp-comment-login-gate p {
    font-size: 14px;
    color: var(--h-muted);
    margin: 0 0 24px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.pdp-login-gate-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pdp-login-gate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--h-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--h-fast);
    cursor: pointer;
}

.pdp-login-gate-primary {
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--accent);
}

.pdp-login-gate-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    color: #fff;
    transform: translateY(-1px);
}

.pdp-login-gate-secondary {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
}

.pdp-login-gate-secondary:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.pdp-comment-login-gate small {
    font-size: 12px;
    color: var(--h-muted);
}

/* ========== RESPONSIVO ========== */
@media (max-width: 768px) {
    .pdp-comment-form {
        padding: 20px;
    }

    .pdp-comment-form-rating {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pdp-comment-form-actions {
        flex-direction: column;
    }

    .pdp-comment-cancel,
    .pdp-comment-submit {
        width: 100%;
        justify-content: center;
    }

    .pdp-comment-login-gate {
        padding: 32px 20px;
    }
}

@media (max-width: 480px) {
    .pdp-new-comment-toggle {
        width: 100%;
        justify-content: center;
    }

    .pdp-star-picker button {
        font-size: 26px;
    }
}


/* ===========================================================================
   MODAIS GLOBAIS — ALPHARD DESIGN SYSTEM
   =========================================================================== */

/* Container do modal */
.alph-modal {
    position: relative;
    width: 440px;
    max-width: 94vw;
    margin: 40px auto;
    background: var(--h-surface);
    border-radius: var(--h-radius-md);
    box-shadow: var(--h-shadow-md), 0 0 0 1px var(--h-border);
    padding: 40px 36px 32px;
    animation: alphModalIn .35s cubic-bezier(.2, .8, .2, 1) both;
}

.alph-modal-wide {
    width: 520px;
}

@keyframes alphModalIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fechar */
.alph-modal-close,
.alph-modal-close:active,
.alph-modal-close:focus {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--h-surface-soft);
    color: var(--h-muted);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--h-fast);
    z-index: 2;
    opacity: 1;
    padding: 0;
    text-align: center;
    line-height: 36px;
}

.alph-modal-close:hover {
    background: var(--h-border);
    color: var(--h-text);
    transform: rotate(90deg);
}

/* Header */
.alph-modal-header {
    text-align: center;
    margin-bottom: 28px;
}

.alph-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.alph-modal-icon-warning {
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    color: #f59e0b;
}

.alph-modal-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.alph-modal-sub {
    font-size: 14px;
    color: var(--h-muted);
    margin: 0;
    line-height: 1.5;
}

/* Form */
.alph-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alph-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alph-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text-secondary);
    letter-spacing: 0.02em;
}

.alph-label-optional {
    font-weight: 400;
    color: var(--h-muted);
}

/* Input wrap */
.alph-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--h-surface-soft);
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.alph-input-wrap>i:first-child {
    font-size: 15px;
    color: var(--h-muted);
    flex-shrink: 0;
    transition: color var(--h-fast);
}

.alph-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.alph-input-wrap:focus-within>i:first-child {
    color: var(--accent);
}

.alph-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 14px;
    color: var(--h-text);
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.alph-input-wrap input::placeholder {
    color: var(--h-muted);
}

/* Password toggle */
.alph-password-toggle {
    background: none;
    border: none;
    color: var(--h-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 15px;
    flex-shrink: 0;
    transition: color var(--h-fast);
}

.alph-password-toggle:hover {
    color: var(--h-text-secondary);
}

/* 2 colunas */
.alph-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.alph-form-row-2col>.alph-form-group {
    min-width: 0;
}

/* Link auxiliar */
.alph-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alph-check-inline {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.alph-check-inline label {
    font-size: 13px;
    color: var(--h-text-secondary);
    font-weight: 500;
}

.alph-link-forgot {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: opacity var(--h-fast);
}

.alph-link-forgot:hover {
    opacity: .75;
    color: var(--accent);
}

/* Checkbox termos */
.alph-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.alph-form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.alph-form-check label {
    font-size: 12px;
    color: var(--h-muted);
    line-height: 1.55;
    cursor: pointer;
}

.alph-form-check label a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.alph-form-check label a:hover {
    text-decoration: underline;
}

/* Mensagem de feedback */
.alph-form-message {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    min-height: 20px;
    border-radius: var(--h-radius-sm);
    padding: 0 12px;
    transition: all var(--h-fast);
}

.alph-form-message:not(:empty) {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--h-border) 40%, transparent);
}

/* Botão principal */
.alph-btn-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--h-radius-sm);
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--h-fast);
    letter-spacing: 0.01em;
}

.alph-btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-1px);
}

.alph-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Divider */
.alph-modal-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.alph-modal-divider::before,
.alph-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--h-border);
}

.alph-modal-divider span {
    font-size: 12px;
    color: var(--h-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Footer */
.alph-modal-footer {
    text-align: center;
}

.alph-modal-footer p {
    font-size: 14px;
    color: var(--h-muted);
    margin: 0 0 12px;
}

.alph-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: var(--h-radius-sm);
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--h-fast);
}

.alph-btn-outline:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Override mfp bg para usar o overlay do design system */
.mfp-bg {
    background: var(--h-overlay-bg) !important;
    backdrop-filter: blur(4px);
}

/* Validation states */
.alph-input-valid,
.alph-input-invalid {
    display: none;
    font-size: 15px;
    flex-shrink: 0;
}

.alph-input-valid {
    color: #16a34a;
}

.alph-input-invalid {
    color: #dc2626;
}

.alph-wrap-valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .1) !important;
}

.alph-wrap-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1) !important;
}

.alph-input-hint {
    font-size: 12px;
    font-weight: 500;
    min-height: 16px;
    transition: color var(--h-fast);
}

.alph-hint-valid {
    color: #16a34a;
}

.alph-hint-invalid {
    color: #dc2626;
}

/* RESPONSIVO MODAL */
@media (max-width: 576px) {
    .alph-modal {
        padding: 32px 20px 24px;
        margin: 16px auto;
        border-radius: var(--h-radius-sm);
    }

    .alph-modal-wide {
        width: 94vw;
    }

    .alph-modal-title {
        font-size: 20px;
    }

    .alph-modal-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .alph-form-row-2col {
        grid-template-columns: 1fr;
    }

    .alph-btn-primary {
        padding: 14px 20px;
    }
}


/* =====================================================================
   BLOG PAGE
   ===================================================================== */

/* --- Hero --- */
.blog-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.blog-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.blog-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.blog-hero .blog-breadcrumb,
.blog-hero .blog-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.blog-hero .blog-breadcrumb a:hover {
    color: #fff;
}

.blog-hero .blog-breadcrumb i {
    opacity: .35;
}

.blog-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--h-muted);
}

.blog-breadcrumb a {
    color: var(--h-muted);
    text-decoration: none;
    transition: color var(--h-fast);
}

.blog-breadcrumb a:hover {
    color: var(--accent);
}

.blog-breadcrumb i {
    font-size: 9px;
    opacity: 0.5;
}

.blog-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.blog-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero-sub {
    max-width: 600px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.blog-hero-search {
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--h-radius-pill);
    padding: 6px 6px 6px 20px;
    backdrop-filter: blur(8px);
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.blog-hero-search:focus-within {
    border-color: rgba(255, 255, 255, .4);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}

.blog-hero-search i {
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    margin-right: 12px;
    flex-shrink: 0;
}

.blog-hero-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #fff;
    font-family: inherit;
}

.blog-hero-search input::placeholder {
    color: rgba(255, 255, 255, .45);
}

#blog-search-btn {
    flex-shrink: 0;
    padding: 10px 24px;
    background: #fff;
    color: var(--accent);
    border: none;
    border-radius: var(--h-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
}

#blog-search-btn:hover {
    background: rgba(255, 255, 255, .9);
    transform: translateY(-1px);
}

/* --- Categories --- */
.blog-categories {
    padding: 24px 0;
    background: var(--h-bg);
    border-bottom: 1px solid var(--h-border);
    position: sticky;
    top: 0;
    z-index: 90;
}

.blog-cat-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--h-border) transparent;
    -webkit-overflow-scrolling: touch;
}

.blog-cat-scroll::-webkit-scrollbar {
    height: 4px;
}

.blog-cat-scroll::-webkit-scrollbar-thumb {
    background: var(--h-border);
    border-radius: 4px;
}

.blog-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.blog-cat-pill i {
    font-size: 13px;
    opacity: 0.65;
    transition: opacity var(--h-fast);
}

.blog-cat-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
}

.blog-cat-pill:hover i {
    opacity: 1;
}

.blog-cat-pill.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

.blog-cat-pill.is-active i {
    opacity: 1;
}

/* --- Main --- */
.blog-main {
    padding: 48px 0 60px;
    background: var(--h-bg);
}

/* --- Featured --- */
.blog-featured {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 56px;
}

.blog-feat-main-link {
    display: block;
    position: relative;
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    min-height: 420px;
}

.blog-feat-main-img {
    position: absolute;
    inset: 0;
}

.blog-feat-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-feat-main-link:hover .blog-feat-main-img img {
    transform: scale(1.05);
}

.blog-feat-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px;
    color: #fff;
}

.blog-feat-cat {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--h-radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    width: fit-content;
}

.blog-feat-main-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -0.02em;
}

.blog-feat-main-excerpt {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-feat-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.blog-feat-meta i {
    margin-right: 4px;
}

/* Featured side */
.blog-feat-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-feat-side-card {
    display: flex;
    gap: 16px;
    background: var(--h-surface);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--h-border);
    transition: box-shadow var(--h-fast), transform var(--h-fast);
    flex: 1;
}

.blog-feat-side-card:hover {
    box-shadow: var(--h-shadow-sm);
    transform: translateY(-2px);
}

.blog-feat-side-img {
    width: 160px;
    min-height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.blog-feat-side-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-feat-side-card:hover .blog-feat-side-img img {
    transform: scale(1.05);
}

.blog-feat-side-body {
    padding: 18px 18px 18px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.blog-feat-cat-sm {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.blog-feat-side-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-feat-side-card:hover .blog-feat-side-title {
    color: var(--accent);
}

.blog-feat-side .blog-feat-meta {
    color: var(--h-muted);
    font-size: 12.5px;
    gap: 12px;
}

/* --- Section head --- */
.blog-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

/* ─── Tag-filter banner ──────────────────────────────────── */
.blog-tag-banner {
    background: linear-gradient(90deg, #eef2ff 0%, #f0fdf4 100%);
    border-bottom: 1px solid #c7d2fe;
    padding: 14px 0;
}

.blog-tag-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-tag-banner-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #374151;
}

.blog-tag-banner-info i {
    color: #6366f1;
    font-size: 16px;
}

.blog-tag-banner-info strong {
    color: #4f46e5;
    font-weight: 700;
    text-transform: capitalize;
}

.blog-tag-banner-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #c7d2fe;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.blog-tag-banner-clear:hover {
    background: #e0e7ff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, .15);
}

.blog-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.blog-result-count {
    font-size: 14px;
    color: var(--h-muted);
    font-weight: 500;
}

/* --- Blog grid --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --- Blog card --- */
.blog-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--h-fast), transform var(--h-fast);
}

.blog-card:hover {
    box-shadow: var(--h-shadow-sm);
    transform: translateY(-4px);
}

.blog-card-img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.06);
}

.blog-card-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
}

.blog-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--h-muted);
    margin-bottom: 12px;
}

.blog-card-meta i {
    margin-right: 4px;
}

.blog-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text);
    text-decoration: none;
    line-height: 1.35;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--h-fast);
}

.blog-card-title:hover {
    color: var(--accent);
}

.blog-card-excerpt {
    font-size: 14px;
    color: var(--h-text-secondary);
    line-height: 1.6;
    margin: 0 0 auto;
    padding-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--h-border);
    gap: 12px;
}

.blog-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.blog-card-author-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-card-author-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: gap var(--h-fast);
}

.blog-card-read-more:hover {
    gap: 10px;
}

/* --- Pagination --- */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 48px;
}

.blog-page-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.blog-page-btn:hover:not(:disabled):not(.is-active) {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
}

.blog-page-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.blog-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.blog-page-prev,
.blog-page-next {
    font-size: 13px;
}

/* --- Empty state --- */
.blog-empty {
    padding: 80px 0;
}

.blog-empty-inner {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}

.blog-empty-inner>i {
    font-size: 64px;
    color: var(--h-border);
    margin-bottom: 24px;
    display: block;
}

.blog-empty-inner h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.blog-empty-inner p {
    font-size: 15px;
    color: var(--h-muted);
    margin: 0 0 28px;
    line-height: 1.6;
}

.blog-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--h-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.blog-empty-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* --- Newsletter --- */
.blog-newsletter {
    padding: 0 0 80px;
    background: var(--h-bg);
}

.blog-newsletter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--h-surface)), var(--h-surface));
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 40px 48px;
    box-shadow: var(--h-shadow-sm);
}

.blog-newsletter-text {
    flex: 1;
    min-width: 0;
}

.blog-newsletter-icon {
    font-size: 32px;
    color: var(--accent);
    margin-bottom: 12px;
    display: block;
}

.blog-newsletter-text h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.blog-newsletter-text p {
    font-size: 14.5px;
    color: var(--h-text-secondary);
    margin: 0;
}

.blog-newsletter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.blog-newsletter-form input {
    padding: 12px 20px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14px;
    font-family: inherit;
    width: 280px;
    outline: none;
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.blog-newsletter-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.blog-newsletter-form input::placeholder {
    color: var(--h-muted);
}

#blog-newsletter-btn {
    padding: 12px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--h-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
    white-space: nowrap;
}

#blog-newsletter-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

#blog-newsletter-btn.is-subscribed {
    background: #16a34a;
    cursor: default;
}

/* --- Responsive (Blog Page) --- */
@media (max-width: 1199px) {
    .blog-featured {
        grid-template-columns: 1fr 1fr;
    }

    .blog-feat-main-link {
        min-height: 360px;
    }

    .blog-feat-main-title {
        font-size: 24px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .blog-hero {
        padding: 100px 0 60px;
    }

    .blog-hero-title {
        font-size: 2.1rem;
    }

    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-feat-main-link {
        min-height: 300px;
    }

    .blog-feat-side {
        flex-direction: row;
    }

    .blog-feat-side-card {
        flex-direction: column;
    }

    .blog-feat-side-img {
        width: 100%;
        height: 160px;
        min-height: 160px;
    }

    .blog-feat-side-body {
        padding: 16px;
    }

    .blog-newsletter-card {
        flex-direction: column;
        text-align: center;
        padding: 32px 28px;
        gap: 24px;
    }

    .blog-newsletter-form {
        width: 100%;
        max-width: 440px;
    }

    .blog-newsletter-form input {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 767px) {
    .blog-hero {
        padding: 88px 0 48px;
    }

    .blog-hero-title {
        font-size: 1.8rem;
    }

    .blog-hero-sub {
        font-size: .95rem;
        margin-bottom: 24px;
    }

    .blog-hero-search {
        max-width: 100%;
    }

    .blog-hero-search i {
        display: none;
    }

    .blog-hero-search input {
        font-size: 14px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-feat-main-link {
        min-height: 260px;
    }

    .blog-feat-main-overlay {
        padding: 24px;
    }

    .blog-feat-main-title {
        font-size: 20px;
    }

    .blog-feat-side {
        flex-direction: column;
    }

    .blog-feat-side-card {
        flex-direction: row;
    }

    .blog-feat-side-img {
        width: 120px;
        height: auto;
        min-height: unset;
    }

    .blog-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .blog-newsletter-form {
        flex-direction: column;
    }

    .blog-newsletter-form input {
        width: 100%;
    }

    #blog-newsletter-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .blog-hero {
        padding: 80px 0 36px;
    }

    .blog-hero-title {
        font-size: 1.55rem;
    }

    .blog-categories {
        padding: 16px 0;
    }

    .blog-cat-pill {
        padding: 7px 14px;
        font-size: 12.5px;
    }

    .blog-main {
        padding: 32px 0 48px;
    }

    .blog-section-title {
        font-size: 20px;
    }

    .blog-card-body {
        padding: 18px;
    }

    .blog-card-title {
        font-size: 16px;
    }

    .blog-feat-side-img {
        width: 100px;
    }

    .blog-pagination {
        gap: 4px;
    }

    .blog-page-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}


/* =====================================================================
   BLOG POST PAGE
   ===================================================================== */

/* --- Top progress bar --- */
.bp-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: transparent;
}

.bp-top-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 100ms linear;
    border-radius: 0 2px 2px 0;
}

/* --- Hero --- */
.bp-hero {
    position: relative;
    padding: 140px 0 56px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--h-bg)), var(--h-bg));
    overflow: hidden;
}

.bp-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.bp-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.bp-hero-cat {
    display: inline-block;
    padding: 5px 16px;
    border-radius: var(--h-radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--accent);
    color: #fff;
    margin-bottom: 20px;
}

.bp-hero-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.bp-hero-excerpt {
    font-size: 17px;
    color: var(--h-text-secondary);
    margin: 0 0 28px;
    line-height: 1.6;
}

.bp-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: 13.5px;
    color: var(--h-muted);
    flex-wrap: wrap;
}

.bp-hero-meta i {
    margin-right: 5px;
}

.bp-hero-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--h-text);
}

.bp-hero-author-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.bp-hero-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--h-muted);
    opacity: 0.5;
}

/* --- Cover image --- */
.bp-cover {
    margin-top: -20px;
    padding-bottom: 48px;
    background: var(--h-bg);
}

.bp-cover-figure {
    margin: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.bp-cover-img {
    width: 100%;
    border-radius: var(--h-radius-md);
    object-fit: cover;
    max-height: 480px;
    box-shadow: var(--h-shadow-md);
}

.bp-cover-caption {
    text-align: center;
    font-size: 13px;
    color: var(--h-muted);
    margin-top: 12px;
    font-style: italic;
}

.bp-cover-caption i {
    margin-right: 4px;
    font-style: normal;
}

/* --- Content layout --- */
.bp-content-section {
    padding: 0 0 60px;
    background: var(--h-bg);
}

.bp-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

/* --- Article --- */
.bp-article {
    min-width: 0;
}

/* --- TOC --- */
.bp-toc {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 20px 24px;
    margin-bottom: 36px;
}

.bp-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--h-text);
    font-size: 15px;
}

.bp-toc-header i:first-child {
    color: var(--accent);
}

.bp-toc-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--h-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 13px;
    transition: color var(--h-fast);
}

.bp-toc-toggle:hover {
    color: var(--accent);
}

.bp-toc-list {
    margin: 14px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bp-toc-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--h-text-secondary);
}

.bp-toc-list li::marker {
    color: var(--accent);
    font-weight: 600;
}

.bp-toc-list a {
    color: var(--h-text-secondary);
    text-decoration: none;
    transition: color var(--h-fast);
}

.bp-toc-list a:hover {
    color: var(--accent);
}

/* --- Article body typography --- */
.bp-body {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--h-text);
}

.bp-body p {
    margin: 0 0 24px;
}

.bp-body .bp-lead {
    font-size: 19px;
    color: var(--h-text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
    border-left: 4px solid var(--accent);
    padding-left: 20px;
}

.bp-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--h-text);
    margin: 48px 0 18px;
    letter-spacing: -0.01em;
    scroll-margin-top: 100px;
}

.bp-body h2:first-of-type {
    margin-top: 0;
}

.bp-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text);
    margin: 36px 0 14px;
}

.bp-body ul,
.bp-body ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.bp-body li {
    margin-bottom: 10px;
    line-height: 1.65;
}

.bp-body blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    background: color-mix(in srgb, var(--accent) 5%, var(--h-surface));
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--h-radius-sm) var(--h-radius-sm) 0;
}

.bp-body blockquote p {
    font-size: 17px;
    font-style: italic;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.65;
}

.bp-body blockquote p:last-child {
    margin-bottom: 0;
}

.bp-body blockquote cite {
    font-size: 13.5px;
    color: var(--h-muted);
    font-style: normal;
    font-weight: 500;
}

.bp-body strong {
    color: var(--h-text);
    font-weight: 700;
}

.bp-body a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--h-fast);
}

.bp-body a:hover {
    text-decoration-color: var(--accent);
}

/* --- Tags --- */
.bp-tags {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--h-border);
    flex-wrap: wrap;
}

.bp-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--h-text);
    white-space: nowrap;
    padding-top: 4px;
}

.bp-tags-label i {
    margin-right: 4px;
    color: var(--accent);
}

.bp-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bp-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--h-radius-pill);
    font-size: 13px;
    font-weight: 500;
    background: var(--h-surface);
    color: var(--h-text-secondary);
    border: 1px solid var(--h-border);
    text-decoration: none;
    transition: all var(--h-fast);
}

.bp-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
}

/* --- Share --- */
.bp-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--h-border);
}

.bp-share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--h-text);
}

.bp-share-btns {
    display: flex;
    gap: 8px;
}

.bp-share-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--h-fast);
}

.bp-share-fb:hover {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.bp-share-tw:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.bp-share-li:hover {
    background: #0a66c2;
    color: #fff;
    border-color: #0a66c2;
}

.bp-share-wa:hover {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.bp-share-cp:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.bp-share-cp.is-copied {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

/* --- Author box --- */
.bp-author-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 36px;
    padding: 28px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
}

.bp-author-box-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bp-author-box-body {
    min-width: 0;
}

.bp-author-box-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--h-muted);
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.bp-author-box-name {
    font-size: 17px;
    color: var(--h-text);
    display: block;
    margin-bottom: 8px;
}

.bp-author-box-bio {
    font-size: 14px;
    color: var(--h-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* --- Prev / Next nav --- */
.bp-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 36px;
}

.bp-nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    text-decoration: none;
    transition: all var(--h-fast);
}

.bp-nav-link:hover {
    border-color: var(--accent);
    box-shadow: var(--h-shadow-sm);
}

.bp-nav-dir {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--accent);
}

.bp-nav-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.bp-nav-next {
    text-align: right;
}

/* --- Comments --- */
.bp-comments {
    margin-top: 48px;
}

.bp-comments-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bp-comments-title i {
    color: var(--accent);
}

.bp-comment-form {
    margin-bottom: 32px;
}

/* Logged-in user indicator */
.bp-comment-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent) 5%, var(--h-surface));
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
}

.bp-comment-user-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bp-comment-user-name {
    font-size: 14px;
    color: var(--h-text-secondary);
}

.bp-comment-user-name strong {
    color: var(--h-text);
}

/* Guest name input */
.bp-comment-guest {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.bp-comment-guest-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--h-surface-soft);
    border: 1.5px solid var(--h-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--h-muted);
    font-size: 15px;
    flex-shrink: 0;
}

.bp-comment-name-input {
    flex: 1;
    padding: 10px 16px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14.5px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.bp-comment-name-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.bp-comment-name-input::placeholder {
    color: var(--h-muted);
}

.bp-comment-textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 14.5px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color var(--h-fast), box-shadow var(--h-fast);
}

.bp-comment-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.bp-comment-textarea::placeholder {
    color: var(--h-muted);
}

.bp-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.bp-comment-char-count {
    font-size: 12.5px;
    color: var(--h-muted);
}

.bp-comment-submit {
    padding: 10px 22px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--h-radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.bp-comment-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Comment items */
.bp-comment {
    display: flex;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--h-border);
}

.bp-comment:last-child {
    border-bottom: none;
}

.bp-comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bp-comment-body {
    flex: 1;
    min-width: 0;
}

.bp-comment-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.bp-comment-name {
    font-size: 14px;
    color: var(--h-text);
    flex: 1;
}

/* ─── Botão apagar (Admin) ──────────────────────────────── */
.bp-comment-delete {
    background: none;
    border: none;
    color: var(--h-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 5px;
    transition: color var(--h-fast), background var(--h-fast);
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}

.bp-comment-delete:hover {
    color: #ef4444;
    background: #fee2e2;
}

.bp-comment-date {
    font-size: 12.5px;
    color: var(--h-muted);
}

.bp-comment-text {
    font-size: 14.5px;
    color: var(--h-text-secondary);
    line-height: 1.6;
    margin: 0 0 10px;
}

.bp-comment-actions {
    display: flex;
    gap: 14px;
}

.bp-comment-like,
.bp-comment-reply {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--h-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--h-fast);
    font-family: inherit;
}

.bp-comment-like:hover,
.bp-comment-reply:hover {
    color: var(--accent);
}

.bp-comment-like.is-liked {
    color: #ef4444;
}

.bp-comment-like i,
.bp-comment-reply i {
    margin-right: 4px;
}

/* ─── Respostas (replies) ──────────────────────────────── */
.bp-replies-wrap {
    margin-left: 28px;
    padding-left: 18px;
    border-left: 3px solid var(--accent, #4f46e5);
    border-left-color: #e0e7ff;
}

.bp-reply-card {
    padding: 16px 0;
    border-bottom: 1px solid var(--h-border);
}

.bp-reply-card:last-child {
    border-bottom: none;
}

.bp-reply-card .bp-comment-avatar {
    width: 34px;
    height: 34px;
}

/* ─── Banner "Respondendo a:" ─────────────────────────── */
.bp-reply-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.bp-reply-banner-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #374151;
}

.bp-reply-banner-info i {
    color: #6366f1;
}

.bp-reply-banner-info strong {
    color: #4f46e5;
    font-weight: 700;
}

.bp-reply-cancel {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color var(--h-fast), background var(--h-fast);
}

.bp-reply-cancel:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* ─── Estado vazio de comentários ────────────────────── */
.bp-no-comments {
    text-align: center;
    color: var(--h-muted);
    font-size: 14.5px;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bp-no-comments i {
    font-size: 20px;
    opacity: .5;
}

/* --- Sidebar --- */
.bp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.bp-sidebar-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 22px;
}

.bp-sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-sidebar-title i {
    color: var(--accent);
    font-size: 14px;
}

.bp-sidebar-text {
    font-size: 13.5px;
    color: var(--h-text-secondary);
    line-height: 1.55;
    margin: 0 0 14px;
}

.bp-sidebar-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--h-fast);
}

.bp-sidebar-link:hover {
    gap: 10px;
}

/* Reading progress card */
.bp-reading-progress-card {
    padding: 18px 22px;
}

.bp-reading-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 10px;
}

.bp-reading-label i {
    color: var(--accent);
    margin-right: 6px;
}

.bp-reading-bar {
    height: 6px;
    background: var(--h-border);
    border-radius: 3px;
    overflow: hidden;
}

.bp-reading-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 200ms ease;
}

.bp-reading-pct {
    font-size: 12px;
    color: var(--h-muted);
    font-weight: 600;
    margin-top: 6px;
    display: block;
    text-align: right;
}

/* Categories list */
.bp-sidebar-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bp-sidebar-cats li {
    border-bottom: 1px solid var(--h-border);
}

.bp-sidebar-cats li:last-child {
    border-bottom: none;
}

.bp-sidebar-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--h-text-secondary);
    text-decoration: none;
    transition: color var(--h-fast);
}

.bp-sidebar-cats a:hover {
    color: var(--accent);
}

.bp-sidebar-cats span {
    font-size: 12px;
    background: var(--h-surface-soft);
    color: var(--h-muted);
    padding: 2px 10px;
    border-radius: var(--h-radius-pill);
    font-weight: 600;
}

/* Tags cloud */
.bp-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bp-stag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    font-size: 12.5px;
    font-weight: 500;
    background: var(--h-surface-soft);
    color: var(--h-text-secondary);
    border: 1px solid var(--h-border);
    text-decoration: none;
    transition: all var(--h-fast);
}

.bp-stag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--h-surface));
}

/* Newsletter sidebar */
.bp-sidebar-newsletter {
    text-align: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--h-surface)), var(--h-surface));
}

.bp-sidebar-nl-icon {
    font-size: 28px;
    color: var(--accent);
    margin-bottom: 10px;
}

.bp-sidebar-newsletter .bp-sidebar-title {
    justify-content: center;
}

.bp-sidebar-newsletter .bp-sidebar-text {
    text-align: center;
}

.bp-sidebar-nl-input {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--h-fast);
    margin-bottom: 10px;
}

.bp-sidebar-nl-input:focus {
    border-color: var(--accent);
}

.bp-sidebar-nl-input::placeholder {
    color: var(--h-muted);
}

.bp-sidebar-nl-btn {
    width: 100%;
    padding: 10px 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--h-radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--h-fast);
    font-family: inherit;
}

.bp-sidebar-nl-btn:hover {
    opacity: 0.9;
}

.bp-sidebar-nl-btn.is-subscribed {
    background: #16a34a;
    cursor: default;
}

/* --- Related --- */
.bp-related {
    padding: 60px 0 80px;
    background: var(--h-surface-soft);
}

.bp-related-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 28px;
    text-align: center;
    letter-spacing: -0.01em;
}

.bp-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bp-related-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--h-fast), transform var(--h-fast);
}

.bp-related-card:hover {
    box-shadow: var(--h-shadow-sm);
    transform: translateY(-4px);
}

.bp-related-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.bp-related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bp-related-card:hover .bp-related-img {
    transform: scale(1.05);
}

.bp-related-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
}

.bp-related-body {
    padding: 18px 20px;
}

.bp-related-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-related-card:hover .bp-related-name {
    color: var(--accent);
}

.bp-related-meta {
    display: flex;
    gap: 14px;
    font-size: 12.5px;
    color: var(--h-muted);
}

.bp-related-meta i {
    margin-right: 4px;
}

/* --- Responsive (Blog Post Page) --- */
@media (max-width: 1199px) {
    .bp-layout {
        grid-template-columns: 1fr 280px;
        gap: 32px;
    }

    .bp-hero-title {
        font-size: 34px;
    }
}

@media (max-width: 991px) {
    .bp-hero {
        padding: 120px 0 44px;
    }

    .bp-hero-title {
        font-size: 30px;
    }

    .bp-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bp-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 48px;
        padding-top: 36px;
        border-top: 1px solid var(--h-border);
    }

    .bp-reading-progress-card {
        display: none;
    }

    .bp-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .bp-hero {
        padding: 110px 0 36px;
    }

    .bp-hero-title {
        font-size: 26px;
    }

    .bp-hero-excerpt {
        font-size: 15px;
    }

    .bp-hero-meta {
        gap: 10px;
        font-size: 12.5px;
    }

    .bp-cover-img {
        max-height: 320px;
    }

    .bp-body {
        font-size: 15.5px;
    }

    .bp-body .bp-lead {
        font-size: 17px;
    }

    .bp-body h2 {
        font-size: 21px;
    }

    .bp-nav {
        grid-template-columns: 1fr;
    }

    .bp-sidebar {
        grid-template-columns: 1fr;
    }

    .bp-related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bp-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bp-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .bp-hero {
        padding: 100px 0 28px;
    }

    .bp-hero-title {
        font-size: 22px;
    }

    .bp-hero-sep {
        display: none;
    }

    .bp-body h2 {
        font-size: 19px;
        margin-top: 36px;
    }

    .bp-body blockquote {
        padding: 18px 20px;
    }

    .bp-toc {
        padding: 16px 18px;
    }

    .bp-card-body {
        padding: 16px;
    }

    .bp-related {
        padding: 40px 0 56px;
    }

    .bp-related-title {
        font-size: 20px;
    }
}


/* =========================================================
   SERVIÇO — Detail Page (.sv-)
========================================================= */

/* ── Hero ── */
.sv-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    text-align: center;
}

.sv-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--h-surface) 0%, var(--h-surface-soft) 100%);
    z-index: 0;
}

[data-theme="dark"] .sv-hero-bg {
    background: linear-gradient(135deg, var(--h-bg) 0%, var(--h-surface) 100%);
}

.sv-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sv-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--h-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    margin-bottom: 8px;
}

.sv-hero-title {
    font-size: 38px;
    font-weight: 800;
    color: var(--h-text);
    line-height: 1.2;
    margin: 0;
}

.sv-hero-sub {
    font-size: 17px;
    color: var(--h-text-secondary);
    max-width: 680px;
    line-height: 1.6;
    margin: 0;
}

.sv-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.sv-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    background: var(--accent);
    color: #fff !important;
    border-radius: var(--h-radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.sv-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    color: #fff !important;
}

.sv-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    background: var(--h-surface);
    color: var(--h-text) !important;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.sv-hero-btn-secondary:hover {
    border-color: var(--accent);
    background: var(--h-surface-soft);
    color: var(--h-text) !important;
}

/* ── Section Titles ── */
.sv-section-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.3;
}

.sv-section-title-center {
    text-align: center;
}

.sv-section-sub {
    font-size: 16px;
    color: var(--h-muted);
    margin: 0 0 40px;
    text-align: center;
}

/* ── Stats ── */
.sv-stats {
    padding: 0;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

.sv-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sv-stat-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
}

.sv-stat-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sv-stat-valor {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.sv-stat-label {
    font-size: 14px;
    color: var(--h-muted);
    font-weight: 500;
}

/* ── Intro / Sobre ── */
.sv-intro {
    padding: 80px 0 60px;
}

.sv-intro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.sv-intro-desc {
    font-size: 16px;
    color: var(--h-text-secondary);
    line-height: 1.75;
    margin: 12px 0 24px;
}

.sv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sv-tag {
    display: inline-block;
    padding: 5px 14px;
    background: var(--h-surface-soft);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    font-size: 13px;
    color: var(--h-text-secondary);
    font-weight: 500;
}

.sv-intro-img-wrap {
    border-radius: var(--h-radius-md);
    overflow: hidden;
}

.sv-intro-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: var(--h-radius-md);
    display: block;
}

/* ── Features ── */
.sv-features {
    padding: 60px 0 80px;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sv-features {
    background: var(--h-surface);
}

.sv-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sv-feature-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 24px;
    transition: transform .25s, box-shadow .25s;
}

[data-theme="dark"] .sv-feature-card {
    background: var(--h-bg);
}

.sv-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.sv-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

.sv-feature-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.sv-feature-desc {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Processo / Timeline ── */
.sv-processo {
    padding: 80px 0;
}

.sv-processo-timeline {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.sv-proc-step {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 0;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .5s, transform .5s;
}

.sv-proc-step.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.sv-proc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 76px;
    bottom: -4px;
    width: 2px;
    background: var(--h-border);
}

.sv-proc-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.sv-proc-body {
    flex: 1;
    padding-top: 4px;
}

.sv-proc-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 6px;
}

.sv-proc-desc {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.65;
    margin: 0;
}

.sv-proc-connector {
    display: none;
}

/* ── Benefícios ── */
.sv-beneficios {
    padding: 60px 0 80px;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sv-beneficios {
    background: var(--h-surface);
}

.sv-beneficios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

.sv-beneficio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    font-size: 15px;
    color: var(--h-text);
    font-weight: 500;
}

[data-theme="dark"] .sv-beneficio-item {
    background: var(--h-bg);
}

.sv-beneficio-item i {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── FAQ ── */
.sv-faq {
    padding: 80px 0;
}

.sv-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sv-faq-item {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    transition: box-shadow .2s;
}

.sv-faq-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}

.sv-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--h-text);
    transition: color .2s;
}

.sv-faq-question i {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--h-muted);
    transition: transform .3s;
}

.sv-faq-item.is-open .sv-faq-question i {
    transform: rotate(180deg);
}

.sv-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.sv-faq-answer p {
    padding: 0 24px 20px;
    margin: 0;
    font-size: 14px;
    color: var(--h-text-secondary);
    line-height: 1.7;
}

/* ── CTA ── */
.sv-cta {
    padding: 60px 0 80px;
}

.sv-cta-card {
    border-radius: var(--h-radius-md);
    padding: 56px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.sv-cta-text h2 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
}

.sv-cta-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 480px;
    line-height: 1.6;
}

.sv-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.sv-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--h-radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.sv-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.sv-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.sv-cta-email {
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(4px);
}

.sv-cta-email:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff !important;
}

/* ── Related / Outros serviços — Carousel ── */
.sv-related {
    padding: 60px 0 100px;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sv-related {
    background: var(--h-surface);
}

.sv-related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.sv-related-sub {
    margin-bottom: 0;
    text-align: left;
}

.sv-carousel-nav {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.sv-carousel-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.sv-carousel-btn:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.sv-carousel-btn:disabled {
    opacity: .35;
    cursor: default;
}

.sv-carousel-viewport {
    overflow: hidden;
}

.sv-carousel-track {
    display: flex;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.sv-related-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px 24px;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
    flex-shrink: 0;
}

[data-theme="dark"] .sv-related-card {
    background: var(--h-bg);
}

.sv-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.sv-related-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sv-related-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
}

.sv-related-desc {
    font-size: 13px;
    color: var(--h-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sv-related-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.sv-related-link i {
    font-size: 12px;
    transition: transform .2s;
}

.sv-related-card:hover .sv-related-link i {
    transform: translateX(4px);
}

/* Carousel Dots */
.sv-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.sv-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--h-border);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.sv-carousel-dot.is-active {
    background: var(--accent);
    transform: scale(1.25);
}


/* =========================================================
   SERVIÇOS — Listing Page (.sv-list-)
========================================================= */

/* ── Hero ── */
.sv-list-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    text-align: center;
}

.sv-list-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.sv-list-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.sv-list-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.sv-list-hero-content {
    position: relative;
    z-index: 2;
}

.sv-list-hero .blog-breadcrumb,
.sv-list-hero .blog-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.sv-list-hero .blog-breadcrumb a:hover {
    color: #fff;
}

.sv-list-hero .blog-breadcrumb i {
    opacity: .35;
}

.sv-list-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.sv-list-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sv-list-hero-sub {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

/* ── Services Grid ── */
.sv-list-grid-section {
    padding: 60px 0 80px;
}

.sv-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.sv-list-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 36px 28px;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.sv-list-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .1);
    border-color: transparent;
}

.sv-list-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.sv-list-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
}

.sv-list-card-desc {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.sv-list-card-link {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: gap .2s;
}

.sv-list-card:hover .sv-list-card-link {
    gap: 10px;
}

.sv-list-card-link i {
    font-size: 12px;
}

/* ── Why Section ── */
.sv-list-why {
    padding: 60px 0 80px;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sv-list-why {
    background: var(--h-surface);
}

.sv-list-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sv-list-why-item {
    text-align: center;
    padding: 32px 20px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
}

[data-theme="dark"] .sv-list-why-item {
    background: var(--h-bg);
}

.sv-list-why-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.sv-list-why-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 8px;
}

.sv-list-why-item p {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── List CTA ── */
.sv-list-cta {
    padding: 60px 0 100px;
}

.sv-list-cta-card {
    background: var(--accent);
    border-radius: var(--h-radius-md);
    padding: 56px 48px;
    text-align: center;
}

.sv-list-cta-card h2 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
}

.sv-list-cta-card p {
    font-size: 16px;
    color: rgba(255, 255, 255, .85);
    max-width: 560px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.sv-list-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}


/* =========================================================
   SERVIÇO — Responsive Breakpoints
========================================================= */

/* ── ≤ 1199px ── */
@media (max-width: 1199px) {

    .sv-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv-list-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── ≤ 991px ── */
@media (max-width: 991px) {
    .sv-hero {
        padding: 100px 0 64px;
    }

    .sv-hero-title {
        font-size: 30px;
    }

    .sv-intro-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sv-intro-img {
        height: 260px;
    }

    .sv-beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 32px;
    }

    .sv-cta-text p {
        max-width: 100%;
    }

    .sv-cta-actions {
        justify-content: center;
    }

    .sv-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv-list-hero-title {
        font-size: 2.5rem;
    }

    .sv-list-cta-card {
        padding: 40px 28px;
    }
}

/* ── ≤ 767px ── */
@media (max-width: 767px) {
    .sv-hero {
        padding: 90px 0 56px;
    }

    .sv-hero-title {
        font-size: 26px;
    }

    .sv-hero-sub {
        font-size: 15px;
    }

    .sv-hero-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .sv-stats {
        margin-top: -24px;
    }

    .sv-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sv-stat-valor {
        font-size: 26px;
    }

    .sv-section-title {
        font-size: 24px;
    }

    .sv-features-grid {
        grid-template-columns: 1fr;
    }

    .sv-feature-card {
        padding: 24px 20px;
    }

    .sv-proc-step {
        gap: 16px;
    }

    .sv-proc-number {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }

    .sv-proc-step:not(:last-child)::after {
        left: 20px;
        top: 66px;
    }

    .sv-beneficios-grid {
        grid-template-columns: 1fr;
    }

    .sv-list-hero {
        padding: 88px 0 48px;
    }

    .sv-list-hero-title {
        font-size: 1.8rem;
    }

    .sv-list-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sv-list-why-grid {
        grid-template-columns: 1fr;
    }
}

/* ── ≤ 575px ── */
@media (max-width: 575px) {
    .sv-hero {
        padding: 80px 0 48px;
    }

    .sv-hero-title {
        font-size: 22px;
    }

    .sv-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sv-hero-btn-primary,
    .sv-hero-btn-secondary {
        justify-content: center;
    }

    .sv-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sv-stat-card {
        padding: 20px 14px;
    }

    .sv-stat-valor {
        font-size: 22px;
    }

    .sv-intro {
        padding: 56px 0 44px;
    }

    .sv-features,
    .sv-beneficios {
        padding: 44px 0 56px;
    }

    .sv-processo,
    .sv-faq {
        padding: 56px 0;
    }

    .sv-cta-card {
        padding: 32px 20px;
    }

    .sv-cta-text h2 {
        font-size: 22px;
    }

    .sv-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sv-cta-btn {
        justify-content: center;
    }

    .sv-related-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sv-carousel-nav {
        align-self: flex-end;
    }

    .sv-carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .sv-related {
        padding: 44px 0 72px;
    }

    .sv-list-hero {
        padding: 80px 0 40px;
    }

    .sv-list-hero-title {
        font-size: 1.55rem;
    }

    .sv-list-grid-section {
        padding: 40px 0 56px;
    }

    .sv-list-card {
        padding: 28px 22px;
    }

    .sv-list-cta-card {
        padding: 32px 20px;
    }

    .sv-list-cta-card h2 {
        font-size: 22px;
    }

    .sv-list-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =========================================================
   SOBRE — About Page (.sb-)
========================================================= */

/* ── Hero ── */
.sb-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    text-align: center;
}

.sb-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.sb-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.sb-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.sb-hero-content {
    position: relative;
    z-index: 2;
}

.sb-hero .blog-breadcrumb,
.sb-hero .blog-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.sb-hero .blog-breadcrumb a:hover {
    color: #fff;
}

.sb-hero .blog-breadcrumb i {
    opacity: .35;
}

.sb-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.sb-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sb-hero-sub {
    max-width: 720px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.sb-hero-badges {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sb-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--h-radius-pill);
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.sb-hero-badge i {
    color: #34d399;
    font-size: 15px;
}

/* ── Label ── */
.sb-label {
    display: inline-block;
    padding: 5px 16px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--h-radius-pill);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

/* ── Section Titles ── */
.sb-section-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.3;
}

.sb-section-title-center {
    text-align: center;
}

.sb-section-sub {
    font-size: 16px;
    color: var(--h-muted);
    margin: 0 0 40px;
    text-align: center;
}

/* ── Quem somos ── */
.sb-quem {
    padding: 80px 0 60px;
}

.sb-quem-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
}

.sb-quem-text p {
    font-size: 15px;
    color: var(--h-text-secondary);
    line-height: 1.75;
    margin: 0 0 14px;
}

.sb-quem-text p:last-of-type {
    margin-bottom: 28px;
}

.sb-quem-highlights {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sb-quem-hl {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--h-surface-soft);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
}

.sb-quem-hl i {
    font-size: 20px;
    color: var(--accent);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.sb-quem-hl strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--h-text);
}

.sb-quem-hl span {
    font-size: 13px;
    color: var(--h-muted);
}

.sb-quem-visual {
    position: relative;
}

.sb-quem-img-wrap {
    border-radius: var(--h-radius-md);
    overflow: hidden;
}

.sb-quem-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    border-radius: var(--h-radius-md);
}

.sb-quem-float-card {
    position: absolute;
    bottom: -24px;
    left: -24px;
    background: var(--accent);
    color: #fff;
    padding: 20px 28px;
    border-radius: var(--h-radius-md);
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
}

.sb-quem-float-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.sb-quem-float-txt {
    font-size: 13px;
    opacity: .85;
}

/* ── Stats ── */
.sb-stats {
    padding: 60px 0;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sb-stats {
    background: var(--h-surface);
}

.sb-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sb-stat-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
}

[data-theme="dark"] .sb-stat-card {
    background: var(--h-bg);
}

.sb-stat-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-stat-card>i {
    font-size: 24px;
    color: var(--accent);
    margin-bottom: 4px;
}

.sb-stat-valor {
    font-size: 34px;
    font-weight: 800;
    color: var(--h-text);
    line-height: 1;
}

.sb-stat-label {
    font-size: 14px;
    color: var(--h-muted);
    font-weight: 500;
}

/* ── MVV (Missão / Visão / Valores) ── */
.sb-mvv {
    padding: 80px 0;
}

.sb-mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.sb-mvv-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 36px 28px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s, box-shadow .25s;
}

.sb-mvv-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-mvv-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
}

.sb-mvv-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    margin: 0 auto 20px;
}

.sb-mvv-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 12px;
}

.sb-mvv-card p {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Timeline ── */
.sb-timeline-section {
    padding: 80px 0;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sb-timeline-section {
    background: var(--h-surface);
}

.sb-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.sb-tl-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--h-border);
    transform: translateX(-50%);
    z-index: 0;
}

.sb-tl-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity .5s, transform .5s;
}

.sb-tl-item.is-visible {
    opacity: 1;
    transform: translateX(0) !important;
}

.sb-tl-left {
    justify-content: flex-start;
    padding-right: calc(50% + 32px);
    text-align: right;
    transform: translateX(-20px);
}

.sb-tl-right {
    justify-content: flex-end;
    padding-left: calc(50% + 32px);
    text-align: left;
    transform: translateX(20px);
}

.sb-tl-dot {
    position: absolute;
    left: 50%;
    top: 16px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: 3px solid var(--h-surface-soft);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

[data-theme="dark"] .sb-tl-dot {
    border-color: var(--h-surface);
}

.sb-tl-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    padding: 20px 24px;
}

[data-theme="dark"] .sb-tl-card {
    background: var(--h-bg);
}

.sb-tl-ano {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    background: var(--h-surface-soft);
    padding: 3px 12px;
    border-radius: var(--h-radius-pill);
    margin-bottom: 8px;
}

[data-theme="dark"] .sb-tl-ano {
    background: var(--h-surface);
}

.sb-tl-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 6px;
}

.sb-tl-desc {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Equipe ── */
.sb-equipe {
    padding: 80px 0;
}

.sb-equipe-carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}

.sb-equipe-viewport {
    overflow: hidden;
    width: 100%;
}

.sb-equipe-track {
    display: flex;
    transition: transform .35s ease;
    will-change: transform;
}

.sb-membro-slide {
    flex: 0 0 33.3333%;
    padding: 0 16px;
}

.sb-equipe-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s, background .2s, color .2s, border-color .2s;
}

.sb-equipe-nav:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.sb-equipe-nav:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.sb-membro-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 28px;
    text-align: center;
    transition: transform .25s, box-shadow .25s;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s, box-shadow .25s;
}

.sb-membro-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-membro-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.sb-membro-img-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
}

.sb-membro-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--h-border);
}

.sb-membro-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    border: 2px solid var(--h-surface);
}

.sb-membro-nome {
    font-size: 18px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 4px;
}

.sb-membro-cargo {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.sb-membro-bio {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Serviços (accordion grid) ── */
.sb-servicos {
    padding: 80px 0;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sb-servicos {
    background: var(--h-surface);
}

.sb-servicos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sb-srv-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    transition: box-shadow .25s;
}

[data-theme="dark"] .sb-srv-card {
    background: var(--h-bg);
}

.sb-srv-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}

.sb-srv-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-left: 4px solid transparent;
}

.sb-srv-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.sb-srv-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
    line-height: 1.3;
}

.sb-srv-count {
    font-size: 13px;
    color: var(--h-muted);
}

.sb-srv-toggle {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface-soft);
    color: var(--h-text-secondary);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s, background .2s;
    flex-shrink: 0;
}

.sb-srv-card.is-open .sb-srv-toggle {
    transform: rotate(180deg);
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.sb-srv-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

.sb-srv-list {
    list-style: none;
    margin: 0;
    padding: 0 22px 22px 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
}

.sb-srv-list li {
    font-size: 14px;
    color: var(--h-text-secondary);
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-srv-list li i {
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Diferenciais ── */
.sb-diferenciais {
    padding: 80px 0;
}

.sb-dif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sb-dif-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s, box-shadow .25s;
}

.sb-dif-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-dif-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
}

.sb-dif-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.sb-dif-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.sb-dif-card p {
    font-size: 14px;
    color: var(--h-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Locais ── */
.sb-locais {
    padding: 60px 0 80px;
    background: var(--h-surface-soft);
}

[data-theme="dark"] .sb-locais {
    background: var(--h-surface);
}

.sb-locais-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.sb-local-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px 20px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s, transform .5s;
}

[data-theme="dark"] .sb-local-card {
    background: var(--h-bg);
}

.sb-local-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-local-card i {
    font-size: 24px;
    color: var(--accent);
    margin-bottom: 12px;
    display: block;
}

.sb-local-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 4px;
}

.sb-local-card span {
    font-size: 13px;
    color: var(--h-muted);
}

.sb-local-destaque {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.sb-local-all {
    grid-column: span 1;
}

/* ── CTA ── */
.sb-cta {
    padding: 60px 0 100px;
}

.sb-cta-card {
    background: var(--accent);
    border-radius: var(--h-radius-md);
    padding: 56px 48px;
    text-align: center;
}

.sb-cta-card h2 {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
}

.sb-cta-card p {
    font-size: 16px;
    color: rgba(255, 255, 255, .85);
    max-width: 560px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.sb-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.sb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--h-radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.sb-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.sb-cta-servicos {
    background: #fff;
    color: var(--accent) !important;
}

.sb-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}


/* =========================================================
   SOBRE — Responsive Breakpoints
========================================================= */

/* ── ≤ 1199px ── */
@media (max-width: 1199px) {
    .sb-quem-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sb-quem-visual {
        max-width: 520px;
    }

    .sb-locais-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sb-dif-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── ≤ 991px ── */
@media (max-width: 991px) {
    .sb-hero {
        padding: 100px 0 60px;
    }

    .sb-hero-title {
        font-size: 2.1rem;
    }

    .sb-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sb-mvv-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    .sb-equipe-carousel {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
    }

    .sb-membro-slide {
        flex-basis: 50%;
    }

    .sb-servicos-grid {
        grid-template-columns: 1fr;
    }

    .sb-srv-list {
        grid-template-columns: 1fr;
    }

    .sb-locais-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sb-cta-card {
        padding: 40px 28px;
    }

    /* Timeline linear */
    .sb-tl-line {
        left: 16px;
    }

    .sb-tl-item {
        padding-left: 48px !important;
        padding-right: 0 !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .sb-tl-dot {
        left: 16px;
    }
}

/* ── ≤ 767px ── */
@media (max-width: 767px) {
    .sb-hero {
        padding: 88px 0 48px;
    }

    .sb-hero-title {
        font-size: 1.8rem;
    }

    .sb-hero-title br {
        display: none;
    }

    .sb-hero-sub {
        font-size: .95rem;
    }

    .sb-hero-badges {
        gap: 10px;
    }

    .sb-hero-badge {
        padding: 8px 14px;
        font-size: 13px;
    }

    .sb-section-title {
        font-size: 24px;
    }

    .sb-quem-img {
        height: 280px;
    }

    .sb-quem-float-card {
        bottom: -16px;
        left: -8px;
        padding: 14px 20px;
    }

    .sb-quem-float-num {
        font-size: 28px;
    }

    .sb-dif-grid {
        grid-template-columns: 1fr;
    }

    .sb-equipe-carousel {
        grid-template-columns: 1fr;
    }

    .sb-equipe-nav {
        display: none;
    }

    .sb-membro-slide {
        flex-basis: 100%;
        padding: 0;
    }

    .sb-locais-grid {
        grid-template-columns: 1fr;
    }
}

/* ── ≤ 575px ── */
@media (max-width: 575px) {
    .sb-hero {
        padding: 80px 0 40px;
    }

    .sb-hero-title {
        font-size: 1.55rem;
    }

    .sb-section-title {
        font-size: 20px;
    }

    .sb-quem {
        padding: 56px 0 44px;
    }

    .sb-stats {
        padding: 44px 0;
    }

    .sb-stat-card {
        padding: 24px 16px;
    }

    .sb-stat-valor {
        font-size: 28px;
    }

    .sb-mvv,
    .sb-equipe,
    .sb-diferenciais {
        padding: 56px 0;
    }

    .sb-timeline-section {
        padding: 56px 0;
    }

    .sb-servicos {
        padding: 56px 0;
    }

    .sb-cta-card {
        padding: 32px 20px;
    }

    .sb-cta-card h2 {
        font-size: 22px;
    }

    .sb-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sb-cta-btn {
        justify-content: center;
    }

    .sb-locais {
        padding: 44px 0 56px;
    }

    .sb-cta {
        padding: 44px 0 72px;
    }
}


/* ===========================================================
   CLIENTES PAGE (.cl-)
   =========================================================== */

/* ── Hero ── */
.cl-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    text-align: center;
}

.cl-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.cl-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.cl-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.cl-hero-content {
    position: relative;
    z-index: 2;
}

.cl-hero .blog-breadcrumb,
.cl-hero .blog-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cl-hero .blog-breadcrumb a:hover {
    color: #fff;
}

.cl-hero .blog-breadcrumb i {
    opacity: .35;
}

.cl-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.cl-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cl-hero-sub {
    max-width: 620px;
    margin: 0 auto 44px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.cl-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.cl-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cl-hero-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.cl-hero-stat-txt {
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
    margin-top: 4px;
}

.cl-hero-stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, .2);
}

/* ── Logo Wall (marquee) ── */
.cl-logos {
    padding: 56px 0;
    overflow: hidden;
    background: var(--h-surface);
    border-bottom: 1px solid var(--h-border);
}

.cl-logos .container {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
}

.cl-logos-track {
    display: flex;
    align-items: center;
    gap: 60px;
    animation: cl-scroll 30s linear infinite;
    width: max-content;
}

.cl-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    filter: grayscale(1) opacity(.5);
    transition: filter .35s ease, transform .35s ease;
}

.cl-logo-item:hover {
    filter: grayscale(0) opacity(1);
    transform: scale(1.1);
}

.cl-logo-item img {
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

@keyframes cl-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Filter Section ── */
.cl-filter-section {
    padding: 36px 0 12px;
    background: var(--h-bg);
}

.cl-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cl-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cl-filter-btn {
    padding: 8px 18px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: .87rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
}

.cl-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cl-filter-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cl-filter-search {
    position: relative;
    min-width: 240px;
}

.cl-filter-search>i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--h-muted);
    font-size: .85rem;
    pointer-events: none;
}

.cl-filter-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .9rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cl-filter-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 36, 66, 92), .12);
}

/* ── Grid ── */
.cl-grid-section {
    padding: 24px 0 64px;
    background: var(--h-bg);
}

.cl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Card ── */
.cl-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px;
    transition: transform .35s ease, box-shadow .35s ease, opacity .4s ease;
    opacity: 0;
    transform: translateY(24px);
}

.cl-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}

.cl-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--h-border);
}

.cl-card-logo-wrap {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--h-surface-soft);
    padding: 8px;
}

.cl-card-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cl-card-info {
    flex: 1;
    min-width: 0;
}

.cl-card-nome {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.cl-card-seg {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cl-card-desc {
    color: var(--h-text-secondary);
    font-size: .9rem;
    line-height: 1.65;
    margin: 0 0 18px;
}

.cl-card-servicos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cl-card-srv {
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-soft);
    color: var(--h-muted);
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--h-border);
}

/* ── Empty State ── */
.cl-empty {
    text-align: center;
    padding: 72px 0;
}

.cl-empty i {
    font-size: 2.5rem;
    color: var(--h-muted);
    margin-bottom: 18px;
    display: block;
}

.cl-empty h3 {
    font-size: 1.3rem;
    color: var(--h-text);
    margin: 0 0 8px;
}

.cl-empty p {
    color: var(--h-text-secondary);
    font-size: .95rem;
}

/* ── Section Titles ── */
.cl-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

.cl-section-title-center {
    text-align: center;
}

.cl-section-sub {
    color: var(--h-text-secondary);
    font-size: 1.05rem;
    text-align: center;
    margin: 0 0 44px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Depoimentos Carousel ── */
.cl-depoimentos {
    padding: 80px 0;
    background: var(--h-surface-soft);
}

.cl-dep-carousel {
    position: relative;
    overflow: hidden;
}

.cl-dep-track {
    display: flex;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.cl-dep-card {
    flex: 0 0 calc(33.3333% - 16px);
    margin: 0 12px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 28px 28px;
    box-sizing: border-box;
    transition: box-shadow .35s ease, transform .35s ease;
}

.cl-dep-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, .07);
    transform: translateY(-3px);
}

.cl-dep-quote {
    font-size: 1.6rem;
    color: var(--accent);
    opacity: .25;
    margin-bottom: 12px;
    line-height: 1;
}

.cl-dep-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
    color: #fbbf24;
    font-size: .95rem;
}

.cl-dep-text {
    color: var(--h-text-secondary);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 0 24px;
    font-style: italic;
}

.cl-dep-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cl-dep-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--h-border);
}

.cl-dep-author strong {
    display: block;
    font-size: .9rem;
    color: var(--h-text);
}

.cl-dep-author span {
    font-size: .8rem;
    color: var(--h-muted);
}

/* Arrows */
.cl-dep-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all .25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.cl-dep-arrow:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cl-dep-prev {
    left: -8px;
}

.cl-dep-next {
    right: -8px;
}

/* Dots */
.cl-dep-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.cl-dep-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--h-border);
    cursor: pointer;
    padding: 0;
    transition: all .3s ease;
}

.cl-dep-dot.is-active {
    background: var(--accent);
    transform: scale(1.2);
}

/* ── Segmentos ── */
.cl-segmentos {
    padding: 80px 0;
    background: var(--h-bg);
}

.cl-seg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cl-seg-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 20px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .3s ease, opacity .4s ease;
}

.cl-seg-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cl-seg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .07);
    border-color: var(--accent);
}

.cl-seg-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.3rem;
    color: var(--accent);
    transition: background .3s ease, transform .3s ease;
}

.cl-seg-card:hover .cl-seg-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.08);
}

.cl-seg-card h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--h-text);
    margin: 0;
}

/* ── CTA ── */
.cl-cta {
    padding: 64px 0 88px;
    background: var(--h-bg);
}

.cl-cta-card {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    border-radius: 20px;
    padding: 64px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cl-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .07) 0%, transparent 60%);
    pointer-events: none;
}

.cl-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
    color: #fff;
}

.cl-cta-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.cl-cta-card p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.cl-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.cl-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.cl-cta-whatsapp:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.cl-cta-servicos {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.cl-cta-servicos:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

/* ── Dark Mode ── */
[data-theme="dark"] .cl-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .cl-dep-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .cl-dep-arrow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .cl-seg-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .cl-logo-item {
    filter: grayscale(1) opacity(.4) brightness(1.3);
}

[data-theme="dark"] .cl-logo-item:hover {
    filter: grayscale(0) opacity(1) brightness(1);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .cl-hero-title {
        font-size: 2.5rem;
    }

    .cl-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-dep-card {
        flex: 0 0 calc(50% - 16px);
    }

    .cl-seg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .cl-hero {
        padding: 100px 0 60px;
    }

    .cl-hero-title {
        font-size: 2.1rem;
    }

    .cl-hero-sub {
        font-size: 1rem;
    }

    .cl-hero-stats {
        gap: 24px;
    }

    .cl-hero-stat-num {
        font-size: 1.6rem;
    }

    .cl-seg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cl-filter-search {
        width: 100%;
    }

    .cl-section-title {
        font-size: 1.7rem;
    }

    .cl-cta-card {
        padding: 48px 28px;
    }

    .cl-cta-card h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 767px) {
    .cl-hero {
        padding: 88px 0 48px;
    }

    .cl-hero-title {
        font-size: 1.8rem;
    }

    .cl-grid {
        grid-template-columns: 1fr;
    }

    .cl-dep-card {
        flex: 0 0 calc(100% - 16px);
    }

    .cl-dep-prev {
        left: 4px;
    }

    .cl-dep-next {
        right: 4px;
    }

    .cl-seg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    .cl-hero-stat-divider {
        width: 48px;
        height: 1px;
    }

    .cl-depoimentos,
    .cl-segmentos {
        padding: 56px 0;
    }

    .cl-cta {
        padding: 44px 0 64px;
    }

    .cl-cta-card h2 {
        font-size: 1.45rem;
    }
}

@media (max-width: 575px) {
    .cl-hero {
        padding: 80px 0 40px;
    }

    .cl-hero-title {
        font-size: 1.55rem;
    }

    .cl-hero-sub {
        font-size: .93rem;
    }

    .cl-filter-btn {
        padding: 7px 14px;
        font-size: .82rem;
    }

    .cl-card {
        padding: 22px;
    }

    .cl-seg-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .cl-seg-card {
        padding: 24px 14px;
    }

    .cl-section-title {
        font-size: 1.45rem;
    }

    .cl-cta-card {
        padding: 40px 20px;
    }

    .cl-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }

    .cl-dep-card {
        padding: 24px 20px 20px;
    }
}


/* ===========================================================
   CONTEÚDO GRATUITO PAGE (.cg-)
   =========================================================== */

/* ── Hero ── */
.cg-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    text-align: center;
}

.cg-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.cg-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.cg-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.cg-hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cg-particle {
    position: absolute;
    bottom: -40px;
    color: rgba(255, 255, 255, .08);
    animation: cg-float linear infinite;
}

@keyframes cg-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110vh) rotate(360deg);
        opacity: 0;
    }
}

.cg-hero-content {
    position: relative;
    z-index: 2;
}

.cg-hero .blog-breadcrumb,
.cg-hero .blog-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cg-hero .blog-breadcrumb a:hover {
    color: #fff;
}

.cg-hero .blog-breadcrumb i {
    opacity: .35;
}

.cg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: var(--h-radius-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .15);
}

.cg-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.cg-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cg-hero-sub {
    max-width: 620px;
    margin: 0 auto 44px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.cg-hero-counters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.cg-hero-counter {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cg-hero-counter-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.cg-hero-counter-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.cg-hero-counter-txt {
    display: block;
    font-size: .78rem;
    color: rgba(255, 255, 255, .65);
    margin-top: 2px;
}

/* ── Download Modal ── */
.cg-dl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.cg-dl-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.cg-dl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.92);
    width: 94%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--h-surface);
    border-radius: var(--h-radius-md);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
    padding: 36px 32px 32px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, transform .3s;
}

.cg-dl-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.cg-dl-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--h-surface-soft);
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--h-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--h-fast), color var(--h-fast);
    line-height: 1;
}

.cg-dl-close:hover {
    background: var(--h-border);
    color: var(--h-text);
}

.cg-dl-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.cg-dl-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.cg-dl-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cg-dl-cat {
    font-size: .82rem;
    font-weight: 600;
    color: var(--h-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cg-dl-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cg-dl-badge:empty {
    display: none;
}

.cg-dl-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--h-text);
    line-height: 1.3;
    margin-bottom: 10px;
}

.cg-dl-desc {
    font-size: .92rem;
    color: var(--h-text-secondary);
    line-height: 1.65;
    margin-bottom: 24px;
}

.cg-dl-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.cg-dl-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: var(--h-radius-sm);
    background: var(--h-surface-soft);
    border: 1px solid var(--h-border);
}

.cg-dl-info-item>i {
    font-size: 1rem;
    color: var(--h-muted);
    flex-shrink: 0;
}

.cg-dl-info-label {
    display: block;
    font-size: .7rem;
    color: var(--h-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1px;
}

.cg-dl-info-value {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--h-text);
}

.cg-dl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    border-radius: var(--h-radius-sm);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--h-fast), box-shadow var(--h-fast), filter var(--h-fast);
}

.cg-dl-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff;
}

.cg-dl-btn:active {
    transform: translateY(0);
}

.cg-dl-hint {
    text-align: center;
    font-size: .78rem;
    color: var(--h-muted);
    margin-top: 16px;
    margin-bottom: 0;
}

.cg-dl-hint i {
    margin-right: 4px;
    color: #16a34a;
}

@media (max-width: 575px) {
    .cg-dl-modal {
        padding: 28px 20px 24px;
    }

    .cg-dl-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cg-dl-title {
        font-size: 1.15rem;
    }

    .cg-dl-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* ── Featured Section ── */
.cg-featured {
    padding: 64px 0;
    background: var(--h-bg);
}

.cg-section-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cg-section-title>i {
    color: var(--accent);
    font-size: 1.2rem;
}

.cg-section-title-center {
    justify-content: center;
    text-align: center;
}

.cg-section-sub {
    color: var(--h-text-secondary);
    font-size: 1.05rem;
    text-align: center;
    margin: -16px auto 44px;
    max-width: 540px;
}

.cg-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cg-featured-card {
    display: flex;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    opacity: 0;
    transform: translateY(20px);
}

.cg-featured-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cg-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
}

.cg-featured-card-accent {
    width: 5px;
    flex-shrink: 0;
}

.cg-featured-card-body {
    padding: 28px;
    flex: 1;
    min-width: 0;
}

.cg-featured-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 18px;
}

.cg-featured-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cg-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cg-badge-sm {
    padding: 2px 8px;
    font-size: .68rem;
}

.cg-cat-label {
    font-size: .78rem;
    color: var(--h-muted);
    font-weight: 500;
}

.cg-featured-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
    line-height: 1.35;
}

.cg-featured-desc {
    color: var(--h-text-secondary);
    font-size: .9rem;
    line-height: 1.65;
    margin: 0 0 20px;
}

.cg-featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cg-file-info {
    font-size: .8rem;
    color: var(--h-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--h-radius-pill);
    color: #fff !important;
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.cg-featured-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    filter: brightness(1.1);
}

/* ── Library / Filter ── */
.cg-library {
    padding: 64px 0 80px;
    background: var(--h-surface-soft);
}

.cg-filter-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.cg-filter-cats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cg-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
}

.cg-filter-btn>i {
    font-size: .78rem;
}

.cg-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cg-filter-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cg-filter-search {
    position: relative;
    min-width: 260px;
}

.cg-filter-search>i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--h-muted);
    font-size: .85rem;
    pointer-events: none;
}

.cg-filter-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .9rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cg-filter-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 36, 66, 92), .12);
}

/* ── Card Grid ── */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cg-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, opacity .4s ease;
    opacity: 0;
    transform: translateY(20px);
}

.cg-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .07);
}

.cg-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cg-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.cg-card-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cg-card-cat {
    font-size: .75rem;
    color: var(--h-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cg-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
    line-height: 1.35;
}

.cg-card-desc {
    color: var(--h-text-secondary);
    font-size: .87rem;
    line-height: 1.6;
    margin: 0 0 auto;
    padding-bottom: 20px;
}

.cg-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--h-border);
    gap: 10px;
}

.cg-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .25s ease;
}

.cg-card-btn:hover {
    filter: brightness(.85);
    transform: translateX(2px);
}

/* ── Empty State ── */
.cg-empty {
    text-align: center;
    padding: 72px 0;
}

.cg-empty i {
    font-size: 2.5rem;
    color: var(--h-muted);
    margin-bottom: 18px;
    display: block;
}

.cg-empty h3 {
    font-size: 1.3rem;
    color: var(--h-text);
    margin: 0 0 8px;
}

.cg-empty p {
    color: var(--h-text-secondary);
    font-size: .95rem;
}

/* ── Why Section ── */
.cg-why {
    padding: 80px 0;
    background: var(--h-bg);
}

.cg-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.cg-why-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .3s ease, opacity .4s ease;
}

.cg-why-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cg-why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .07);
    border-color: var(--accent);
}

.cg-why-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.3rem;
    color: var(--accent);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.cg-why-card:hover .cg-why-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.08);
}

.cg-why-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.cg-why-card p {
    color: var(--h-text-secondary);
    font-size: .87rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Newsletter ── */
.cg-newsletter {
    padding: 64px 0;
    background: var(--h-surface-soft);
}

.cg-newsletter-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 56px 44px;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.cg-newsletter-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.5rem;
    color: var(--accent);
}

.cg-newsletter-card h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 12px;
}

.cg-newsletter-card>p {
    color: var(--h-text-secondary);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0 0 28px;
}

.cg-newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 460px;
    margin: 0 auto 14px;
}

.cg-newsletter-input-wrap {
    position: relative;
    flex: 1;
}

.cg-newsletter-input-wrap>i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--h-muted);
    font-size: .9rem;
    pointer-events: none;
}

.cg-newsletter-input-wrap input {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .92rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cg-newsletter-input-wrap input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 36, 66, 92), .12);
}

.cg-newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--h-radius-pill);
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap;
}

.cg-newsletter-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

.cg-newsletter-hint {
    font-size: .78rem;
    color: var(--h-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ── CTA ── */
.cg-cta {
    padding: 64px 0 88px;
    background: var(--h-bg);
}

.cg-cta-card {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    border-radius: 20px;
    padding: 64px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cg-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .07) 0%, transparent 60%);
    pointer-events: none;
}

.cg-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
    color: #fff;
}

.cg-cta-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.cg-cta-card>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.cg-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cg-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.cg-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.cg-cta-whatsapp:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.cg-cta-servicos {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.cg-cta-servicos:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

/* ── Dark Mode ── */
[data-theme="dark"] .cg-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .cg-featured-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .cg-why-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .cg-newsletter-card {
    border-color: var(--h-border);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .cg-hero-title {
        font-size: 2.5rem;
    }

    .cg-featured-grid {
        grid-template-columns: 1fr;
    }

    .cg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .cg-hero {
        padding: 100px 0 60px;
    }

    .cg-hero-title {
        font-size: 2.1rem;
    }

    .cg-hero-sub {
        font-size: 1rem;
    }

    .cg-hero-counters {
        gap: 24px;
    }

    .cg-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .cg-filter-search {
        min-width: unset;
        width: 100%;
    }

    .cg-section-title {
        font-size: 1.6rem;
    }

    .cg-cta-card {
        padding: 48px 28px;
    }

    .cg-cta-card h2 {
        font-size: 1.7rem;
    }

    .cg-newsletter-card {
        padding: 44px 28px;
    }

    .cg-newsletter-card h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 767px) {
    .cg-hero {
        padding: 88px 0 48px;
    }

    .cg-hero-title {
        font-size: 1.8rem;
    }

    .cg-hero-counters {
        flex-direction: column;
        gap: 16px;
    }

    .cg-grid {
        grid-template-columns: 1fr;
    }

    .cg-why-grid {
        grid-template-columns: 1fr;
    }

    .cg-featured,
    .cg-library {
        padding: 48px 0;
    }

    .cg-why,
    .cg-newsletter {
        padding: 56px 0;
    }

    .cg-cta {
        padding: 44px 0 64px;
    }

    .cg-cta-card h2 {
        font-size: 1.45rem;
    }

    .cg-newsletter-form {
        flex-direction: column;
    }

    .cg-newsletter-btn {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .cg-hero {
        padding: 80px 0 40px;
    }

    .cg-hero-title {
        font-size: 1.55rem;
    }

    .cg-hero-sub {
        font-size: .93rem;
    }

    .cg-hero-badge {
        font-size: .8rem;
        padding: 6px 16px;
    }

    .cg-filter-btn {
        padding: 7px 14px;
        font-size: .82rem;
    }

    .cg-filter-btn>span {
        display: none;
    }

    .cg-card {
        padding: 22px;
    }

    .cg-featured-card-body {
        padding: 22px;
    }

    .cg-section-title {
        font-size: 1.35rem;
    }

    .cg-cta-card {
        padding: 40px 20px;
    }

    .cg-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }

    .cg-newsletter-card {
        padding: 36px 18px;
    }

    .cg-why-card {
        padding: 24px 18px;
    }
}


/* ===========================================================
   LIVROS PAGE (.lv-)
   =========================================================== */

/* ── Hero ── */
.lv-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
}

.lv-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.lv-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.lv-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.lv-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.lv-hero .blog-breadcrumb {
    margin-bottom: 0;
}

.lv-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.lv-hero-accent {
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fb923c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lv-hero-sub {
    max-width: 600px;
    margin: 0 auto 44px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.lv-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.lv-hero-stat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lv-hero-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.lv-hero-stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.lv-hero-stat-txt {
    display: block;
    font-size: .78rem;
    color: rgba(255, 255, 255, .6);
    margin-top: 2px;
}

.lv-hero-stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, .15);
}

/* ── Section titles ── */
.lv-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

.lv-section-title-center {
    text-align: center;
}

.lv-section-sub {
    color: var(--h-text-secondary);
    font-size: 1.05rem;
    text-align: center;
    margin: 0 auto 40px;
    max-width: 500px;
}

/* ── Tags ── */
.lv-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-soft);
    border: 1px solid var(--h-border);
    color: var(--h-muted);
    font-size: .78rem;
    font-weight: 500;
}

.lv-tag-sm {
    padding: 3px 10px;
    font-size: .72rem;
}

/* ── Featured Books ── */
.lv-featured {
    padding: 64px 0;
    background: var(--h-bg);
}

.lv-feat-row {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease, transform .5s ease;
}

.lv-feat-row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lv-feat-row:last-child {
    margin-bottom: 0;
}

.lv-feat-reverse {
    grid-template-columns: 1fr 340px;
}

.lv-feat-reverse .lv-feat-cover {
    order: 2;
}

.lv-feat-reverse .lv-feat-info {
    order: 1;
}

/* Cover */
.lv-feat-cover {
    position: relative;
    display: flex;
    justify-content: center;
}

.lv-feat-cover-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.lv-feat-cover-img {
    position: relative;
    z-index: 1;
    width: 260px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .05);
    transition: transform .4s ease, box-shadow .4s ease;
}

.lv-feat-row:hover .lv-feat-cover-img {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .05);
}

.lv-feat-cover-img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.lv-feat-type-badge {
    position: absolute;
    top: 16px;
    right: -8px;
    z-index: 2;
    padding: 5px 16px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

/* Info */
.lv-feat-info {
    min-width: 0;
}

.lv-feat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.lv-feat-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 6px;
    line-height: 1.2;
}

.lv-feat-subtitle {
    font-size: 1.05rem;
    color: var(--h-text-secondary);
    margin: 0 0 18px;
    font-style: italic;
}

.lv-feat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.lv-feat-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--h-muted);
}

.lv-feat-meta i {
    color: var(--accent);
    font-size: .8rem;
}

.lv-feat-resumo {
    color: var(--h-text-secondary);
    font-size: .93rem;
    line-height: 1.7;
    margin: 0 0 22px;
}

.lv-feat-topicos {
    margin-bottom: 28px;
}

.lv-feat-topicos h4 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lv-feat-topicos h4 i {
    color: var(--accent);
}

.lv-feat-topicos ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lv-feat-topicos li {
    position: relative;
    padding-left: 20px;
    font-size: .87rem;
    color: var(--h-text-secondary);
    line-height: 1.5;
}

.lv-feat-topicos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .5;
}

.lv-feat-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    color: #fff !important;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.lv-feat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
    filter: brightness(1.1);
}

/* ── Filter bar ── */
.lv-all {
    padding: 64px 0 80px;
    background: var(--h-surface-soft);
}

.lv-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.lv-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lv-filter-btn {
    padding: 9px 18px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: .87rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
}

.lv-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.lv-filter-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.lv-filter-search {
    position: relative;
    min-width: 240px;
}

.lv-filter-search>i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--h-muted);
    font-size: .85rem;
    pointer-events: none;
}

.lv-filter-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .9rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.lv-filter-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 36, 66, 92), .12);
}

/* ── Card Grid ── */
.lv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.lv-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, opacity .4s ease;
    opacity: 0;
    transform: translateY(24px);
}

.lv-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
}

/* Card cover */
.lv-card-cover {
    position: relative;
    overflow: hidden;
}

.lv-card-cover-inner {
    transition: transform .4s ease;
}

.lv-card:hover .lv-card-cover-inner {
    transform: scale(1.03);
}

.lv-card-cover-inner img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.lv-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Card body */
.lv-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lv-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.lv-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.lv-card-subtitle {
    font-size: .85rem;
    color: var(--h-text-secondary);
    font-style: italic;
    margin: 0 0 12px;
}

.lv-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.lv-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--h-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   PROJETO.PHP — Página de detalhe de projeto (prefixo .pj-)
   ══════════════════════════════════════════════════════════════════════════ */

/* === HERO === */
.pj-hero {
    position: relative;
    padding: 160px 0 90px;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    overflow: hidden;
}

.pj-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, .06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, .04) 0%, transparent 50%);
    pointer-events: none;
}

.pj-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    pointer-events: none;
}

.pj-hero-bg {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="30" cy="30" r="1" fill="rgba(255,255,255,.05)"/></svg>') repeat;
    opacity: .5;
}

.pj-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.pj-hero .blog-breadcrumb {
    margin-bottom: 22px;
}

.pj-hero .blog-breadcrumb,
.pj-hero .blog-breadcrumb a,
.pj-hero .blog-breadcrumb span {
    color: rgba(255, 255, 255, .7) !important;
    font-size: .88rem;
}

.pj-hero .blog-breadcrumb a:hover {
    color: #fff !important;
}

.pj-hero .blog-breadcrumb i {
    font-size: .6rem;
    margin: 0 8px;
    opacity: .5;
    color: rgba(255, 255, 255, .5) !important;
}

.pj-hero-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.pj-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 18px;
}

.pj-hero-sub {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 26px;
    max-width: 700px;
}

.pj-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.pj-hero-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .7);
}

.pj-hero-meta span i {
    color: rgba(255, 255, 255, .5);
}

.pj-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pj-hero-btn-primary,
.pj-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.pj-hero-btn-primary {
    background: #fff;
    color: #1a1a2e;
}

.pj-hero-btn-primary:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
}

.pj-hero-btn-secondary {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(8px);
}

.pj-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    transform: translateY(-2px);
}


/* === GALLERY (Bento Grid) === */
.pj-gallery {
    padding: 30px 0 60px;
}

.pj-bento-grid {
    display: grid;
    gap: 10px;
    grid-auto-rows: 200px;
}

/* 4+ imagens: layout assimétrico */
.pj-bento-quad {
    grid-template-columns: 1.3fr 0.7fr 0.7fr;
    grid-template-rows: 220px 220px;
}

.pj-bento-quad .pj-bento-item:nth-child(1) {
    grid-row: 1 / 3;
}

/* 3 imagens */
.pj-bento-trio {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 230px 230px;
}

.pj-bento-trio .pj-bento-item:nth-child(1) {
    grid-row: 1 / 3;
}

/* 2 imagens */
.pj-bento-duo {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 320px;
}

/* 1 imagem */
.pj-bento-solo {
    grid-template-columns: 1fr;
    grid-template-rows: 420px;
}

.pj-bento-item {
    position: relative;
    border-radius: var(--h-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--h-surface-soft);
}

.pj-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25, .8, .25, 1), filter .4s ease;
}

.pj-bento-item:hover img {
    transform: scale(1.06);
}

/* Overlay */
.pj-bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .5) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
}

.pj-bento-item:hover .pj-bento-overlay {
    opacity: 1;
}

.pj-bento-zoom {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    transition: all .25s ease;
}

.pj-bento-item:hover .pj-bento-zoom {
    transform: scale(1.1);
    background: rgba(255, 255, 255, .28);
}

/* Counter badge */
.pj-bento-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .85);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.pj-bento-item:hover .pj-bento-counter {
    opacity: 1;
}

/* === LIGHTBOX === */
.pj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pjLbIn .3s ease;
}

.pj-lightbox[hidden] {
    display: none;
}

@keyframes pjLbIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pj-lb-img-wrap {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj-lb-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--h-radius-md);
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    animation: pjLbImgIn .35s ease;
}

@keyframes pjLbImgIn {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pj-lb-close,
.pj-lb-prev,
.pj-lb-next {
    position: absolute;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all .25s ease;
    z-index: 2;
}

.pj-lb-close:hover,
.pj-lb-prev:hover,
.pj-lb-next:hover {
    background: rgba(255, 255, 255, .22);
    transform: scale(1.08);
}

.pj-lb-close {
    top: 20px;
    right: 20px;
}

.pj-lb-prev {
    left: 20px;
    top: 50%;
    margin-top: -24px;
}

.pj-lb-next {
    right: 20px;
    top: 50%;
    margin-top: -24px;
}

.pj-lb-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 20px;
    border-radius: var(--h-radius-pill);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
    font-weight: 600;
}


/* === CHALLENGE & SOLUTION === */
.pj-challenge {
    padding: 70px 0;
}

.pj-challenge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pj-challenge-card {
    position: relative;
    padding: 40px 36px;
    border-radius: var(--h-radius-md);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}

.pj-challenge-card.pj-visible {
    opacity: 1;
    transform: translateY(0);
}

.pj-challenge-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.pj-challenge-problem .pj-challenge-icon {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

.pj-challenge-solution .pj-challenge-icon {
    background: rgba(34, 197, 94, .1);
    color: #22c55e;
}

.pj-challenge-card h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 14px;
}

.pj-challenge-card p {
    font-size: .97rem;
    line-height: 1.75;
    color: var(--h-text-secondary);
    margin: 0;
}


/* === SECTION HEADER (reusable) === */
.pj-section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.pj-section-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 10px;
    line-height: 1.2;
}

.pj-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pj-section-sub {
    font-size: 1.05rem;
    color: var(--h-muted);
    margin: 0;
}


/* === EXECUTION CARDS === */
.pj-execution {
    padding: 70px 0;
    background: var(--h-surface-soft);
}

.pj-exec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.pj-exec-card {
    position: relative;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 36px 32px 32px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(25px);
    transition: all .5s ease;
}

.pj-exec-card.pj-visible {
    opacity: 1;
    transform: translateY(0);
}

.pj-exec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
}

.pj-exec-number {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--h-border);
    line-height: 1;
    pointer-events: none;
}

.pj-exec-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.pj-exec-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.pj-exec-card p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--h-text-secondary);
    margin: 0;
}


/* === TAGS === */
.pj-tags-section {
    margin-top: 50px;
    text-align: center;
}

.pj-tags-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--h-muted);
    margin-bottom: 16px;
}

.pj-tags-label i {
    margin-right: 6px;
}

.pj-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pj-tag {
    display: inline-block;
    padding: 7px 18px;
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    font-size: .82rem;
    font-weight: 500;
    color: var(--h-text-secondary);
    transition: all .25s ease;
}

.pj-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}


/* === RESULTS === */
.pj-results {
    padding: 70px 0;
}

.pj-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pj-result-card {
    text-align: center;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 36px 20px;
    opacity: 0;
    transform: translateY(25px);
    transition: all .5s ease;
}

.pj-result-card.pj-visible {
    opacity: 1;
    transform: translateY(0);
}

.pj-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .06);
}

.pj-result-icon {
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.pj-result-valor {
    display: block;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
}

.pj-result-label {
    display: block;
    font-size: .88rem;
    color: var(--h-muted);
    line-height: 1.4;
}


/* === TESTIMONIAL === */
.pj-testimonial {
    padding: 70px 0;
    background: var(--h-surface-soft);
}

.pj-testimonial-card {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 48px 44px 40px;
    text-align: center;
    opacity: 0;
    transform: translateY(25px);
    transition: all .6s ease;
}

.pj-testimonial-card.pj-visible {
    opacity: 1;
    transform: translateY(0);
}

.pj-testimonial-quote {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 20px;
    opacity: .3;
}

.pj-testimonial-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--h-text-secondary);
    font-style: italic;
    margin: 0 0 28px;
}

.pj-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
}

.pj-testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--h-border);
}

.pj-testimonial-name {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--h-text);
}

.pj-testimonial-role {
    display: block;
    font-size: .84rem;
    color: var(--h-muted);
    margin-top: 2px;
}


/* === TIMELINE === */
.pj-timeline {
    padding: 70px 0;
}

.pj-timeline-track {
    position: relative;
    padding-left: 36px;
    max-width: 750px;
    margin: 0 auto;
}

.pj-timeline-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    width: 2px;
    background: var(--h-border);
}

.pj-tl-item {
    position: relative;
    padding-bottom: 40px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all .5s ease;
}

.pj-tl-item:last-child {
    padding-bottom: 0;
}

.pj-tl-item.pj-visible {
    opacity: 1;
    transform: translateX(0);
}

.pj-tl-dot {
    position: absolute;
    left: -30px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    background: var(--h-bg);
    z-index: 2;
}

.pj-tl-content {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 24px 28px;
}

.pj-tl-step {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.pj-tl-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 8px;
}

.pj-tl-content p {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--h-text-secondary);
    margin: 0;
}


/* === FAQ === */
.pj-faq {
    padding: 70px 0;
    background: var(--h-surface-soft);
}

.pj-faq-list {
    max-width: 750px;
    margin: 0 auto;
}

.pj-faq-item {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease;
}

.pj-faq-item:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
}

.pj-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: .97rem;
    font-weight: 600;
    color: var(--h-text);
    text-align: left;
    line-height: 1.5;
    gap: 14px;
}

.pj-faq-question i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--h-surface-soft);
    font-size: .7rem;
    color: var(--h-muted);
    transition: all .3s ease;
}

.pj-faq-item.is-open .pj-faq-question i {
    background: var(--accent);
    color: #fff;
}

.pj-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.pj-faq-answer p {
    padding: 0 24px 22px;
    font-size: .92rem;
    line-height: 1.75;
    color: var(--h-text-secondary);
    margin: 0;
}


/* === CTA === */
.pj-cta {
    padding: 70px 0 80px;
}

.pj-cta-card {
    border-radius: var(--h-radius-md);
    padding: 56px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    opacity: 0;
    transform: translateY(25px);
    transition: all .6s ease;
}

.pj-cta-card.pj-visible {
    opacity: 1;
    transform: translateY(0);
}

.pj-cta-text h2 {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
}

.pj-cta-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 480px;
}

.pj-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.pj-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    white-space: nowrap;
}

.pj-cta-whatsapp {
    background: #25d366;
    color: #fff;
}

.pj-cta-whatsapp:hover {
    background: #20bd5a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, .35);
}

.pj-cta-contato {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
}

.pj-cta-contato:hover {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    transform: translateY(-2px);
}


/* === RELATED PROJECTS === */
.pj-related {
    padding: 70px 0 90px;
    background: var(--h-surface-soft);
}

.pj-related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 36px;
}

.pj-related-header .pj-section-title {
    margin-bottom: 4px;
}

.pj-related-sub {
    margin-top: 0;
}

.pj-carousel-nav {
    display: flex;
    gap: 10px;
}

.pj-carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
    font-size: .85rem;
}

.pj-carousel-btn:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.pj-carousel-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.pj-carousel-viewport {
    overflow: hidden;
}

.pj-carousel-track {
    display: flex;
    gap: 24px;
}

.pj-related-card {
    flex: 0 0 calc((100% - 48px) / 3);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: all .35s ease;
    opacity: 0;
    transform: translateY(20px);
}

.pj-related-card.pj-visible {
    opacity: 1;
    transform: translateY(0);
}

.pj-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .07);
}

.pj-related-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.pj-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.pj-related-card:hover .pj-related-img img {
    transform: scale(1.06);
}

.pj-related-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pj-related-body {
    padding: 20px 22px 24px;
}

.pj-related-client {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--h-muted);
    margin-bottom: 8px;
}

.pj-related-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.35;
}

.pj-related-desc {
    font-size: .85rem;
    line-height: 1.6;
    color: var(--h-text-secondary);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pj-related-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
    transition: gap .25s ease;
}

.pj-related-card:hover .pj-related-link {
    gap: 10px;
}


/* === RESPONSIVE === */
@media (max-width: 991px) {
    .pj-hero {
        padding: 130px 0 70px;
    }

    .pj-hero-title {
        font-size: 2.5rem;
    }

    .pj-bento-quad {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px;
    }

    .pj-bento-quad .pj-bento-item:nth-child(1) {
        grid-column: span 2;
        grid-row: auto;
    }

    .pj-bento-trio {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px;
    }

    .pj-bento-trio .pj-bento-item:nth-child(1) {
        grid-column: span 2;
        grid-row: auto;
    }

    .pj-challenge-grid {
        grid-template-columns: 1fr;
    }

    .pj-exec-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pj-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pj-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 44px 32px;
    }

    .pj-cta-text p {
        max-width: 100%;
    }

    .pj-cta-actions {
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }

    .pj-related-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }

    .pj-section-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    .pj-hero {
        padding: 120px 0 60px;
    }

    .pj-hero-title {
        font-size: 2.1rem;
    }

    .pj-hero-sub {
        font-size: 1.02rem;
    }

    .pj-bento-quad,
    .pj-bento-trio {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px;
    }

    .pj-bento-duo {
        grid-template-rows: 240px;
    }

    .pj-lb-prev {
        left: 10px;
    }

    .pj-lb-next {
        right: 10px;
    }

    .pj-exec-grid {
        grid-template-columns: 1fr;
    }

    .pj-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pj-testimonial-card {
        padding: 36px 28px 32px;
    }

    .pj-testimonial-text {
        font-size: 1rem;
    }

    .pj-related-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pj-section-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 575px) {
    .pj-hero {
        padding: 110px 0 50px;
    }

    .pj-hero-title {
        font-size: 1.55rem;
    }

    .pj-hero-sub {
        font-size: .93rem;
    }

    .pj-hero-meta {
        gap: 12px;
    }

    .pj-hero-meta span {
        font-size: .82rem;
    }

    .pj-hero-actions {
        flex-direction: column;
    }

    .pj-hero-btn-primary,
    .pj-hero-btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .pj-bento-quad,
    .pj-bento-trio,
    .pj-bento-duo {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .pj-bento-quad .pj-bento-item:nth-child(1),
    .pj-bento-trio .pj-bento-item:nth-child(1) {
        grid-column: auto;
    }

    .pj-bento-item {
        min-height: 200px;
    }

    .pj-bento-solo {
        grid-template-rows: 280px;
    }

    .pj-bento-duo .pj-bento-item {
        min-height: 220px;
    }

    .pj-lb-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }

    .pj-lb-prev,
    .pj-lb-next {
        width: 40px;
        height: 40px;
    }

    .pj-results-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .pj-result-card {
        padding: 28px 14px;
    }

    .pj-result-valor {
        font-size: 1.8rem;
    }

    .pj-testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    .pj-cta-card {
        padding: 36px 24px;
    }

    .pj-cta-text h2 {
        font-size: 1.35rem;
    }

    .pj-related-card {
        flex: 0 0 100%;
    }

    .pj-section-title {
        font-size: 1.4rem;
    }

    .pj-timeline-track {
        padding-left: 28px;
    }

    .pj-tl-dot {
        left: -22px;
        width: 12px;
        height: 12px;
    }

    .pj-timeline-track::before {
        left: 8px;
    }

    .pj-tl-content {
        padding: 18px 20px;
    }
}

.lv-card-meta i {
    font-size: .75rem;
    color: var(--accent);
}

.lv-card-resumo {
    color: var(--h-text-secondary);
    font-size: .87rem;
    line-height: 1.6;
    margin: 0 0 auto;
    padding-bottom: 20px;
}

.lv-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--h-radius-pill);
    border: 2px solid;
    background: transparent;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
    align-self: flex-start;
}

.lv-card-btn:hover {
    background: currentColor;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.lv-card-btn:hover i {
    color: #fff;
}

/* ── Empty ── */
.lv-empty {
    text-align: center;
    padding: 72px 0;
}

.lv-empty>i {
    font-size: 2.5rem;
    color: var(--h-muted);
    margin-bottom: 18px;
    display: block;
}

.lv-empty h3 {
    font-size: 1.3rem;
    color: var(--h-text);
    margin: 0 0 8px;
}

.lv-empty p {
    color: var(--h-text-secondary);
    font-size: .95rem;
}

/* ── Author Section ── */
.lv-author {
    padding: 80px 0;
    background: var(--h-bg);
}

.lv-author-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 48px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

.lv-author-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lv-author-avatar {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.lv-author-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    opacity: .3;
}

.lv-author-avatar img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--h-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

.lv-author-label {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.lv-author-info h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 4px;
}

.lv-author-role {
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.lv-author-bio {
    color: var(--h-text-secondary);
    font-size: .93rem;
    line-height: 1.7;
    margin: 0 0 24px;
}

.lv-author-nums {
    display: flex;
    gap: 36px;
}

.lv-author-nums div {
    text-align: center;
}

.lv-author-nums strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--h-text);
}

.lv-author-nums span {
    font-size: .78rem;
    color: var(--h-muted);
}

/* ── CTA ── */
.lv-cta {
    padding: 64px 0 88px;
    background: var(--h-bg);
}

.lv-cta-card {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    border-radius: 20px;
    padding: 64px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lv-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .07) 0%, transparent 60%);
    pointer-events: none;
}

.lv-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
    color: #fff;
}

.lv-cta-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.lv-cta-card>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.lv-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lv-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.lv-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.lv-cta-whatsapp:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.lv-cta-servicos {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.lv-cta-servicos:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

/* ── Dark Mode ── */
[data-theme="dark"] .lv-card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .lv-feat-cover-img {
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .05);
}

[data-theme="dark"] .lv-feat-row:hover .lv-feat-cover-img {
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .05);
}

[data-theme="dark"] .lv-author-card {
    box-shadow: none;
}

[data-theme="dark"] .lv-feat-cover-glow {
    opacity: .12;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .lv-hero-title {
        font-size: 2.5rem;
    }

    .lv-feat-row {
        grid-template-columns: 260px 1fr;
        gap: 40px;
    }

    .lv-feat-reverse {
        grid-template-columns: 1fr 260px;
    }

    .lv-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lv-feat-topicos ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .lv-hero {
        padding: 100px 0 60px;
    }

    .lv-hero-title {
        font-size: 2.1rem;
    }

    .lv-hero-sub {
        font-size: 1rem;
    }

    .lv-feat-row,
    .lv-feat-reverse {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .lv-feat-reverse .lv-feat-cover {
        order: 0;
    }

    .lv-feat-reverse .lv-feat-info {
        order: 0;
    }

    .lv-feat-tags {
        justify-content: center;
    }

    .lv-feat-meta {
        justify-content: center;
    }

    .lv-feat-topicos ul {
        grid-template-columns: 1fr;
    }

    .lv-feat-topicos {
        text-align: left;
    }

    .lv-feat-btn {
        align-self: center;
    }

    .lv-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .lv-filter-search {
        width: 100%;
    }

    .lv-section-title {
        font-size: 1.7rem;
    }

    .lv-author-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 36px;
        gap: 28px;
    }

    .lv-author-avatar {
        margin: 0 auto;
    }

    .lv-author-nums {
        justify-content: center;
    }

    .lv-cta-card {
        padding: 48px 28px;
    }

    .lv-cta-card h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 767px) {
    .lv-hero {
        padding: 88px 0 48px;
    }

    .lv-hero-title {
        font-size: 1.8rem;
    }

    .lv-hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    .lv-hero-stat-divider {
        width: 48px;
        height: 1px;
    }

    .lv-grid {
        grid-template-columns: 1fr;
    }

    .lv-feat-row {
        margin-bottom: 56px;
    }

    .lv-feat-cover-img {
        width: 220px;
    }

    .lv-feat-title {
        font-size: 1.5rem;
    }

    .lv-featured,
    .lv-all {
        padding: 48px 0 56px;
    }

    .lv-author {
        padding: 56px 0;
    }

    .lv-cta {
        padding: 44px 0 64px;
    }

    .lv-cta-card h2 {
        font-size: 1.45rem;
    }

    .lv-author-avatar,
    .lv-author-avatar img {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 575px) {
    .lv-hero-title {
        font-size: 1.55rem;
    }

    .lv-hero-sub {
        font-size: .93rem;
    }

    .lv-filter-btn {
        padding: 7px 14px;
        font-size: .82rem;
    }

    .lv-card-body {
        padding: 20px;
    }

    .lv-feat-cover-img {
        width: 190px;
    }

    .lv-feat-title {
        font-size: 1.3rem;
    }

    .lv-feat-btn {
        padding: 12px 24px;
        font-size: .88rem;
    }

    .lv-section-title {
        font-size: 1.35rem;
    }

    .lv-author-card {
        padding: 28px 20px;
    }

    .lv-author-nums {
        gap: 20px;
    }

    .lv-cta-card {
        padding: 40px 20px;
    }

    .lv-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }
}


/* ===========================================================
   LIVRO DETALHE PAGE (.lb-)
   =========================================================== */

/* ── Progress bar ── */
.lb-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    z-index: 9999;
    transition: width .15s linear;
}

/* ── Hero ── */
.lb-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
}

.lb-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--lb-cor, var(--accent)) 35%, #1a1a2e) 50%, color-mix(in srgb, var(--lb-cor, var(--accent)) 65%, #111) 100%);
    z-index: 0;
}

.lb-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.lb-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.lb-hero-content {
    position: relative;
    z-index: 2;
}

.lb-hero .blog-breadcrumb {
    margin-bottom: 36px;
}

.lb-hero-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: center;
}

/* ── Hero cover ── */
.lb-hero-cover {
    position: relative;
    display: flex;
    justify-content: center;
}

.lb-hero-cover-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .25;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.lb-hero-cover-img {
    position: relative;
    z-index: 1;
    width: 280px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .05);
    transition: transform .5s ease, box-shadow .5s ease;
}

.lb-hero-cover-img:hover {
    transform: translateY(-10px) rotate(-1.5deg);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08);
}

.lb-hero-cover-img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.lb-hero-type-badge {
    position: absolute;
    top: 18px;
    right: -10px;
    z-index: 3;
    padding: 6px 18px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* ── Hero info ── */
.lb-hero-info {
    min-width: 0;
}

.lb-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.lb-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 500;
}

.lb-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    margin: 0 0 8px;
    letter-spacing: -.02em;
}

.lb-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .65);
    font-style: italic;
    margin: 0 0 24px;
}

.lb-hero-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.lb-hero-author img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .2);
}

.lb-hero-author strong {
    display: block;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
}

.lb-hero-author span {
    font-size: .78rem;
    color: rgba(255, 255, 255, .55);
}

.lb-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.lb-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 14px 16px;
}

.lb-hero-meta-item>i {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .5);
    flex-shrink: 0;
}

.lb-hero-meta-item strong {
    display: block;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.1;
}

.lb-hero-meta-item span {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
    margin-top: 1px;
}

.lb-hero-resumo {
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 0 30px;
}

.lb-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lb-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: var(--h-radius-pill);
    color: #fff !important;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

.lb-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .3);
    filter: brightness(1.1);
}

.lb-btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 28px;
    border-radius: var(--h-radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
}

.lb-btn-share:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

/* ── Section titles (body) ── */
.lb-section-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lb-section-title-center {
    justify-content: center;
    text-align: center;
}

.lb-section-title>i {
    font-size: 1.1rem;
}

.lb-section-sub {
    color: var(--h-text-secondary);
    font-size: 1rem;
    text-align: center;
    margin: 0 auto 40px;
    max-width: 480px;
}

/* ── About (Descrição + Ficha) ── */
.lb-about {
    padding: 72px 0;
    background: var(--h-bg);
}

.lb-about-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}

.lb-about-desc {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

.lb-about-desc.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-desc-content {
    color: var(--h-text-secondary);
    font-size: .95rem;
    line-height: 1.8;
    margin-top: 20px;
}

.lb-desc-content p {
    margin: 0 0 16px;
}

.lb-desc-content strong {
    color: var(--h-text);
}

/* Ficha Técnica */
.lb-ficha-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 16px;
    padding: 28px;
    position: sticky;
    top: 100px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

.lb-ficha-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-ficha-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-ficha-title>i {
    color: var(--accent);
    font-size: .9rem;
}

.lb-ficha-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lb-ficha-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--h-border);
    font-size: .87rem;
}

.lb-ficha-list li:last-child {
    border-bottom: none;
}

.lb-ficha-label {
    color: var(--h-muted);
    font-weight: 500;
}

.lb-ficha-value {
    color: var(--h-text);
    font-weight: 600;
    text-align: right;
}

/* ── Tópicos (O que vai aprender) ── */
.lb-topicos {
    padding: 72px 0;
    background: var(--h-surface-soft);
}

.lb-topicos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lb-topico-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s ease, box-shadow .3s ease;
}

.lb-topico-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-topico-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.lb-topico-num {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}

.lb-topico-card p {
    margin: 0;
    color: var(--h-text-secondary);
    font-size: .9rem;
    line-height: 1.6;
}

/* ── Sumário ── */
.lb-sumario {
    padding: 72px 0;
    background: var(--h-bg);
}

.lb-sumario-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 44px;
    overflow: hidden;
}

.lb-sumario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--h-border);
}

.lb-sumario-sub {
    color: var(--h-muted);
    font-size: .88rem;
    margin: 4px 0 0;
}

.lb-sumario-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.lb-sumario-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 10px;
    transition: background .25s ease, opacity .4s ease, transform .4s ease;
    opacity: 0;
    transform: translateY(10px);
}

.lb-sumario-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-sumario-item:hover {
    background: var(--h-surface-soft);
}

.lb-sumario-num {
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    min-width: 52px;
}

.lb-sumario-cap {
    color: var(--h-text);
    font-size: .92rem;
    font-weight: 500;
}

.lb-sumario-line {
    flex: 1;
    height: 1px;
    background: var(--h-border);
    opacity: .5;
    min-width: 20px;
}

/* ── Para quem é ── */
.lb-para-quem {
    padding: 72px 0;
    background: var(--h-surface-soft);
}

.lb-para-quem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.lb-pq-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 32px 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s ease, box-shadow .3s ease;
}

.lb-pq-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-pq-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
    transform: translateY(-4px);
}

.lb-pq-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 18px;
}

.lb-pq-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 8px;
}

.lb-pq-card p {
    color: var(--h-text-secondary);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Autor ── */
.lb-autor {
    padding: 72px 0;
    background: var(--h-bg);
}

.lb-autor-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 44px;
    align-items: center;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 44px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

.lb-autor-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-autor-avatar {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.lb-autor-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    opacity: .3;
}

.lb-autor-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--h-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

.lb-autor-label {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--h-radius-pill);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.lb-autor-info h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 4px;
}

.lb-autor-role {
    font-size: .88rem;
    font-weight: 600;
    margin: 0 0 14px;
}

.lb-autor-bio {
    color: var(--h-text-secondary);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0 0 22px;
}

.lb-autor-nums {
    display: flex;
    gap: 32px;
}

.lb-autor-nums div {
    text-align: center;
}

.lb-autor-nums strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--h-text);
}

.lb-autor-nums span {
    font-size: .76rem;
    color: var(--h-muted);
}

/* ── Relacionados ── */
.lb-relacionados {
    padding: 72px 0;
    background: var(--h-surface-soft);
}

.lb-rel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lb-rel-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, opacity .4s ease;
    opacity: 0;
    transform: translateY(20px);
}

.lb-rel-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lb-rel-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
}

.lb-rel-cover {
    position: relative;
    overflow: hidden;
}

.lb-rel-cover-inner {
    transition: transform .4s ease;
}

.lb-rel-card:hover .lb-rel-cover-inner {
    transform: scale(1.04);
}

.lb-rel-cover-inner img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.lb-rel-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lb-rel-body {
    padding: 22px;
}

.lb-rel-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.lb-rel-body p {
    font-size: .85rem;
    color: var(--h-text-secondary);
    font-style: italic;
    margin: 0 0 10px;
}

.lb-rel-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--h-muted);
}

.lb-rel-meta i {
    color: var(--accent);
    font-size: .72rem;
}

.lb-btn-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    color: var(--h-text) !important;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.lb-btn-all:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

/* ── CTA ── */
.lb-cta {
    padding: 56px 0 88px;
    background: var(--h-bg);
}

.lb-cta-card {
    border-radius: 20px;
    padding: 60px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lb-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .08) 0%, transparent 60%);
    pointer-events: none;
}

.lb-cta-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 1.5rem;
    color: #fff;
}

.lb-cta-card h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.lb-cta-card>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto 30px;
    line-height: 1.65;
}

.lb-cta-card>p strong {
    color: #fff;
}

.lb-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.lb-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.lb-cta-whatsapp:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.lb-cta-servicos {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.lb-cta-servicos:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

/* ── Dark mode ── */
[data-theme="dark"] .lb-hero-cover-img {
    box-shadow: 0 24px 64px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04);
}

[data-theme="dark"] .lb-hero-cover-img:hover {
    box-shadow: 0 34px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}

[data-theme="dark"] .lb-topico-card:hover,
[data-theme="dark"] .lb-pq-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .lb-rel-card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

[data-theme="dark"] .lb-hero-cover-glow {
    opacity: .14;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .lb-hero-grid {
        grid-template-columns: 260px 1fr;
        gap: 40px;
    }

    .lb-hero-title {
        font-size: 2.2rem;
    }

    .lb-hero-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-about-grid {
        grid-template-columns: 1fr 300px;
        gap: 36px;
    }

    .lb-topicos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-para-quem-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-sumario-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .lb-hero {
        padding: 100px 0 60px;
    }

    .lb-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .lb-hero-cover {
        order: -1;
    }

    .lb-hero-tags {
        justify-content: center;
    }

    .lb-hero-title {
        font-size: 2rem;
    }

    .lb-hero-author {
        justify-content: center;
    }

    .lb-hero-meta {
        grid-template-columns: repeat(4, 1fr);
    }

    .lb-hero-resumo {
        text-align: left;
    }

    .lb-hero-actions {
        justify-content: center;
    }

    .lb-about-grid {
        grid-template-columns: 1fr;
    }

    .lb-ficha-card {
        position: static;
    }

    .lb-section-title {
        font-size: 1.45rem;
    }

    .lb-topicos-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lb-para-quem-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lb-autor-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
        padding: 36px;
    }

    .lb-autor-avatar {
        margin: 0 auto;
    }

    .lb-autor-nums {
        justify-content: center;
    }

    .lb-rel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-sumario-card {
        padding: 32px;
    }

    .lb-cta-card {
        padding: 48px 28px;
    }
}

@media (max-width: 767px) {
    .lb-hero {
        padding: 88px 0 48px;
    }

    .lb-hero-title {
        font-size: 1.65rem;
    }

    .lb-hero-subtitle {
        font-size: 1rem;
    }

    .lb-hero-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-hero-cover-img {
        width: 220px;
    }

    .lb-topicos-grid {
        grid-template-columns: 1fr;
    }

    .lb-para-quem-grid {
        grid-template-columns: 1fr;
    }

    .lb-rel-grid {
        grid-template-columns: 1fr;
    }

    .lb-about,
    .lb-topicos,
    .lb-sumario,
    .lb-para-quem,
    .lb-autor,
    .lb-relacionados {
        padding: 52px 0;
    }

    .lb-cta {
        padding: 40px 0 64px;
    }

    .lb-cta-card h2 {
        font-size: 1.45rem;
    }

    .lb-autor-avatar,
    .lb-autor-avatar img {
        width: 120px;
        height: 120px;
    }

    .lb-sumario-card {
        padding: 24px;
    }

    .lb-sumario-item {
        padding: 12px 10px;
    }
}

@media (max-width: 575px) {
    .lb-hero-title {
        font-size: 1.4rem;
    }

    .lb-hero-cover-img {
        width: 190px;
    }

    .lb-hero-meta {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .lb-hero-meta-item {
        padding: 10px 12px;
    }

    .lb-hero-actions {
        flex-direction: column;
    }

    .lb-btn-primary,
    .lb-btn-share {
        width: 100%;
        justify-content: center;
    }

    .lb-section-title {
        font-size: 1.25rem;
    }

    .lb-topico-card {
        padding: 20px;
    }

    .lb-pq-card {
        padding: 24px 18px;
    }

    .lb-autor-card {
        padding: 28px 20px;
    }

    .lb-cta-card {
        padding: 40px 20px;
    }

    .lb-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }
}


/* ===========================================================
   CONTATO PAGE (.ct-)
   =========================================================== */

/* ── Hero ── */
.ct-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
}

.ct-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.ct-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.ct-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.ct-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ct-hero .blog-breadcrumb {
    margin-bottom: 0;
}

.ct-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.ct-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ct-hero-sub {
    max-width: 600px;
    margin: 0 auto 44px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

.ct-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.ct-hero-stat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ct-hero-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #34d399;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ct-hero-stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.ct-hero-stat-txt {
    display: block;
    font-size: .78rem;
    color: rgba(255, 255, 255, .6);
    margin-top: 2px;
}

.ct-hero-stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, .15);
}

/* ── Quick contact cards ── */
.ct-quick {
    padding: 64px 0;
    background: var(--h-bg);
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.ct-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ct-quick-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 28px 24px;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all .35s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ct-quick-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ct-quick-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
}

.ct-quick-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 8px;
    transition: transform .3s ease;
}

.ct-quick-card:hover .ct-quick-icon {
    transform: scale(1.08);
}

.ct-quick-whatsapp .ct-quick-icon {
    background: rgba(37, 211, 102, .1);
    color: #25d366;
}

.ct-quick-email .ct-quick-icon {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.ct-quick-phone .ct-quick-icon {
    background: rgba(99, 102, 241, .1);
    color: #6366f1;
}

.ct-quick-location .ct-quick-icon {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

.ct-quick-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0;
}

.ct-quick-card p {
    font-size: .87rem;
    color: var(--h-text-secondary);
    margin: 2px 0 8px;
    word-break: break-all;
}

.ct-quick-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transform: translateY(4px);
    transition: all .3s ease;
}

.ct-quick-card:hover .ct-quick-label {
    opacity: 1;
    transform: translateY(0);
}

/* ── Section titles ── */
.ct-section-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 8px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-section-title>i {
    color: var(--accent);
    font-size: 1.05rem;
}

.ct-section-title-center {
    justify-content: center;
    text-align: center;
}

.ct-section-sub {
    color: var(--h-text-secondary);
    font-size: 1rem;
    text-align: center;
    margin: 0 auto 40px;
    max-width: 480px;
}

/* ── Main (Form + Info) ── */
.ct-main {
    padding: 20px 0 80px;
    background: var(--h-bg);
}

.ct-main-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 36px;
    align-items: start;
}

/* ── Form card ── */
.ct-form-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    padding: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

.ct-form-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ct-form-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--h-border);
}

.ct-form-header-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
}

.ct-form-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0;
}

.ct-form-header p {
    font-size: .88rem;
    color: var(--h-text-secondary);
    margin: 2px 0 0;
}

.ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ct-form-group {
    margin-bottom: 16px;
    position: relative;
}

.ct-form-row .ct-form-group {
    margin-bottom: 0;
}

.ct-form-group label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 6px;
}

.ct-form-group label i {
    color: var(--accent);
    font-size: .78rem;
    margin-right: 2px;
}

.ct-form-group label span {
    color: #ef4444;
    font-weight: 400;
}

.ct-form-group input,
.ct-form-group select,
.ct-form-group textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--h-radius-sm);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: .92rem;
    font-family: inherit;
    transition: border-color .25s ease, box-shadow .25s ease;
    -webkit-appearance: none;
}

.ct-form-group input::placeholder,
.ct-form-group textarea::placeholder {
    color: var(--h-muted);
    opacity: .65;
}

.ct-form-group input:focus,
.ct-form-group select:focus,
.ct-form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.ct-form-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.ct-form-group textarea {
    resize: vertical;
    min-height: 120px;
    max-height: 300px;
}

.ct-char-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: .72rem;
    color: var(--h-muted);
    pointer-events: none;
}

.ct-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ct-form-privacy {
    font-size: .78rem;
    color: var(--h-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.ct-form-privacy i {
    color: #16a34a;
}

.ct-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 34px;
    border-radius: var(--h-radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s ease;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.ct-form-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
    filter: brightness(1.08);
}

.ct-form-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

/* Feedback */
.ct-feedback {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--h-radius-sm);
    font-size: .9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-feedback-success {
    background: rgba(22, 163, 106, .08);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 106, .2);
}

.ct-feedback-error {
    background: rgba(239, 68, 68, .08);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .2);
}

/* ── Info sidebar ── */
.ct-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct-info-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 16px;
    padding: 28px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s ease;
}

.ct-info-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ct-info-card-accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--h-surface)), var(--h-surface));
    border-color: color-mix(in srgb, var(--accent) 20%, var(--h-border));
}

.ct-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 14px;
}

.ct-info-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 12px;
}

.ct-info-card p {
    color: var(--h-text-secondary);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 4px;
}

/* Horários */
.ct-horarios {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ct-horarios li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--h-border);
    font-size: .85rem;
}

.ct-horarios li:last-child {
    border-bottom: none;
}

.ct-horario-dia {
    color: var(--h-text);
    font-weight: 600;
    white-space: nowrap;
}

.ct-horario-line {
    flex: 1;
    height: 1px;
    background: var(--h-border);
    min-width: 10px;
}

.ct-horario-hora {
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.ct-fechado {
    color: #ef4444 !important;
}

/* Redes sociais */
.ct-sociais {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ct-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    opacity: .85;
    transition: opacity .25s ease, transform .25s ease;
}

.ct-social-link img {
    width: 28px;
    height: 28px;
    display: block;
}

.ct-social-link:hover {
    opacity: 1;
    transform: translateY(-3px);
}

/* Vantagens */
.ct-vantagens {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ct-vantagens li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: .88rem;
    color: var(--h-text-secondary);
}

.ct-vantagens li i {
    color: #16a34a;
    font-size: .78rem;
    flex-shrink: 0;
}

/* ── Mapa ── */
.ct-mapa {
    padding: 0 0 80px;
    background: var(--h-bg);
}

.ct-mapa-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 20px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

.ct-mapa-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ct-mapa-header {
    padding: 32px 36px;
}

.ct-mapa-header p {
    color: var(--h-text-secondary);
    font-size: .92rem;
    margin: 6px 0 0;
}

.ct-mapa-embed {
    position: relative;
    width: 100%;
    line-height: 0;
}

.ct-mapa-embed iframe {
    width: 100%;
    height: 260px;
    border: none;
}

/* ── FAQ ── */
.ct-faq {
    padding: 80px 0;
    background: var(--h-surface-soft);
}

.ct-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-faq-item {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease, box-shadow .3s ease;
}

.ct-faq-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ct-faq-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.ct-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--h-text);
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    transition: color .25s ease;
}

.ct-faq-q:hover {
    color: var(--accent);
}

.ct-faq-q>i {
    color: var(--h-muted);
    font-size: .8rem;
    flex-shrink: 0;
    transition: transform .3s ease, color .3s ease;
}

.ct-faq-item.is-open .ct-faq-q>i {
    transform: rotate(180deg);
    color: var(--accent);
}

.ct-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
    padding: 0 24px;
}

.ct-faq-item.is-open .ct-faq-a {
    max-height: 300px;
    padding: 0 24px 20px;
}

.ct-faq-a p {
    color: var(--h-text-secondary);
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

.ct-faq-a a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.ct-faq-a a:hover {
    text-decoration: underline;
}

/* ── CTA ── */
.ct-cta {
    padding: 0 0 88px;
    background: var(--h-surface-soft);
}

.ct-cta-card {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    border-radius: 20px;
    padding: 64px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ct-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .07) 0%, transparent 60%);
    pointer-events: none;
}

.ct-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
    color: #fff;
}

.ct-cta-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.ct-cta-card>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.ct-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ct-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.ct-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.ct-cta-whatsapp:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.ct-cta-servicos {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.ct-cta-servicos:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

/* ── Dark mode ── */
[data-theme="dark"] .ct-quick-card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .ct-faq-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

[data-theme="dark"] .ct-form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23adb5bd' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .ct-hero-title {
        font-size: 2.5rem;
    }

    .ct-main-grid {
        grid-template-columns: 1fr 320px;
    }

    .ct-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .ct-hero {
        padding: 100px 0 60px;
    }

    .ct-hero-title {
        font-size: 2.1rem;
    }

    .ct-hero-sub {
        font-size: 1rem;
    }

    .ct-main-grid {
        grid-template-columns: 1fr;
    }

    .ct-info-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .ct-form-card {
        padding: 32px;
    }

    .ct-section-title {
        font-size: 1.45rem;
    }

    .ct-mapa-header {
        padding: 28px;
    }

    .ct-cta-card {
        padding: 48px 28px;
    }

    .ct-cta-card h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 767px) {
    .ct-hero {
        padding: 88px 0 48px;
    }

    .ct-hero-title {
        font-size: 1.8rem;
    }

    .ct-hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    .ct-hero-stat-divider {
        width: 48px;
        height: 1px;
    }

    .ct-quick-grid {
        grid-template-columns: 1fr;
    }

    .ct-quick {
        padding: 48px 0;
    }

    .ct-info-wrap {
        grid-template-columns: 1fr;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
    }

    .ct-form-card {
        padding: 24px;
    }

    .ct-form-header {
        flex-direction: column;
        text-align: center;
    }

    .ct-form-footer {
        flex-direction: column;
        text-align: center;
    }

    .ct-form-btn {
        width: 100%;
    }

    .ct-main {
        padding: 20px 0 56px;
    }

    .ct-faq {
        padding: 56px 0;
    }

    .ct-mapa {
        padding: 0 0 56px;
    }

    .ct-mapa-embed iframe {
        height: 280px;
    }

    .ct-cta-card h2 {
        font-size: 1.45rem;
    }
}

@media (max-width: 575px) {
    .ct-hero-title {
        font-size: 1.55rem;
    }

    .ct-hero-sub {
        font-size: .93rem;
    }

    .ct-quick-card {
        padding: 22px 18px;
    }

    .ct-form-group input,
    .ct-form-group select,
    .ct-form-group textarea {
        padding: 11px 14px;
        font-size: .88rem;
    }

    .ct-section-title {
        font-size: 1.25rem;
    }

    .ct-faq-q {
        padding: 16px 18px;
        font-size: .9rem;
    }

    .ct-faq-a {
        padding: 0 18px;
    }

    .ct-faq-item.is-open .ct-faq-a {
        padding: 0 18px 16px;
    }

    .ct-info-card {
        padding: 22px;
    }

    .ct-mapa-header {
        padding: 22px;
    }

    .ct-cta-card {
        padding: 40px 20px;
    }

    .ct-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PROJETOS PAGE (.pr-)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.pr-hero {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    text-align: center;
}

.pr-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, color-mix(in srgb, var(--accent) 40%, #1a1a2e) 50%, var(--accent) 100%);
    z-index: 0;
}

.pr-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .06) 0%, transparent 40%);
}

.pr-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--h-bg), transparent);
    z-index: 1;
}

.pr-hero-content {
    position: relative;
    z-index: 2;
}

.pr-hero .blog-breadcrumb {
    margin-bottom: 20px;
}

.pr-hero .blog-breadcrumb,
.pr-hero .blog-breadcrumb a,
.pr-hero .blog-breadcrumb span {
    color: rgba(255, 255, 255, .6) !important;
}

.pr-hero .blog-breadcrumb a:hover {
    color: #fff !important;
}

.pr-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.02em;
}

.pr-hero-accent {
    background: linear-gradient(90deg, #34d399, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pr-hero-sub {
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.7;
}

/* ─── Stats / Números de impacto ─── */
.pr-stats {
    padding: 0;
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.pr-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--h-surface);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
    border: 1px solid var(--h-border);
    overflow: hidden;
}

.pr-stat-item {
    text-align: center;
    padding: 40px 24px;
    position: relative;
}

.pr-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--h-border);
}

.pr-stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    display: inline;
}

.pr-stat-suffix {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    opacity: .7;
}

.pr-stat-label {
    display: block;
    margin-top: 8px;
    font-size: .92rem;
    color: var(--h-muted);
    font-weight: 500;
}

/* ─── Section label ─── */
.pr-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 28px;
    letter-spacing: .02em;
}

/* ─── Section titles ─── */
.pr-section-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 14px;
    letter-spacing: -.015em;
}

.pr-accent-text {
    color: var(--accent);
}

.pr-section-sub {
    font-size: 1.08rem;
    color: var(--h-muted);
    max-width: 560px;
    margin: 0 auto 0;
    line-height: 1.65;
}

.pr-portfolio-header {
    text-align: center;
    margin-bottom: 48px;
}

/* ─── Featured / Case em destaque ─── */
.pr-featured {
    padding: 80px 0 0;
}

.pr-featured-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--h-surface);
    border-radius: 20px;
    border: 1px solid var(--h-border);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .06);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}

.pr-featured-card.pr-visible {
    opacity: 1;
    transform: translateY(0);
}

.pr-featured-img {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.pr-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.pr-featured-card:hover .pr-featured-img img {
    transform: scale(1.05);
}

.pr-featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 16px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pr-featured-body {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pr-featured-client {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--h-muted);
    font-weight: 500;
    margin-bottom: 12px;
}

.pr-featured-client i {
    color: var(--accent);
    font-size: .8rem;
}

.pr-featured-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--h-text);
    margin: 0 0 16px;
    line-height: 1.25;
}

.pr-featured-desc {
    font-size: .98rem;
    color: var(--h-text-secondary);
    line-height: 1.7;
    margin: 0 0 24px;
}

.pr-featured-results {
    margin-bottom: 24px;
}

.pr-featured-results h4 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr-featured-results h4 i {
    color: var(--accent);
}

.pr-featured-results-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: var(--h-text-secondary);
    font-weight: 500;
}

.pr-result-item i {
    color: #34d399;
    font-size: .85rem;
    flex-shrink: 0;
}

.pr-featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.pr-tag {
    padding: 5px 14px;
    border-radius: var(--h-radius-pill);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.pr-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    background: var(--accent);
    color: #fff !important;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
    align-self: flex-start;
}

.pr-featured-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ─── Portfolio Grid / Filtros ─── */
.pr-portfolio {
    padding: 88px 0;
}

.pr-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.pr-filter-btn {
    padding: 9px 22px;
    border-radius: var(--h-radius-pill);
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text-secondary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pr-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pr-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@keyframes prFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Project Cards ─── */
.pr-card {
    background: var(--h-surface);
    border-radius: 18px;
    border: 1px solid var(--h-border);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
}

.pr-card.pr-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease, box-shadow .35s ease;
}

.pr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
}

.pr-card-img-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.pr-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.pr-card:hover .pr-card-img-wrap img {
    transform: scale(1.08);
}

.pr-card-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.pr-card-cat {
    padding: 5px 14px;
    border-radius: var(--h-radius-pill);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pr-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pr-card-client {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--h-muted);
    font-weight: 500;
    margin-bottom: 10px;
}

.pr-card-client i {
    color: var(--accent);
    font-size: .75rem;
}

.pr-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
    line-height: 1.3;
}

.pr-card-desc {
    font-size: .88rem;
    color: var(--h-text-secondary);
    line-height: 1.65;
    margin: 0 0 18px;
    flex: 1;
}

.pr-card-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--h-surface-soft);
    border-radius: var(--h-radius-sm);
    border: 1px solid var(--h-border);
}

.pr-card-result {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--h-text-secondary);
    font-weight: 500;
}

.pr-card-result i {
    color: #34d399;
    font-size: .75rem;
    flex-shrink: 0;
}

.pr-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.pr-tag-sm {
    padding: 3px 10px;
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-soft);
    color: var(--h-muted);
    font-size: .72rem;
    font-weight: 600;
    border: 1px solid var(--h-border);
}

.pr-tag-more {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

.pr-card-footer {
    margin-top: auto;
}

.pr-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--h-radius-pill);
    background: var(--accent);
    color: #fff !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
    width: 100%;
    justify-content: center;
}

.pr-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ─── Processo de trabalho ─── */
.pr-process {
    padding: 88px 0;
    background: var(--h-surface-soft);
}

.pr-process-timeline {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
}

.pr-process-timeline::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
}

.pr-process-step {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 48px;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .5s ease, transform .5s ease;
}

.pr-process-step.pr-visible {
    opacity: 1;
    transform: translateX(0);
}

.pr-process-step:last-child {
    padding-bottom: 0;
}

.pr-step-number {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--h-surface);
    border: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent);
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.pr-step-content {
    flex: 1;
    padding-top: 10px;
}

.pr-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.pr-step-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.pr-step-content p {
    font-size: .92rem;
    color: var(--h-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ─── Diferenciais ─── */
.pr-diff {
    padding: 88px 0;
}

.pr-diff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pr-diff-card {
    text-align: center;
    padding: 40px 28px;
    background: var(--h-surface);
    border-radius: 18px;
    border: 1px solid var(--h-border);
    transition: transform .35s ease, box-shadow .35s ease;
    opacity: 0;
    transform: translateY(20px);
}

.pr-diff-card.pr-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s ease, transform .5s ease, box-shadow .35s ease;
}

.pr-diff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
}

.pr-diff-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.4rem;
    color: var(--accent);
    transition: background .3s ease;
}

.pr-diff-card:hover .pr-diff-icon {
    background: var(--accent);
    color: #fff;
}

.pr-diff-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--h-text);
    margin: 0 0 10px;
}

.pr-diff-card p {
    font-size: .88rem;
    color: var(--h-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ─── CTA Final ─── */
.pr-cta {
    padding: 0 0 88px;
    background: var(--h-surface-soft);
}

.pr-cta-card {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    border-radius: 20px;
    padding: 64px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.pr-cta-card.pr-visible {
    opacity: 1;
    transform: translateY(0);
}

.pr-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .07) 0%, transparent 60%);
    pointer-events: none;
}

.pr-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
    color: #fff;
}

.pr-cta-card h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.pr-cta-card>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.pr-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pr-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--h-radius-pill);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
}

.pr-cta-whatsapp {
    background: #25d366;
    color: #fff !important;
}

.pr-cta-whatsapp:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}

.pr-cta-contato {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.pr-cta-contato:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

/* ─── Responsivo Projetos ─── */
@media (max-width: 1199px) {
    .pr-hero-title {
        font-size: 2.5rem;
    }

    .pr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-diff-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .pr-hero {
        padding: 100px 0 64px;
    }

    .pr-hero-title {
        font-size: 2.1rem;
    }

    .pr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-stat-item:nth-child(2)::after {
        display: none;
    }

    .pr-stat-item:nth-child(1)::after,
    .pr-stat-item:nth-child(3)::after {
        height: 60%;
    }

    .pr-stat-item:nth-child(1),
    .pr-stat-item:nth-child(2) {
        border-bottom: 1px solid var(--h-border);
    }

    .pr-featured-card {
        grid-template-columns: 1fr;
    }

    .pr-featured-img {
        min-height: 280px;
    }

    .pr-featured-body {
        padding: 32px 28px;
    }

    .pr-section-title {
        font-size: 2rem;
    }

    .pr-portfolio,
    .pr-diff,
    .pr-process {
        padding: 64px 0;
    }

    .pr-cta-card {
        padding: 48px 28px;
    }

    .pr-cta-card h2 {
        font-size: 1.7rem;
    }

    .pr-process-timeline::before {
        left: 28px;
    }

    .pr-step-number {
        width: 56px;
        height: 56px;
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .pr-hero-title {
        font-size: 1.8rem;
    }

    .pr-hero-sub {
        font-size: 1rem;
    }

    .pr-stats {
        margin-top: -28px;
    }

    .pr-stat-number {
        font-size: 2.2rem;
    }

    .pr-stat-item {
        padding: 28px 18px;
    }

    .pr-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .pr-featured-img {
        min-height: 220px;
    }

    .pr-featured-title {
        font-size: 1.4rem;
    }

    .pr-diff-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pr-cta-card h2 {
        font-size: 1.45rem;
    }

    .pr-process-timeline::before {
        display: none;
    }

    .pr-process-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }

    .pr-step-icon {
        margin: 0 auto 14px;
    }
}

@media (max-width: 575px) {
    .pr-hero {
        padding: 90px 0 56px;
    }

    .pr-hero-title {
        font-size: 1.55rem;
    }

    .pr-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pr-featured-body {
        padding: 24px 20px;
    }

    .pr-card-body {
        padding: 20px 18px 24px;
    }

    .pr-filters {
        gap: 8px;
    }

    .pr-filter-btn {
        padding: 7px 16px;
        font-size: .8rem;
    }

    .pr-cta-card {
        padding: 40px 20px;
    }

    .pr-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }

    .pr-diff-card {
        padding: 28px 20px;
    }
}


/* ============================================================
   INDEX - NEW SECTIONS: STATS, SERVICES, PROJECTS, BLOG,
   BOOKS, NEWSLETTER
   Theme: light (default) + dark + system preference
   ============================================================ */

/* ----------------------------------------------------------
   SHARED HELPERS
   ---------------------------------------------------------- */
.idx-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    letter-spacing: 0.5px;
}
.idx-btn-outline:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ----------------------------------------------------------
   STATS / NUMEROS SECTION
   ---------------------------------------------------------- */
.idx-stats-section {
    padding: 80px 0;
    background: var(--accent);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.idx-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.07) 0%, transparent 65%);
    pointer-events: none;
}
.idx-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}
.idx-stat-item {
    text-align: center;
    padding: 30px 15px;
}
.idx-stat-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    opacity: 0.8;
}
.idx-stat-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}
.idx-stat-label {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
    font-weight: 500;
}
@media (max-width: 991px) {
    .idx-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .idx-stat-number { font-size: 2.4rem; }
}
@media (max-width: 575px) {
    .idx-stats-section { padding: 60px 0; }
    .idx-stats-grid { gap: 15px; }
    .idx-stat-number { font-size: 2rem; }
    .idx-stat-label { font-size: 0.78rem; letter-spacing: 1px; }
}

/* ----------------------------------------------------------
   SERVICES SECTION
   ---------------------------------------------------------- */
.idx-services-section {
    padding: 100px 0;
    background: var(--h-surface);
}
.idx-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.idx-service-card {
    background: var(--h-bg);
    border-radius: 16px;
    padding: 36px 28px 30px;
    text-align: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow: var(--h-shadow-sm);
    text-decoration: none;
    display: block;
    border: 1px solid var(--h-border);
    position: relative;
    overflow: hidden;
}
.idx-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--accent));
    opacity: 0;
    transition: opacity 0.35s ease;
}
.idx-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--h-shadow-md);
    border-color: transparent;
}
.idx-service-card:hover::before {
    opacity: 1;
}
.idx-service-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: #fff;
    margin-bottom: 18px;
    background: var(--card-accent, var(--accent));
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.idx-service-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--h-text);
}
.idx-service-card p {
    font-size: 0.9rem;
    color: var(--h-muted);
    line-height: 1.65;
    margin-bottom: 16px;
}
.idx-service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-accent, var(--accent));
    transition: gap 0.25s;
}
.idx-service-card:hover .idx-service-link {
    gap: 10px;
}
/* Dark mode: services */
[data-theme="dark"] .idx-service-card {
    background: var(--h-surface-alt);
    border-color: var(--h-border);
}
[data-theme="dark"] .idx-service-card:hover {
    border-color: transparent;
    box-shadow: 0 18px 45px rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-service-card {
        background: var(--h-surface-alt);
        border-color: var(--h-border);
    }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-service-card:hover {
        border-color: transparent;
        box-shadow: 0 18px 45px rgba(0,0,0,0.4);
    }
}
@media (max-width: 991px) {
    .idx-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .idx-services-section { padding: 70px 0; }
    .idx-services-grid { grid-template-columns: 1fr; gap: 16px; }
    .idx-service-card { padding: 22px 18px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: start; }
    .idx-service-card .idx-service-icon { grid-row: 1 / span 3; align-self: center; flex-shrink: 0; margin-bottom: 0; }
    .idx-service-card h3 { grid-column: 2; margin-bottom: 4px; }
    .idx-service-card p { grid-column: 2; margin-bottom: 6px; }
    .idx-service-card .idx-service-link { grid-column: 2; }
}

/* ----------------------------------------------------------
   PROJECTS / PORTFOLIO SECTION
   ---------------------------------------------------------- */
.idx-projects-section {
    padding: 100px 0;
    background: var(--h-bg);
}
.idx-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.idx-project-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--h-surface);
    box-shadow: var(--h-shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-decoration: none;
    display: block;
    border: 1px solid var(--h-border);
}
.idx-project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--h-shadow-md);
    border-color: transparent;
}
.idx-project-img {
    position: relative;
    overflow: hidden;
    height: 230px;
}
.idx-project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}
.idx-project-card:hover .idx-project-img img {
    transform: scale(1.06);
}
.idx-project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.idx-project-card:hover .idx-project-overlay {
    opacity: 1;
}
.idx-project-view {
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    padding: 10px 22px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.3);
}
.idx-project-info {
    padding: 22px 24px 24px;
}
.idx-project-cat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    background: var(--cat-color, var(--accent));
}
.idx-project-info h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--h-text);
    line-height: 1.3;
}
.idx-project-info p {
    font-size: 0.9rem;
    color: var(--h-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}
.idx-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.idx-project-tag {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 50px;
    background: var(--h-surface-soft);
    color: var(--h-text-secondary);
    border: 1px solid var(--h-border);
    font-weight: 500;
}
/* Dark: projects */
[data-theme="dark"] .idx-project-card {
    border-color: var(--h-border);
}
[data-theme="dark"] .idx-project-tag {
    background: var(--h-surface-alt);
    color: var(--h-text-secondary);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-project-card { border-color: var(--h-border); }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-project-tag { background: var(--h-surface-alt); color: var(--h-text-secondary); }
}
@media (max-width: 767px) {
    .idx-projects-section { padding: 70px 0; }
    .idx-projects-grid { grid-template-columns: 1fr; }
    .idx-project-img { height: 200px; }
}

/* ----------------------------------------------------------
   BLOG SECTION
   ---------------------------------------------------------- */
.idx-blog-section {
    padding: 100px 0;
    background: var(--h-surface);
}
.idx-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.idx-blog-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--h-bg);
    box-shadow: var(--h-shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--h-border);
}
.idx-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--h-shadow-md);
    border-color: transparent;
}
.idx-blog-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    height: 210px;
    text-decoration: none;
}
.idx-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.idx-blog-card:hover .idx-blog-thumb img {
    transform: scale(1.05);
}
.idx-blog-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
.idx-blog-body {
    padding: 22px 22px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.idx-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--h-muted);
    margin-bottom: 10px;
}
.idx-blog-meta i { margin-right: 4px; }
.idx-blog-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--h-text);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.25s;
}
.idx-blog-title:hover { color: var(--accent); }
.idx-blog-resumo {
    font-size: 0.88rem;
    color: var(--h-muted);
    line-height: 1.65;
    flex: 1;
    margin-bottom: 14px;
}
.idx-blog-author {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid var(--h-border);
    font-size: 0.83rem;
    color: var(--h-text-secondary);
    font-weight: 500;
}
.idx-blog-author img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* Dark: blog */
[data-theme="dark"] .idx-blog-card {
    background: var(--h-surface);
    border-color: var(--h-border);
}
[data-theme="dark"] .idx-blog-card:hover { border-color: transparent; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-blog-card { background: var(--h-surface); border-color: var(--h-border); }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-blog-card:hover { border-color: transparent; }
}
@media (max-width: 991px) {
    .idx-blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .idx-blog-section { padding: 70px 0; }
    .idx-blog-grid { grid-template-columns: 1fr; }
    .idx-blog-thumb { height: 190px; }
}

/* ----------------------------------------------------------
   BOOKS / E-BOOKS SECTION
   ---------------------------------------------------------- */
.idx-books-section {
    padding: 100px 0;
    background: var(--h-bg);
}
.idx-books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.idx-book-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--h-surface);
    box-shadow: var(--h-shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-decoration: none;
    display: block;
    border: 1px solid var(--h-border);
    position: relative;
}
.idx-book-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--book-accent, var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.idx-book-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--h-shadow-md);
    border-color: transparent;
}
.idx-book-card:hover::after { transform: scaleX(1); }
.idx-book-cover {
    padding: 28px 28px 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 200px;
}
.idx-book-cover img {
    max-height: 180px;
    width: auto;
    max-width: 100%;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.35s ease;
}
.idx-book-card:hover .idx-book-cover img {
    transform: translateY(-6px);
}
.idx-book-info {
    padding: 20px 22px 24px;
    text-align: center;
}
.idx-book-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #fff;
    background: var(--book-accent, var(--accent));
}
.idx-book-info h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 5px;
    line-height: 1.35;
}
.idx-book-sub {
    font-size: 0.83rem;
    color: var(--h-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}
.idx-book-meta {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--h-muted);
    margin-top: 8px;
}
.idx-book-meta i { margin-right: 4px; }
/* Dark: books */
[data-theme="dark"] .idx-book-card {
    background: var(--h-surface);
    border-color: var(--h-border);
}
[data-theme="dark"] .idx-book-card:hover { border-color: transparent; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-book-card { background: var(--h-surface); border-color: var(--h-border); }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .idx-book-card:hover { border-color: transparent; }
}
@media (max-width: 991px) {
    .idx-books-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .idx-books-section { padding: 70px 0; }
    .idx-books-grid { gap: 16px; }
    .idx-book-cover { min-height: 150px; padding: 20px 20px 0; }
    .idx-book-cover img { max-height: 140px; }
}

/* ----------------------------------------------------------
   NEWSLETTER SECTION
   ---------------------------------------------------------- */
.idx-newsletter-section {
    padding: 90px 0;
    background: var(--accent);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.idx-newsletter-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}
.idx-newsletter-content {
    margin-bottom: 24px;
}
.idx-newsletter-content h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}
.idx-newsletter-content > p {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 28px;
    line-height: 1.65;
    color: #fff;
}
.idx-newsletter-card {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.idx-newsletter-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.idx-newsletter-input-wrap {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 540px;
}
.idx-newsletter-input-wrap input[type="email"] {
    flex: 1;
    padding: 14px 22px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
    min-width: 0;
}
.idx-newsletter-input-wrap input[type="email"]::placeholder { color: rgba(255,255,255,0.6); }
.idx-newsletter-input-wrap input[type="email"]:focus {
    border-color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.2);
}
.idx-newsletter-input-wrap button {
    flex-shrink: 0;
    padding: 14px 28px;
    border-radius: 50px;
    background: #fff;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.92rem;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
    white-space: nowrap;
}
.idx-newsletter-input-wrap button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.idx-newsletter-input-wrap button:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.idx-newsletter-feedback {
    display: none;
    margin-top: 14px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #fff;
}
.idx-newsletter-feedback.success { background: rgba(255,255,255,0.18); display: block; }
.idx-newsletter-feedback.error { background: rgba(220,53,69,0.35); display: block; }
@media (max-width: 575px) {
    .idx-newsletter-section { padding: 65px 0; }
    .idx-newsletter-input-wrap { flex-direction: column; }
    .idx-newsletter-input-wrap button { width: 100%; justify-content: center; }
    .idx-newsletter-content h3 { font-size: 1.6rem; }
}