/* --- Estilos Globais e Resets --- */
html {
    scroll-behavior: auto;
    height: 100%;
    margin: 0;
}

/* Se quiser controlar a velocidade (apenas em alguns browsers modernos com scroll-snap) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: auto;
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    color-scheme: light;
    /* Tema base neutro */
    --color-text: #243041;
    --color-text-muted: #64748b;
    --color-bg: #f8f8ff;
    --color-surface: #f8f9fa;
    --color-surface-soft: #eef2f7;
    --color-surface-strong: #d6dee8;
    --color-border: #d7dee8;
    --color-accent: #e9c682;
    --color-accent-hover: #d8b46d;
    --color-on-accent: #ffffff;
    --color-contrast-surface: #2e3b4e;
    --sidebar-width: 300px;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-text: #eef3f8;
    --color-text-muted: #aab6c5;
    --color-bg: #101722;
    --color-surface: #182231;
    --color-surface-soft: #202c3d;
    --color-surface-strong: #2b394d;
    --color-border: #334155;
    --color-accent: #e9c682;
    --color-accent-hover: #f1d494;
    --color-on-accent: #172033;
    --color-contrast-surface: #0b111a;
}

main,
.main-content,
.article-detail-page,
#footer-placeholder,
#catalogo-placeholder {
    transition: margin-left 0.4s ease, transform 0.4s ease;
    margin-left: 0;
    
}

.top-header {
    transition: transform 0.4 ease;
}


/* On desktop we don't want the overlay to darken the page (overlay only for mobile) */
@media (min-width: 769px) {
  .overlay,
  #overlay {
    display: none !important;
  }
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color 0.4s ease, color 0.4s ease;
    height: 100%;
    margin: 0;
}
body.sidebar-open {
    overflow: hidden;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    text-align: center;
}

a {
    text-decoration: none;
    color: var(--color-text);
}

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

button {
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
}


/* --- Estilos do Cabeçalho Superior (Header) --- */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: transform 0.5s ease-out, background-color 0.5s ease;

}

.top-header.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

.top-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.top-header.scrolled {
    background-color: #31363fad;
    backdrop-filter: blur(5px);
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Estado/animação do header quando a busca abre (sem mexer no conteúdo da página) */
.top-header .header-right { transition: transform 260ms cubic-bezier(.2,.9,.2,1); will-change: transform; }
.top-header.search-open { --searchbox-width: 360px; }
.top-header.search-open .header-right { transform: translateX(calc(-1 * var(--searchbox-width) - 12px)); }

/* foco visual na caixa de busca quando aberta */
.top-header.search-open .search-box {transform: translateY(-50%) translateX(0) scale(1.01); }

.menu-toggle {
    font-size: 1.5em;
}

.header-logo img {
    max-width: 100%;
    height: 30px;
    width: auto;
    display: block;
    
}

.icon-btn {
    font-size: 1.3em;
}

.language-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.language-select {
    min-height: 36px;
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    border-radius: 8px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--color-surface) 84%, transparent);
    color: var(--color-text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.language-select:hover,
.language-select:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    color: var(--color-text);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
    outline: none;
}

.theme-toggle i {
    font-size: 0.92em;
    line-height: 1;
}

/* Estilos para a área de hover do cabeçalho */
#header-hover-area {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Altura da área de interação, ajuste conforme o necessário */
    z-index: 1001; /* Fica acima do header para capturar o evento */

}


/* Quando o header fica visível, ele deve ter um z-index maior */
#mainHeader.is-visible {
    z-index: 1002; /* Fica acima da área de hover para ser clicável */
}

.top-header {
    z-index: 1000;
}

/* --- Estilos da Sidebar --- */
.sidebar {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sidebar-width));
    right: auto;
    bottom: 0;                   /* garante limite inferior */
    height: 100vh;               /* garante que o contêiner tenha a altura da viewport */
    width: var(--sidebar-width);
    background-color: var(--color-surface);
    z-index: 1100;
    padding: 30px 20px 60px;     /* padding-bottom maior para acessar últimos itens */
    transition: left 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;            /* habilita scroll vertical */
    -webkit-overflow-scrolling: touch; /* suaviza o scroll em iOS */
    overscroll-behavior: contain;/* evita "pass-through" do scroll para o body */
}

.sidebar.active {
    left: 0;
}


.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.close-sidebar {
    font-size: 2em;
}

.sidebar-nav {
    list-style: none;
    flex-grow: 1;
}

.sidebar-nav li {
    border-bottom: 1px solid #535353;
    position: relative; /* Ponto de referência para submenus */
}

.sidebar-nav a {
    display: block;
    padding: 15px 0;
    font-size: 1.1em;
    transition: color 0.3s ease;
    
}

.sidebar-nav a:hover {
    color: var(--color-accent);
}

.has-submenu .sidebar-link,
.has-submenu-hover .sidebar-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.submenu .sidebar-link {
    margin-left: 10px;
}

/* --- Estilos para os Submenus (2º e 3º Nível) --- */
.submenu,
.submenu-aninhado,
.submenu-terceiro-nivel {
    list-style: none;
    max-height: 0; /* Esconde o submenu com transição */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.submenu.active,
.submenu-aninhado.active,
.submenu-terceiro-nivel.active {
    max-height: 500px;
    overflow-y: auto;

}

/* Rotação dos ícones de chevron */
.fa-rotate-90 {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.fa-rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.overlay,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    display: none;
}

.overlay.active,
#overlay.active {
    display: block;
}

body.sidebar-open main,
body.sidebar-open .main-content,
body.sidebar-open #footer-placeholder,
body.sidebar-open #footer-placeholder .whatsapp-fab,
body.sidebar-open #catalogo-placeholder,
body.sidebar-open .article-detail-page,
body.sidebar-open .blog-main {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.4s ease;
}


body.sidebar-open .top-header .main-header{
    transform: translateX(var(--sidebar-width))
}


/* --- Seção de Vídeo em Tela Cheia --- */
.video-hero-section {
    position: relative;
    height: 100vh;
    min-height: 100svh;
    width: 100%;
    /* overflow: hidden; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg);
}

.video-hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000 url("../../img/optimized/imagens-novas/banners-01.jpg") center / cover no-repeat;
}

@media (max-width: 768px) {
    .video-container {
        background-image: url("../../img/optimized/imagens-novas/banners-01-mobile.jpg");
    }
}

@supports (height: 100svh) {
    .sidebar,
    .overlay,
    #overlay,
    .video-hero-section {
        height: 100svh;
    }
}

#institutionalVideo,
#institutionalHeroImage,
#institutionalHeroSlideshow,
.hero-media-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Para garantir que fique abaixo do conteúdo da overlay */
}

.hero-slideshow {
    overflow: hidden;
    background: #000;
    contain: layout paint;
    pointer-events: none;
}

.hero-slideshow picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
    opacity: 0;
    z-index: 1;
    transition: opacity 850ms ease-in-out;
}

.hero-slideshow img.is-active {
    opacity: 1;
    z-index: 2;
}

.hero-whatsapp-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    color: inherit;
    text-decoration: none;
}

.hero-whatsapp-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -8px;
}

.video-hero-section .hero-slideshow img,
.video-hero-section .hero-slideshow picture img {
    object-fit: cover !important;
    object-position: center;
}

@media (max-width: 768px) {
    .video-hero-section::after {
        height: 72px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .video-hero-section .hero-slideshow img,
    .video-hero-section .hero-slideshow picture img {
        object-fit: cover !important;
        object-position: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slideshow img {
        transition: opacity 240ms ease;
    }
}

/* Esconder FAB enquanto o hero estiver visível (controlado por JS via body.hero-in-view) */
body.hero-in-view .whatsapp-fab {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* --- Seções Gerais (Animação de Scroll) --- */
section {
    /* min-height: 50vh; */
    padding: 60px 0;
}


.animate-on-scroll {
    --reveal-distance: 26px;
    --reveal-duration: 720ms;
    --reveal-ease: cubic-bezier(.22, 1, .36, 1);
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

:is(section, header, main, aside, div).animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

:is(section, header, main, aside, div).animate-on-scroll > * {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition: opacity 620ms var(--reveal-ease), transform 620ms var(--reveal-ease);
    will-change: opacity, transform;
}

:is(section, header, main, aside, div).animate-on-scroll > :nth-child(1) { transition-delay: 0ms; }
:is(section, header, main, aside, div).animate-on-scroll > :nth-child(2) { transition-delay: 90ms; }
:is(section, header, main, aside, div).animate-on-scroll > :nth-child(3) { transition-delay: 180ms; }
:is(section, header, main, aside, div).animate-on-scroll > :nth-child(4) { transition-delay: 270ms; }

:is(section, header, main, aside, div).animate-on-scroll.is-visible > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

:is(section, header, main, aside, div).animate-on-scroll > :is(.carousel-bg, .gallery-grid, .highlights-grid) {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-on-scroll > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* --- Seção de Destaques de Produtos --- */
.product-highlights {
    max-width: 100%;
    padding: 80px 20px;
    background-color: var(--color-bg);
}

.product-highlights h2 {
    margin-bottom: 80px;
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.highlights-grid {
    display: grid;
    grid-template-areas:
        "top-left center top-right"
        "bottom-left center bottom-right";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2, clamp(420px, 30vw, 450px));
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: stretch;

}

.highlight-item {
    background-color: var(--color-bg);
    color: var(--color-text);
    text-align: center;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1), box-shadow 0.45s ease;
}

.highlight-item img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    transition: transform 0.6s cubic-bezier(.2,.9,.2,1);
}

/* .highlight-item::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    z-index: 2;
    height: 2px;
    border-radius: 999px;
    background: var(--color-accent);
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}

.highlight-item:hover::after,
.highlight-item:focus-within::after {
    opacity: 1;
    transform: scaleX(1);
} */

.highlight-item span {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    background-color: #31363fad;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.3em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* 
.highlight-item span {
    background-color: var(--color-surface);
    color: var(--color-bg);
} */


.small-top-left { grid-area: top-left; min-height: 420px; }
.large-center { grid-area: center; min-height: 870px; }
.small-top-right { grid-area: top-right; min-height: 420px; }
.small-bottom-left { grid-area: bottom-left; min-height: 420px; }
.small-bottom-right { grid-area: bottom-right; min-height: 420px; }

/* --- Seção do Catálogo (Carrossel) --- */
/* .catalogo-section {
    padding: 80px 20px;
    background-color: var;
} */

.catalogo-section h2 {
    margin-bottom: 18px;
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #f8f8ff;
}

.catalogo-subtitle {
    max-width: 760px;
    margin: 0 auto 48px;
    font-size: 1.05rem;
    line-height: 1.8;
    text-align: center;
    color: rgba(248, 248, 255, 0.82);
}

.catalogo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.catalogo-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    gap: 30px;
    padding: 24px 12px 42px;
    margin: 0 auto;
    width: 100%;
    cursor: grab;
    user-select: none;
    align-items: stretch;
}

.catalogo-grid .produto-card,
.category-grid .produto-card {
    width: 272px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(233, 198, 130, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%),
        radial-gradient(circle at 18% 0%, rgba(233, 198, 130, 0.24) 0%, rgba(233, 198, 130, 0) 34%);
    color: #243041;
    text-align: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
    isolation: isolate;
    max-width: 100%;
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, border-color 260ms ease;
}

.catalogo-grid .produto-card::before,
.category-grid .produto-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(233, 198, 130, 0.3) 0%, rgba(233, 198, 130, 0) 36%),
        linear-gradient(315deg, rgba(36, 48, 65, 0.1) 0%, rgba(36, 48, 65, 0) 42%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
    z-index: -1;
}

.catalogo-grid .produto-card::after,
.category-grid .produto-card::after,
.veja-tambem-grid .produto-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    width: auto;
    height: 2px;
    border-radius: 999px;
    background: var(--color-accent);
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}



.catalogo-grid .produto-card:hover,
.category-grid .produto-card:hover,
.catalogo-grid .produto-card:focus-visible,
.category-grid .produto-card:focus-visible {
    border-color: rgba(36, 48, 65, 0.18);
    transform: translateY(-8px);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
    outline: none;
}

.catalogo-grid .produto-card:hover::before,
.category-grid .produto-card:hover::before,
.catalogo-grid .produto-card:focus-visible::before,
.category-grid .produto-card:focus-visible::before {
    opacity: 0;
}

.catalogo-grid .produto-card:hover::after,
.category-grid .produto-card:hover::after,
.veja-tambem-grid .produto-card:hover::after,
.catalogo-grid .produto-card:focus-visible::after,
.category-grid .produto-card:focus-visible::after,
.veja-tambem-grid .produto-card:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.catalogo-grid .produto-card img,
.category-grid .produto-card img {
    pointer-events: none;
    user-select: none;
    width: 100%;
    height: 210px;
    margin-bottom: 0;
    border-radius: 18px;
    object-fit: cover;
    background-color: #f3f6fb;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1), filter 260ms ease;
}

.catalogo-grid .produto-card:hover img,
.category-grid .produto-card:hover img,
.catalogo-grid .produto-card:focus-visible img,
.category-grid .produto-card:focus-visible img {
    filter: none;
    transform: scale(1.035);
}

.catalogo-grid .produto-card h3,
.category-grid .produto-card h3 {
    margin: 0;
    min-height: 44px;
    padding: 16px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #243041;
    transition: color 220ms ease;
}

.catalogo-grid .produto-card h3::before,
.category-grid .produto-card h3::before {
    content: none;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(233, 198, 130, 0) 0%, var(--color-accent) 50%, rgba(233, 198, 130, 0) 100%);
    transform: translateX(-50%) scaleX(0.72);
    opacity: 0.72;
    transition: transform 240ms ease, opacity 240ms ease;
}

.catalogo-grid .produto-card:hover h3,
.category-grid .produto-card:hover h3,
.catalogo-grid .produto-card:focus-visible h3,
.category-grid .produto-card:focus-visible h3 {
    color: #243041;
}

.catalogo-grid .produto-card:hover h3::before,
.category-grid .produto-card:hover h3::before,
.catalogo-grid .produto-card:focus-visible h3::before,
.category-grid .produto-card:focus-visible h3::before {
    opacity: 0.72;
    transform: translateX(-50%) scaleX(0.72);
}

.catalogo-grid::-webkit-scrollbar { display: none; }
.catalogo-grid { -ms-overflow-style: none; scrollbar-width: none; }

.catalogo-grid.active {
    cursor: grabbing;
}

/* --- Página de Categoria (grid 1/2/3 colunas) --- */
.category-page { 
    max-width: min(1180px, 92vw); /* limita a largura e cria margens laterais */
    margin: 0 auto;              /* centraliza o bloco inteiro */
}
.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    overflow: visible;
    align-items: center;
    justify-items: center; /* centraliza os cards dentro de cada célula */
    
}

.category-page h2 { 
    text-align: center; 
    margin: 0 0 20px; 
    font-size: 80px;
    
}

/* Descrição abaixo do título da categoria */
.category-description{
    max-width: 980px;
    margin: 8px auto 36px;
    text-align: center;
    line-height: 1.7;
    color: #4b5563;
    font-size: 2.02rem;
}



@media (min-width: 768px) {
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.category-grid .produto-card {
    flex: none;
    align-items: stretch;
}

/* Seção da Página do Produto */
.product-page {
    background-color: var(--color-bg);
    color: var(--color-text);

    min-height: 100vh;
}

.product-container {
    display: flex;
    flex-direction: row-reverse; /* imagem à direita, texto à esquerda */
    gap: 40px;
    align-items: flex-start;
    max-width: 1200px; /* limita o container geral */
    width: 100%;
    margin: 0 auto; /* centraliza na página */
    padding-top: 90px;
}

/* Coluna da Esquerda: Imagem e Miniaturas */
.product-image-section {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-product-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 80px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.281);
    background-color: var(--color-surface);
}


.product-thumbnails {
    margin-top: 20px;
}

.variation-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.variation-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    object-fit: cover;
}

.variation-thumbnail:hover {
    border-color: #fff;
}

/* Coluna da Direita: Detalhes do Produto */
.product-details-section {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* texto encostado à imagem, alinhado à esquerda */
    text-align: center;
}

.product-name {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 25px;
    justify-content: center;
    text-align: center; /* override do alinhamento global */
    max-width: 680px;
}
.product-subtitle {
    font-size: 1.70rem; /* menor que o título, com destaque */
    font-weight: 600;
    margin: 20px 0 40px 0;
    text-align: left;
    max-width: 680px;
}
.product-details-modern {
    font-size: 1.15em;
    line-height: 1.9; /* texto mais espaçado */
    color: var(--color-text);
    background: none;
    margin-bottom: 40px;
    padding: 0; /* alinhar com os títulos */
    text-align: left;
    max-width: 680px; /* largura confortável do bloco de texto */
}

.product-details-modern span {
    display: block;
    margin-bottom: 8px;
    margin-top: 15px;
}
.product-description-modern {
    font-size: 1.15em;
    color: var(--color-text);
    margin-bottom: 0;
    /* ocupa toda a largura do bloco de detalhes */
    width: 100%;
}

.product-description-modern p {
    margin: 0 0 40px 0; /* espaçamento entre parágrafos */
    color: var(--color-text);
}

.product-meta {
    opacity: 0.85;
    font-size: 0.95rem;
    margin-top: 10px;
    color: var(--color-text);
}
.veja-tambem-section {
    margin-top: 40px;
    padding: 0 5px 40px 5px;
}
.veja-tambem-title {
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: left;
    color: var(--color-accent);
}
.veja-tambem-grid {
    display: grid;
    
    /* Centraliza o bloco do grid na página */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; 
    
    /* Tamanho mínimo menor e colunas que se esticam para eliminar “vãos” entre itens */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); 
    
    /* Itens ocupam toda a largura da coluna (evita espaço extra dentro da célula) */
    justify-items: stretch; 
    
    /* Espaçamento entre os itens (ajustado para um valor padrão) */
    gap: 5px; 
}

.veja-tambem-grid .produto-card {
    background: var(--color-surface);
    border-radius: 10px;
    box-shadow: 0 5px 8px rgba(0,0,0,0.12);
    transition: transform 0.3s;
    text-align: left;
    color: #fff;
    overflow: hidden;
    /* Cards preenchem a coluna para remover espaço lateral adicional */
    width: auto; 
    max-width: 500px; 
}

body.veja-tambem-grid .produto-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.411);
}



.veja-tambem-grid .produto-card img {
    width: 100%;
    /* 3. Aumenta a altura da imagem para preencher melhor o novo card (de 180px para 220px) */
    height: 250px; 
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 8px;
    display: block;
}

.veja-tambem-grid .produto-card h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--color-bg);
    text-align: left;
    padding: 0 10px 10px 10px;
}
.veja-tambem-grid .produto-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.product-category {
    font-size: 1.2rem;
    color: #aaa;
    margin-bottom: 30px;
}

.product-info-collapse {
    border-bottom: 1px solid #333;
    padding: 20px 0;
}

.collapse-toggle {
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos de responsividade */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column;
        align-items: center;
    }

    .product-details-section {
        margin-top: 30px;
    }
    
    .veja-tambem-grid .produto-card {
        width: 250px;
    }

}

@media (max-width: 1028px) {
    .product-container {
        flex-direction: column;
        align-items: center;
    }
}

.produto-card {
    flex: 0 0 auto;
    width: 260px;
    background-color: var(--color-surface);
    border-radius: 10px;
    box-shadow: none;
    padding: 0;
    text-align: left;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.produto-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 8px;
    display: block;
}

.produto-card h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--color-bg);
    text-align: left;
    padding: 0 10px 10px 10px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 1.8em;
    cursor: pointer;
    z-index: 50;
    transition: background-color 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.prev-btn {
    left: -15px;
}

.next-btn {
    right: -15px;
}

/* --- Estilos do Rodapé --- */
.main-footer {
    --footer-watermark-opacity: 0.56;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-bg);
    padding: 80px 0px 0;
    color: var(--color-text);
}

.main-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../../img/optimized/imagens-novas/tramas-footer.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: fill;
    opacity: var(--footer-watermark-opacity);
    pointer-events: none;
}

@media (max-width: 768px) {
    .main-footer::before {
        background-image: url("../../img/optimized/imagens-novas/tramas-footer-mobile.png");
    }
}

.footer-content {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    gap: 20px;

}

.footer-logo {
    flex-grow: 1;
    max-width: 190px;
}

.footer-logo img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: 50px;
}

.footer-links h4 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

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

.footer-links a {
    color: var(--color-text);
    font-size: 0.9em;
    line-height: 1.8;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    position: relative;
    z-index: 1;
    /* background-color: rgba(248, 249, 250, 0); */
    /* -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); */
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-top: 1px solid #222; */
    max-width: 100%;
    margin-top: 0;
}

.footer-bottom p {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.bottom-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bottom-icons a {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    opacity: 0.74;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.bottom-icons a::after {
    content: none !important;
}

.bottom-icons a:hover,
.bottom-icons a:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
    outline: none;
}

.bottom-icons a[aria-label="Facebook"]:hover,
.bottom-icons a[aria-label="Facebook"]:focus-visible {
    background: #1877f2;
}

.bottom-icons a[aria-label="Instagram"]:hover,
.bottom-icons a[aria-label="Instagram"]:focus-visible {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #8134af 100%);
}

.bottom-icons a[aria-label="WhatsApp"]:hover,
.bottom-icons a[aria-label="WhatsApp"]:focus-visible {
    background: #25d366;
}

.bottom-icons .footer-admin-link:hover,
.bottom-icons .footer-admin-link:focus-visible {
    background: var(--color-contrast-surface);
}

.bottom-icons a:hover svg,
.bottom-icons a:focus-visible svg {
    color: #ffffff;
}

.bottom-icons svg {
    width: 22px;
    height: 22px;
    display: block;
    flex: none;
    overflow: visible;
    vector-effect: non-scaling-stroke;
}

.bottom-icons .social-whatsapp,
.bottom-icons .social-whatsapp svg {
    display: block;
    line-height: 1;
}

.bottom-icons .social-whatsapp svg {
    width: 22px;
    height: 22px;
    transform: translateY(0.5px);
}

.bottom-icons .footer-admin-link {
    opacity: 0.86;
}


/* Estilos para o menu lateral em telas menores */
.submenu,
.submenu-aninhado,
.submenu-terceiro-nivel {
    position: relative; /* Volta para a posição normal */
    left: 0;
}

.submenu.active::before,
.submenu-aninhado.active::before,
.submenu-terceiro-nivel.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Posição à esquerda do submenu */
    width: 3px; /* Largura da barra */
    height: 100%; /* Ocupa a altura total do submenu */

    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Esconde o separador por padrão */
.submenu::before,
.submenu-aninhado::before,
.submenu-terceiro-nivel::before {
    content: '';
    opacity: 0;
}

.submenu-aninhado,
.submenu-terceiro-nivel {
    padding-left: 20px;
}

/* --- Seção da Newsletter --- */
.newsletter-section {
    position: relative;
    width: 100%;
    height: 400px; /* Altura da seção */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Esconde o que estiver fora da área visível */
    margin: 0 auto;
}

/* ADICIONADO: Estilos para o consentimento do catálogo/newsletter */
/* .consent-label {
    display: flex;
    align-items: flex-start; Alinha o checkbox com o topo do texto
    gap: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
} */

.consent-label input[type="checkbox"] {
    margin-top: 3px; /* Pequeno ajuste para alinhar visualmente com o texto */
    flex-shrink: 0; /* Impede que o checkbox encolha */
}
/* --- Conteúdo da Newsletter (Por Cima) --- */
.newsletter-content {
    width: 30%;
    overflow: auto;
    display: block;
    position: absolute;
    z-index: 2; /* Fica acima do carrossel */
    text-align: center;
    color: var(--color-text);
    background-color: #31363fad;
 /* Fundo semi-transparente para legibilidade */
    backdrop-filter: blur(5px); /* Efeito de desfoque */
    padding: 40px;
    border-radius: 10px;

}

/* --- Carrossel de Fundo --- */
.newsletter-section .carousel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fica no fundo */
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.newsletter-section .carousel-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.newsletter-section .newsletter-carousel-segment {
    display: flex;
    flex: 0 0 auto;
    height: 100%;
}

.newsletter-section .carousel-track img {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}


.newsletter-content h2,
.newsletter-content p {
    margin-bottom: 10px;
}

.newsletter-content form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.newsletter-content input {
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.8);
}


.newsletter-content button {
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    background-color: var(--color-accent); /* Usando a sua cor de destaque */
    color: var(--color-text);
    font-weight: bold;
    cursor: pointer;
}

/* --- Animação CSS de Carrossel Infinito --- */
/* Para navegadores WebKit (Chrome, Safari, Edge, etc.) */
.sidebar::-webkit-scrollbar,
.submenu::-webkit-scrollbar,
.submenu-aninhado::-webkit-scrollbar,
.submenu-terceiro-nivel::-webkit-scrollbar {
    display: none;
}

/* Para navegadores baseados em IE/Edge */
.sidebar,
.submenu,
.submenu-aninhado,
.submenu-terceiro-nivel {
    -ms-overflow-style: none;
}

/* Para Firefox */
.sidebar,
.submenu,
.submenu-aninhado,
.submenu-terceiro-nivel {
    scrollbar-width: none;
}

/* Blog Page Styles */
.blog-main, .create-main {
    padding-top: 100px;
    padding-bottom: 100px;
}

.page-title {
    font-size: 3rem;
    margin-bottom: 50px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.article-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

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

.article-card img {
    max-width: 100%;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-card-content {
    padding: 20px;
}

.article-card h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
}

.article-card p {
    font-size: 1em;
    color: var(--color-text);
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.create-btn, .submit-btn {
    display: block;
    width: 250px;
    margin: 50px auto 0;
    padding: 15px 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-text);
    background-color: var(--color-accent);
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.create-btn:hover, .submit-btn:hover {
    background-color: #d8b46d;
}

/* Form Styles */
.article-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: var(--color-surface);
    color: #fff;
}

/* Container que envolve todos os artigos */
.artigos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 colunas em telas grandes */
    gap: 30px;
    padding: 40px 0;
    margin: 0 auto;
    max-width: 1200px; /* Limita a largura do container */
}

/* Estilo para cada cartão de artigo */
.blog-post {
    background-color: var(--color-bg); /* Fundo branco ou claro */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-post {
    background-color: var(--color-surface);
}
.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* Imagem de Destaque */
.post-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o espaço */
    transition: transform 0.5s ease;
}

.blog-post:hover .post-thumb img {
    transform: scale(1.05);
}

/* Metadados (Autor e Data) */
.post-meta {
    padding: 15px 20px 0;
    font-size: 0.9em;
    color: var(--color-text-muted);
}

.post-meta span {
    margin-right: 15px;
}

/* Título */
.post-title {
    padding: 10px 20px;
    font-size: 1.3em;
    font-weight: 600;
}

.post-title a {
    color: var(--color-text);
    text-decoration: none;
}

/* Resumo (Excerpt) */
.post-excerpt {
    padding: 0 20px 15px;
    color: var(--color-text-muted);
    flex-grow: 1; /* Garante que o resumo empurre o "Read more" para baixo */
}

/* Link "Read more" */
.read-more {
    display: inline-block;
    padding: 0 20px 20px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: bold;
}

/* Container Principal da Página de Artigo */
.article-detail-page {
    display: absolute;
    padding-top: 120px; /* Espaço para o cabeçalho fixo */
    padding-bottom: 80px;
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    padding: 200px;
    
    
}

/* Título e Metadados do Artigo */
.article-header {
    text-align: center;
    /* height: 10px; */
}

#article-title {
    font-size: 2.5em;
    color: var(--color-text);
    margin-bottom: 10px;
}

#article-meta {
    font-size: 0.9em;
    color: var(--color-text);
}

.article-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* REMOVIDA altura fixa e forçado resize automático */
.article-card img {
    width: 100%;
    height: auto;              /* permite adaptar a altura ao conteúdo */
    max-height: 420px;         /* opcional: evita imagens extremamente altas */
    object-fit: cover;         /* mantém o crop equilibrado quando necessário */
    display: block;
    border-radius: 0;
    transition: transform 0.5s ease, filter 0.4s ease;
}

/* Ajuste para miniaturas de post (lista de artigos) */
.post-thumb {
    width: 100%;
    height: auto;              /* deixa o container adaptar-se à imagem */
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    display: block;
}

.post-thumb img {
    width: 100%;
    height: auto;              /* remove height:100% que forçava distorção */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Container de imagem da página de artigo (detail) */
.article-image-container {
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;          /* garante que a imagem não vaze e remove bordas brancas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.432);
    width: 100%;
    display: block;
    background-color: var(--color-surface);
    
}

#article-image,
.article-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
    border-radius: 8px;
}



/* Conteúdo do Artigo */
.article-content {
    line-height: 1.8;
    color: var(--color-text);
    font-size: 1.05em;

}

.article-content h2 {
    margin-top: 25px;
    font-size: 1.6em;
    color: var(--color-accent);
}

.article-content p {
    margin-bottom: 30px;
}

.article-content strong {
    font-weight: bold;
    color: var(--color-text);
}

/* Estilos de Lista (UL/OL) */
.article-content ul,
.article-content ol {
    margin: 15px 0 15px 20px;
    padding-left: 20px;
}

.article-content li {
    margin-bottom: 8px;
}
/* Trix Editor Custom Styles */
.trix-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    min-height: 400px;
    border: 1px solid #555;
    padding: 15px;
    border-radius: 5px;
}
.trix-toolbar {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #555;
}
.trix-button--icon {
    background-color: var(--color-text) !important;
}

/* --- Estilos da Página Institucional --- */

.institutional-page {
    padding-top: 70px; /* Espaço para o cabeçalho fixo */
    /* padding-bottom: 80px; */
    background-color: var(--color-bg);
    color: var(--color-text);
}


.title-section {
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    text-align: left; /* substitui alinhamento global centralizado */
    max-width: 680px; /* mesma largura do bloco de descrição */
    text-transform: uppercase;
    letter-spacing: 2px;
}

.institucional-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.institutional-page > .institucional-section:first-of-type {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 72px 0 64px;
    background-color: var(--color-contrast-surface);
    color: var(--color-bg);
}

.institutional-page > .institucional-section:first-of-type .title-section,
.institutional-page > .institucional-section:first-of-type .institucional-content,
.institutional-page > .institucional-section:first-of-type .values-block {
    width: min(1120px, 92vw);
    margin-left: auto;
    margin-right: auto;
}

.institutional-page > .institucional-section:first-of-type .title-section {
    color: var(--color-bg);
}

.institutional-page > .institucional-section:first-of-type .text-block {
    color: rgba(248, 248, 255, 0.92);
}

.institutional-page > .institucional-section:first-of-type .image-block img {
    border-radius: 0;
}

@media (max-width: 768px) {
    .institutional-page > .institucional-section:first-of-type {
        padding: 56px 0 52px;
    }

    .institutional-page > .institucional-section:first-of-type .title-section,
    .institutional-page > .institucional-section:first-of-type .institucional-content,
    .institutional-page > .institucional-section:first-of-type .values-block {
        width: min(100% - 48px, 620px);
    }

    .institutional-page > .institucional-section:first-of-type .title-section {
        font-size: 2rem;
        line-height: 1.15;
    }

    .institutional-page > .institucional-section:first-of-type .text-block {
        font-size: 1rem;
        line-height: 1.75;
    }
}

.institutional-page {
    background-color: var(--color-surface);
}

.institucional-content {
    display: flex;
    align-items: center;
    gap: 40px;
    /* Empilha por padrão (mobile-first). Em telas maiores vira duas colunas */
    flex-direction: column;
    width: 100%;
}

.institucional-content.institucional-reverse {
    flex-direction: column-reverse;
}

/* Em telas médias/grandes exibimos conteúdo em duas colunas (texto + imagem lado a lado) */
@media (min-width: 992px) {
    .institucional-content {
        flex-direction: row;
        align-items: center; /* alinha verticalmente ao centro */
        gap: 48px;
    }

    .institucional-content.institucional-reverse {
        flex-direction: row-reverse;
    }

    .text-block,
    .image-block {
        /* Cada coluna ocupa metade do espaço, respeitando espaçamentos */
        flex: 0 0 50%;
        max-width: 50%;
    }

    .text-block {
        text-align: left; /* alinhamento típico para leitura em colunas */
        padding: 0 10px;
    }

    .image-block {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
    }

    .image-block img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 12px; /* leve arredondamento */
        /* box-shadow: 0 6px 18px rgba(0,0,0,0.35); */
    }
}

.text-block {
    flex: 1;
    font-size: 1.1em;
    line-height: 1.8;
}

.image-block {
    flex: 1;
}

.image-block img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
}

.values-block {
    text-align: center;
    margin-top: 50px;
}

.values-block h3 {
    font-size: 1.5em;
    font-weight: 500;
    font-style: italic;
    color: #fff;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== Galeria de 4 imagens abaixo dos ícones ===== */
.gallery-section {
    padding: 40px auto;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}
.gallery-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.gallery-item {
    flex: 1 1 calc((100% - 3*24px) / 4);
    max-width: calc((1600px - 3*24px) / 4);
    min-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    transition: opacity 780ms ease, transform 780ms cubic-bezier(.22,.61,.36,1);
}

.gallery-section.is-visible .gallery-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gallery-section.is-visible .gallery-item:nth-child(1) { transition-delay: 0ms; }
.gallery-section.is-visible .gallery-item:nth-child(2) { transition-delay: 120ms; }
.gallery-section.is-visible .gallery-item:nth-child(3) { transition-delay: 240ms; }
.gallery-section.is-visible .gallery-item:nth-child(4) { transition-delay: 360ms; }

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    display: block;
}

/* Responsividade: empilha em telas pequenas */
@media (max-width: 900px) {
    .gallery-item {
        flex: 1 1 45%;
        max-width: 45%;
    }
}
@media (max-width: 480px) {
    .gallery-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ===== Seção institucional empilhada (texto acima, imagem abaixo, destaque maior) ===== */
.institucional-stacked {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
    width: 100%;
}
.stacked-text {
    max-width: 900px;
    font-size: 1.05em;
    line-height: 1.8;
    color: inherit;
    padding: 0 10px;
}
.stacked-image {
    width: 100%;
    display: flex;
    justify-content: center;
}
.stacked-image img {
    width: 100%;
    /* max-width: 820px; destaque maior */
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    display: block;
}

/* Pequenas adaptações em mobile para manter legibilidade */
@media (max-width: 768px) {
    .stacked-image img {
        height: auto;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }
    .stacked-text { padding: 0 20px; }
}

.diferenciais-section {
    background-color: var(--);
    padding: 80px 20px;
    text-align: center;
}

.diferenciais-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.diferencial-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 200px;
}

.diferencial-item img {
    max-width: 100%;
    width: 80px;
    height: 80px;
    transition: opacity 320ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
}

.diferencial-item h4,
.diferencial-item p {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(.22,.61,.36,1);
}

.diferenciais-section.diferenciais-ready .diferencial-item img {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
}

.diferenciais-section.diferenciais-ready .diferencial-item.is-image-visible img {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.diferenciais-section.diferenciais-ready .diferencial-item.is-title-visible h4 {
    opacity: 1;
    transform: translateY(0);
}

.diferenciais-section.diferenciais-ready .diferencial-item.is-text-visible p {
    opacity: 1;
    transform: translateY(0);
}

.diferencial-item h4 {
    font-size: 1.5em;
    font-weight: bold;
}

.diferencial-item p {
    font-size: 1em;
    color: #aaa;
}

@media (prefers-reduced-motion: reduce) {
    .diferencial-item img,
    .diferencial-item h4,
    .diferencial-item p {
        transition: none;
    }
}

/* --- Estilos para a funcionalidade de pesquisa --- */
/* Ajusta o posicionamento do search-container */
.search-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Esconde o search-box por padrão (abre lateralmente à direita do botão) */
.search-box {
    position: absolute;
    left: 100%; /* abre à direita do ícone */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    width: 0; /* Largura inicial (fechada) */
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    transition: width 320ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease, visibility 240ms ease, transform 240ms ease;
    background-color: var(--color-surface);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    overflow: visible !important;
    z-index: 1600;
    white-space: nowrap;
}

/* Estiliza o campo de input */
.search-box input {
    /* Use padding e height para simular a altura do search-box */
    height: 40px; 
    width: calc(100% - 40px);
    border: none;
    background: none;
    padding: 0 10px;
    font-size: 16px;
    color: var(--color-text);
    outline: none;
}

.search-box input {
    color: var(--color-text);
}

/* Estiliza o botão de pesquisa */
.search-box .search-btn {
    width: 30px;
    height: 100%;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}

.search-box .search-btn:hover {
    color: var(--color-accent);
}

/* Estilos para a lista de resultados da pesquisa */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* acompanha a largura da search-box */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    z-index: 1200; /* acima do header */
    /* fallback padrão para dropdown de pesquisa */
    max-height: 420px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.search-result-item.keyboard-selected,
.search-result-item.keyboard-selected:hover {
    background-color: rgba(255, 255, 255, 0.493);
    outline: 2px solid rgba(255,255,255,0.06);
    outline-offset: -6px;
}

.search-result-item.keyboard-selected {
    background-color: rgba(255, 255, 255, 0.493);
    outline: 2px solid rgba(255,255,255,0.06);
}

.search-results-dropdown,
.search-box {
    background-color: var(--color-surface-strong);
}

/* itens do resultado */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
}
.search-result-item:hover {
    background: rgba(255,255,255,0.03);
}
.search-result-item img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.search-result-item span {
    display: block;
    line-height: 1.1;
    font-size: 0.95rem;
}
.search-result-item small {
    display: block;
    font-size: 0.80rem;
    color: rgba(255,255,255,0.66);
}

/* mensagem "nenhum resultado" */
.no-results-msg {
    padding: 12px;
    color: rgba(255,255,255,0.7);
}

/* se você usa classe has-results para controlar visibilidade, garanta que seja exibido */
.search-box:not(.has-results) .search-results-dropdown {
    /* esconda quando não houver resultados (opcional) */
    display: none;
}

.search-results-dropdown a span small{
    color: var(--color-text);
}
/* Estado de hover */
.search-results-dropdown a:hover {
    background-color: var(--color-surface-soft);
}

.search-results-dropdown a:last-child {
    border-bottom: none;
}

/* Estado de "aberto" do search-box */
.search-box.is-active {
    width: var(--searchbox-width, 360px); /* largura quando aberta no desktop */
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Regra para exibir os resultados */
.search-box.has-results .search-results-dropdown {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 992px) {
    .highlights-grid {
        grid-template-areas:
            "top-left"
            "top-right"
            "bottom-left"
            "bottom-right"
            "center";
            grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 30px;
        max-width: 680px;
    }

    .highlight-item {
        height: auto !important;
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    /* Ajusta o tamanho da fonte do título */
    .product-highlights h2 {
        font-size: 2em;
    }

    /* animações reduzidas para telas médias (<= 992px) */
    .highlight-item {
        transition: transform 0.38s ease, box-shadow 0.38s ease;
    }
    .highlight-item:hover, .highlight-item:active {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 8px 22px rgba(0,0,0,0.32);
    }
    .highlight-item:hover img, .highlight-item:active img {
        transform: scale(1.03) translateY(-2px);
    }

    .cta-button:hover, .cta-button:active {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.28);
    }

    a::after { transition: width 180ms ease; }
    /* garante que os itens com stagger ainda apareçam suavemente */
    .staggered { transition-duration: 420ms; }


}

@media (max-width: 768px) {
    /* Ajusta o espaçamento do cabeçalho em telas menores */
    .top-header {
        padding: 15px 20px;
    }

    .top-header.search-open .header-right {
        transform: none !important;
    }

    /* removido seletor inválido que quebrava o CSS no mobile */
    
    /* Reduz o espaçamento entre os ícones */
    .header-left, .header-right {
        gap: 15px;
    }

    .catalogo-section h2 {
        font-size: 2em;
    }

    .catalogo-subtitle {
        max-width: 32rem;
        margin-bottom: 36px;
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .catalogo-wrapper {
        padding: 0 10px;
    }
    
    /* Opcional: Esconde os botões de navegação em telas pequenas */
    .carousel-btn {
        display: none;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-logo {
        margin-bottom: 20px;
    }

    .footer-links {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .search-box {
        left: auto;
        right: 0; /* em telas pequenas abre abaixo/direita do ícone como antes */
        top: 100%;
        transform: none;
        margin-left: 0;
    }
    .search-box.is-active {
        width: min(60vw, 340px); /* Ocupa largura adequada no mobile */
        opacity: 1;
        visibility: visible;
    }

    /* Dropdown de resultados no mobile */
    .search-results-dropdown {
        right: 0px;
        left: auto;
        /* largura correta no mobile (antes havia uma var() inválida que resultava em 0px) */
        width: min(60vw, 340px);
        max-height: 56vh;
    }
    .search-results-dropdown a { padding: 12px 14px; }
    .search-results-dropdown a img { width: 36px; height: 36px; }

    :root {
        --sidebar-width: 280px;
    }

    .sidebar.active {
        height: 100%;
        width: 40%;
    }
    .newsletter-content {
        position: absolute; /* AQUI: Mude para absoluto */
        bottom: 0; /* AQUI: Posiciona no fundo */
        /* left: 50%; AQUI: Centraliza horizontalmente */
        transform: translateX(-50%); /* AQUI: Corrige o alinhamento central */
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 0;
    }

    .highlight-item {
        /* Garante que o item ocupe a largura total */

        
        /* Muda o display para Flexbox para empilhar o conteúdo */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .highlight-item img {
        /* A imagem pode ocupar 100% da largura do item */
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .highlight-item span {
        position: absolute;
        bottom: 18px;
        left: 50%;
        width: auto;
        max-width: calc(100% - 32px);
        transform: translateX(-50%);

        /* Estilos do span */
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6); 
        padding: 10px 18px;
        border-radius: 8px;
        white-space: normal;
        line-height: 1.08;
    }


    /* .video-hero-section {
        height: 30vh;
    }

    #institutionalVideo {
        display: block; Garante que o vídeo seja exibido
        position: absolute; Mantenha isso para o posicionamento
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; Faz com que o vídeo preencha o contêiner, cortando o que não cabe
    } */

    .faq-section h1 {
        font-size:xx-large;
    }

    .privacy-section h1 {
        font-size: 40px;
    }
    .article-detail-page {
        padding: 100px 20px 60px; /* Ajusta o padding para telas menores */
    }
    section.article-image-container,
    .article-image-container {
        min-height: 0;
        padding: 40px 20px; /* Adiciona um respiro vertical, ajuste se necessário */
        /* FIM DA ADIÇÃO */
        flex-direction: column;
        align-items: center;
        
    }
    .article-image-container img,
    #article-image {
        display: block;
        border-radius: 8px;
        object-fit: fill;
        height: auto;
    }

    /* Ajustes para página de categoria no mobile */
    /* Categoria - mobile: 1 coluna, cards centralizados e responsivos */
    .category-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 18px;
        justify-items: center;
    }
    .category-grid .produto-card {
        width: min(100%, 360px); /* ocupa toda a largura, com limite confortável */
    }
    .category-grid .produto-card img { height: auto; }
    /* Títulos da categoria: ajustados por media queries abaixo */
    .category-page h2 {
        margin-bottom: 8px;
        text-align: center;
        font-size: 1.6rem; /* fallback para telas muito pequenas */
        padding-bottom: 12px;
    }
    .category-description { font-size: 1rem; margin: 6px auto 18px; padding: 0 6px; }

    /* Veja também: cards devem ocupar toda a coluna no mobile */
    .veja-tambem-grid .produto-card {
        width: 100%;
    }
    .veja-tambem-grid {
        grid-template-columns: 1fr;
    }

}

/* Regras para telas pequenas (<= 768px) - animações muito sutis e sem tilt/parallax */
@media (max-width: 768px) {
    .newsletter-section {
        height: 260px;
    }

    .highlight-item:hover, .highlight-item:active {
        transform: translateY(-2px) scale(1.005);
        box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }
    .highlight-item img { transition: transform 0.4s ease; }
    .highlight-item:active img { transform: scale(1.02); }

    /* underline mais discreto no mobile */
    a::after { bottom: -2px; height: 1.6px; transition: width 160ms ease; }

    /* desativa tilt/parallax no mobile por desempenho/UX */
    .produto-card[style], .article-card[style] { transform: none !important; }
    
    /* Layout lateral fixo para mobile (substitui usos de clamp) */
    /* .main-content {
        padding-left: 16px;
        padding-right: 16px;
    } */
    .highlight-grid {
        padding: 80px 16px;
    }
    .category-page {
        padding: 24px 12px;
    }
    .product-page {
        padding: 80px 16px;
    }
    .footer-content {
        padding: 80px 16px;
    }

}

/* ===== Media queries para tablets e notebooks (substituem clamp()) ===== */
/* Tablets: entre 769px e 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .newsletter-section {
        height: 320px;
    }
/* 
    .main-content {
        padding-left: 32px;
        padding-right: 32px;
    } */
    .highlight-grid {
        padding: 80px 32px;
    }
    .category-page {
        padding: 32px 24px;
    }
    .product-page {
        padding: 80px 32px;
    }
    .footer-content {
        padding: 80px 32px;
    }
    .category-page h2 {
        font-size: 2.2rem;
    }
    .search-results-dropdown {
        max-height: 48vh;
    }
    .newsletter-content {
    position: absolute; /* AQUI: Mude para absoluto */
    bottom: 0; /* AQUI: Posiciona no fundo */
    left: 50%; /* AQUI: Centraliza horizontalmente */
    transform: translateX(-50%); /* AQUI: Corrige o alinhamento central */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0;
    }

}

/* Notebooks / small desktops: entre 1025px e 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
    /* .main-content {
        padding-left: 48px;
        padding-right: 48px;
    } */
    .highlight-grid {
        padding: 100px 48px;
    }
    .category-page {
        padding: 40px 32px;
    }
    .product-page {
        padding: 100px 48px;
    }
    .footer-content {
        padding: 100px 48px;
    }
    .category-page h2 {
        font-size: 40px;
    }
    .search-results-dropdown {
        max-height: 420px;
    }
}


/* --- Estilos para Conteúdos Internos (FAQ, Política, etc.) --- */

.main-content {
    padding-top: 90px; /* Espaço para o cabeçalho fixo */
    padding-bottom: 80px;
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
}

.main-content .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Seção de FAQ --- */
.faq-section {
    margin-top: 70px ;
    background-color: var(--color-bg);
}
.faq-section .page-title,
.faq-section h3{
    color: var(--color-text)
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 100px;
}
@media (max-width: 768px) {
    .faq-list {
        padding: 40px 20px;
    }
}

.faq-item {
    background-color: var(--color-surface);
    padding: 25px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.faq-item h3 {
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: 10px;
}

.faq-item p {
    line-height: 1.6;
}

/* --- Seções de Política e Termos --- */
.privacy-section,
.terms-section,
.contact-section {
    padding: 40px 0;
}

.privacy-section h2,
.terms-section h2,
.contact-section h2 {
    font-size: 2rem;
    color: var(--color-text);
    margin-top: 30px;
    margin-bottom: 15px;
}

.privacy-section p,
.terms-section p {
    line-height: 1.7;
    margin-bottom: 20px;

}


.privacy-section ul {
    margin-left: 25px;
    margin-bottom: 20px;
}

.privacy-section li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* --- Seção de Contato --- */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
    align-items: center;
}

.contact-item h4, 
.contact-item p {
    font-size: 1.4rem;
    color: var(--color-text);
    margin-bottom: 5px;
}

.contact-form-container {
    background-color: var(--color-surface);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
    border-radius: 4px;

}

.contact-form textarea {
    resize: vertical;
}

.cta-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--color-accent-hover);
}


/* micro interactions on hover for highlight items */
.highlight-item:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 14px 38px rgba(0,0,0,0.55);
}
.highlight-item:hover img {
    transform: scale(1.09) translateY(-6px);
}

/* subtle button pulse for call to actions */
.cta-button {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.42);
}

/* Newsletter: make carousel images respond gracefully and stronger */
.newsletter-section .carousel-track img {
    transition: none;
    will-change: auto;
    object-fit: contain;
    object-position: center;
}

.newsletter-content button, #catalog-submit {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.newsletter-content button:hover, #catalog-submit:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    background-color: #d8b46d; /* tom mais forte do destaque no hover */
}

/* small animated underline for links */
a {
    position: relative;
}
a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 0;
    background: var(--color-accent);
    transition: width 220ms cubic-bezier(.2,.9,.2,1);
}
a:hover::after {
    width: 100%;
}

/* ===== Floating WhatsApp FAB (bottom-right) ===== */
.whatsapp-fab {
    position: fixed;
    right: 24px;
    bottom: 60px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms ease;
}
.whatsapp-fab a {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #2fda72 0%, #1fa855 100%);
    color: #ffffff;
}

.whatsapp-fab i,
.whatsapp-fab svg {
    width: 2rem;
    height: 2rem;
    display: block;
    font-size: 2rem;
    line-height: 1;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-within {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.25);
}
.whatsapp-fab:active {
    transform: translateY(-2px) scale(0.98);
}

/* Shadow variant */
.whatsapp-fab {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.92);
}

.whatsapp-fab::after,
.whatsapp-fab a::after {
    display: none !important;
    width: 0 !important;
    content: none !important;
}

body.admin-active .whatsapp-fab,
body:has(.admin-page) .whatsapp-fab {
    display: none;
}

/* Smaller on very small screens */
@media (max-width: 480px) {
    .whatsapp-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
    .whatsapp-fab i,
    .whatsapp-fab svg {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 1.7rem;
    }
}


a,
.top-header .icon-btn {
    color: var(--color-text);
}

.top-header.scrolled {
    background-color: rgba(248, 249, 250, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.sidebar,
.submenu,
.submenu-aninhado,
.submenu-terceiro-nivel,
.search-box,
.search-results-dropdown,
.contact-form-container,
.trix-content,
.highlight-item,
.produto-card,
.article-card,
.faq-item,
.veja-tambem-grid .produto-card,
.blog-post {
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.sidebar-nav li {
    border-bottom-color: var(--color-border);
}

.product-highlights,
.product-page,
.institutional-page,
.blog-main,
.create-main,
.diferenciais-section,
.main-footer,
.newsletter-section,
.faq-section,
.contact-section,
.main-content {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.catalogo-section {
    background-color: var(--color-contrast-surface);
    color: var(--color-bg);
}

.product-highlights h2,
.page-title,
.title-section,
.faq-section .page-title,
.contact-section h2,
.create-main .page-title,
.main-content h1,
.main-content h2,
.faq-section h3 {
    color: var(--color-text);
}

.catalogo-section h2 {
    color: var(--color-bg);
}

.highlight-item span,
.newsletter-content,
.product-highlights span {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.category-description,
.diferencial-item p,
.product-category,
.post-meta,
.post-excerpt,
.search-result-item small,
.no-results-msg,
.search-results-dropdown a span small {
    color: var(--color-text-muted);
}

#main-product-image {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    background-color: #ffffff;
}

.variation-thumbnail:hover {
    border-color: var(--color-accent);
}

.product-details-modern,
.product-description-modern,
.product-description-modern p,
.product-meta,
.article-card p,
.values-block h3,

.faq-item h3,
.contact-item h4,
.contact-item p {
    color: var(--color-text);
}
.institutional-page p,
.institutional-page h3{
    color: var(--bg-color)
}
.produto-card,
.veja-tambem-grid .produto-card,
.veja-tambem-grid .produto-card h3,
.produto-card h3 {
    color: var(--color-text);
}

.footer-links a,
.footer-bottom p {
    color: var(--color-text);
}

/* .footer-bottom {
    background-color: rgba(238, 242, 247, 0.82);
    border-top: 1px solid var(--color-border);
} */

.main-footer {
    border-top: 1px solid #e5e9f1;
}

.newsletter-content a,
.read-more {
    color: var(--color-accent);
    text-decoration: underline;
}

.form-group input[type="text"],
.newsletter-content input,
.contact-form input,
.contact-form textarea,
.form-group input,
.contact-form input,
.contact-form textarea {
    background-color: #ffffff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.search-box input {
    color: var(--color-text);
}

.search-result-item:hover,
.search-results-dropdown a:hover {
    background-color: var(--color-surface-soft);
}

.search-result-item.keyboard-selected,
.search-result-item.keyboard-selected:hover {
    background-color: #e7edf6;
    outline: 2px solid rgba(36, 48, 65, 0.08);
}

.trix-toolbar {
    background-color: var(--color-surface-soft) !important;
    border-bottom: 1px solid var(--color-border);
}

.trix-button--icon {
    background-color: #ffffff !important;
}

.create-btn,
.submit-btn,
.newsletter-content button,
.cta-button {
    color: var(--color-on-accent);
}

.carousel-btn {
    background-color: rgba(255, 255, 255, 0.96);
    color: var(--color-text);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.carousel-btn:hover {
    background-color: #ffffff;
}

.whatsapp-fab {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* --- Sidebar Refinada --- */
.sidebar {
    background: linear-gradient(180deg, #fbfcfe 0%, #f2f5f9 100%);
    border-right: 1px solid rgba(36, 48, 65, 0.08);
    box-shadow: 18px 0 42px rgba(15, 23, 42, 0.14);
    padding: 26px 18px 36px;
}

.sidebar-header {
    margin-bottom: 26px;
    padding: 2px 2px 12px;
    margin: 50px 0 100px 0;
}

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    max-width: 148px;
}

.sidebar-brand img {
    display: block;
    width: 100%;
    height: 40px;
    /* margin: 50px 0 200px 0; */
}

.close-sidebar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f3553;
    font-size: 2rem;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.close-sidebar:hover {
    background-color: rgba(233, 198, 130, 0.24);
    color: #1f3553;
    transform: scale(1.04);
}

.sidebar-nav,
.sidebar-nav ul,
.submenu,
.submenu-aninhado,
.submenu-terceiro-nivel {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-nav li {
    border-bottom: none;
}

.sidebar-nav > ul > li > .sidebar-link {
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    /* color: #223754; */
    font-size: 1.08rem;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.sidebar-nav > ul > li > .sidebar-link:hover {
    background-color: rgba(46, 59, 78, 0.08);
    color: #1a2c45;
    box-shadow: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-link-icon {
    width: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.9;
}

.sidebar-link-text {
    flex: 1 1 auto;
}

.sidebar-link-chevron {
    margin-left: auto;
    font-size: 0.95rem;
    color: #52657f;
}

.has-submenu > .sidebar-link {
    background-color: transparent;
}

.submenu {
    margin-top: 8px;
    padding: 8px 0 0 30px;
    border-radius: 18px;
    background-color: transparent;
    box-shadow: none;
}

.submenu.active,
.submenu-aninhado.active,
.submenu-terceiro-nivel.active {
    max-height: 680px;
}

.submenu li + li {
    margin-top: 4px;
}

.submenu .sidebar-link {
    margin-left: 0;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.94rem;
    font-weight: 500;
    color: #31445e;
    background-color: transparent;
    transition: background-color 180ms ease, color 180ms ease;
}

.submenu .sidebar-link:hover {
    background-color: rgba(46, 59, 78, 0.08);
    color: #1f3553;
}

.sidebar-link.is-current {
    background-color: var(--color-contrast-surface);
    color: #f8f8ff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.sidebar-link.is-current:hover,
.sidebar-link.is-current:focus-visible,
.sidebar-link.is-current:active {
    background: linear-gradient(135deg, #42526a 0%, #34465f 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22);
    outline: 1px solid rgba(233, 198, 130, 0.34);
    outline-offset: 0;
}

.sidebar-link.is-current .sidebar-link-icon,
.sidebar-link.is-current .sidebar-link-chevron {
    color: #f8f8ff;
}

.sidebar-link.is-current:hover .sidebar-link-icon,
.sidebar-link.is-current:hover .sidebar-link-chevron,
.sidebar-link.is-current:focus-visible .sidebar-link-icon,
.sidebar-link.is-current:focus-visible .sidebar-link-chevron,
.sidebar-link.is-current:active .sidebar-link-icon,
.sidebar-link.is-current:active .sidebar-link-chevron {
    color: #ffffff;
}

.submenu .sidebar-link.is-current {
    background-color: rgba(46, 59, 78, 0.16);
    color: var(--color-contrast-surface);
    box-shadow: none;
    font-weight: 700;
}

.submenu .sidebar-link.is-current:hover,
.submenu .sidebar-link.is-current:focus-visible,
.submenu .sidebar-link.is-current:active {
    background-color: rgba(46, 59, 78, 0.24);
    color: var(--color-contrast-surface);
    transform: translateX(2px);
    box-shadow: inset 2px 0 0 rgba(233, 198, 130, 0.55);
}

.submenu.active::before,
.submenu-aninhado.active::before,
.submenu-terceiro-nivel.active::before,
.submenu::before,
.submenu-aninhado::before,
.submenu-terceiro-nivel::before {
    content: none;
}

@media (max-width: 768px) {
    .sidebar.active {
        width: min(84vw, 340px);
    }

    .sidebar-brand {
        max-width: 136px;
    }
}

/* --- Categoria: layout com hero, breadcrumb e ordenacao --- */
.category-page {
    width: 100%;
    max-width: none;
    margin: -20px 0 0;
    padding: 0 0 32px;
    overflow-x: clip;
}

.category-hero {
    position: relative;
    min-height: clamp(320px, 25vw, 430px);
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background:
        linear-gradient(90deg, rgba(29, 24, 21, 0.30) 0%, rgba(127, 88, 58, 0.10) 50%, rgba(29, 24, 21, 0.26) 100%),
        url("../../img/optimized/categoria-banner.png") center 44% / cover no-repeat;
    overflow: hidden;
    
}


.category-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(19, 24, 33, 0.12) 100%);
}

.category-hero-overlay {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}

.category-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 4.75rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}

.category-shell {
    width: min(1180px, 92vw);
    max-width: 100%;
    margin: 24px auto 0;
    min-width: 0;
}

.category-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--color-text-muted);
    font-size: 0.98rem;
    text-align: center;
}

.category-breadcrumb a,
.category-breadcrumb span {
    color: inherit;
}

.category-breadcrumb a:hover {
    color: var(--color-text);
}

.category-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
}

.category-results {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.category-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.category-count {
    margin: 0;
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.category-sort {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-muted);
    font-size: 0.96rem;
    position: relative;
    min-width: 0;
}

.category-sort > span {
    white-space: nowrap;
    font-weight: 500;
}

.category-sort-dropdown {
    position: relative;
    min-width: 210px;
    max-width: 100%;
}

.category-sort-trigger {
    display: block;
    list-style: none;
    min-width: 210px;
    width: 100%;
    padding: 8px 34px 8px 2px;
    border: none;
    background-color: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    outline: none;
    position: relative;
    transition: color 180ms ease;
    min-width: 0;
}

.category-sort-trigger::-webkit-details-marker {
    display: none;
}

.category-sort-trigger::marker {
    content: "";
}

.category-sort-trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease, color 180ms ease;
}

.category-sort-dropdown[open] .category-sort-trigger::after {
    transform: translateY(-35%) rotate(-135deg);
}

.category-sort-native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.category-sort-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 4px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.category-sort-dropdown[open] .category-sort-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.category-sort-option {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.category-sort-option:hover,
.category-sort-option:focus-visible {
    background-color: rgba(36, 48, 65, 0.08);
    color: var(--color-text);
    transform: translateX(2px);
    outline: none;
}

.category-sort-option.is-selected {
    background: linear-gradient(135deg, rgba(233, 198, 130, 0.22) 0%, rgba(233, 198, 130, 0.12) 100%);
    color: var(--color-text);
    font-weight: 600;
}

.category-sort-option.is-selected::after {
    content: "•";
    float: right;
    color: rgba(36, 48, 65, 0.52);
}

.category-sort:hover .category-sort-trigger,
.category-sort:focus-within .category-sort-trigger,
.category-sort-dropdown[open] .category-sort-trigger {
    color: var(--color-text);
}

.category-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 36px;
    align-items: start;
    justify-items: center;
    padding: 0;
    min-width: 0;
}

.category-grid .produto-card {
    width: 100%;
    max-width: 360px;
    flex: none;
    align-items: stretch;
    min-width: 0;
}

.category-grid .produto-card img {
    height: 248px;
}

.category-grid .no-results {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text-muted);
}

.category-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.category-show-more {
    min-width: 188px;
    padding: 14px 28px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.category-show-more:hover,
.category-show-more:focus-visible {
    border-color: rgba(233, 198, 130, 0.46);
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    outline: none;
}

@media (max-width: 768px) {
    .category-page {
        margin-top: -20px;
        padding-bottom: 20px;
    }

    .category-hero {
        min-height: 210px;
        background:
            linear-gradient(90deg, rgba(29, 24, 21, 0.30) 0%, rgba(127, 88, 58, 0.10) 50%, rgba(29, 24, 21, 0.26) 100%),
            url("../../img/optimized/categoria-banner-mobile.png") center 38% / cover no-repeat;
    }

    .category-hero-overlay {
        padding: 40px 18px;
    }

    .category-hero h1 {
        font-size: 2rem;
        letter-spacing: 0.18em;
    }

    .category-shell {
        width: min(100% - 40px, 680px);
        max-width: 680px;
        margin-top: 18px;
    }

    .category-breadcrumb {
        margin-bottom: 20px;
        font-size: 0.92rem;
    }

    .category-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 18px;
    }

    .category-sort {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .category-sort-dropdown,
    .category-sort-trigger,
    .category-sort-menu {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .category-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 0;
    }

    .category-grid .produto-card {
        width: 100%;
        max-width: 360px;
        padding: 0 0 16px;
    }

    .category-grid .produto-card img {
        width: 100%;
        margin-bottom: 12px;
        border-radius: 0;
    }

    .category-grid .produto-card h3 {
        padding: 0 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .category-hero {
        min-height: 300px;
    }

    .category-hero h1 {
        font-size: 3rem;
        letter-spacing: 0.24em;
    }

    .category-grid {
        width: 100%;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-grid .produto-card {
        max-width: none;
        padding: 0 0 16px;
    }

    .category-grid .produto-card img {
        width: 100%;
        margin-bottom: 12px;
        border-radius: 0;
    }

    .category-grid .produto-card h3 {
        padding: 0 14px;
    }

    .category-toolbar {
        width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 1025px) {
    .category-grid {
        width: 100%;
        margin: 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .category-toolbar {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    body.sidebar-open main,
    body.sidebar-open .main-content,
    body.sidebar-open #footer-placeholder,
    body.sidebar-open #footer-placeholder .whatsapp-fab,
    body.sidebar-open #catalogo-placeholder,
    body.sidebar-open .article-detail-page,
    body.sidebar-open .blog-main {
        margin-left: 0;
    }

    body.sidebar-open .top-header .main-header {
        transform: none;
    }
}

/* --- FAQ Refresh --- */
.faq-main {
    background:
        radial-gradient(circle at top center, rgba(233, 198, 130, 0.10) 0%, rgba(233, 198, 130, 0) 34%),
        linear-gradient(180deg, #f8f8ff 0%, #f3f6fb 100%);
}

.faq-section {
    margin-top: 24px;
    padding-bottom: 24px;
}

.faq-section .container {
    max-width: 1120px;
}

.faq-section .page-title {
    margin-bottom: 14px;
    font-size: clamp(2.2rem, 4.6vw, 4.1rem);
    letter-spacing: 0.08em;
}

.faq-intro {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.faq-list {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    gap: 24px;
}

.faq-item {
    position: relative;
    padding: 30px 34px 28px;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 253, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.faq-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--color-accent) 0%, rgba(233, 198, 130, 0.3) 100%);
}

.faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

.faq-item h3 {
    margin: 0 0 14px;
    padding-right: 24px;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.faq-item p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.03rem;
    line-height: 1.8;
    max-width: 92ch;
}

@media (max-width: 768px) {
    .faq-section {
        margin-top: 0;
    }

    .faq-section .page-title {
        margin-bottom: 10px;
        font-size: 2rem;
        letter-spacing: 0.05em;
    }

    .faq-intro {
        margin-bottom: 28px;
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .faq-list {
        gap: 18px;
    }

    .faq-item {
        padding: 22px 22px 20px 24px;
        border-radius: 20px;
    }

    .faq-item h3 {
        padding-right: 0;
        font-size: 1.2rem;
    }

    .faq-item p {
        font-size: 0.98rem;
        line-height: 1.72;
    }
}

/* --- Legal Refresh --- */
.legal-main {
    background:
        radial-gradient(circle at top center, rgba(233, 198, 130, 0.12) 0%, rgba(233, 198, 130, 0) 36%),
        linear-gradient(180deg, #f8f8ff 0%, #f3f6fb 100%);
}

.legal-section {
    margin-top: 20px;
    padding-bottom: 24px;
}

.legal-section .container {
    max-width: 1160px;
}

.legal-hero {
    max-width: 860px;
    margin: 0 auto 42px;
    text-align: center;
}

.legal-eyebrow {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(233, 198, 130, 0.18);
    color: #8b6b2f;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.legal-hero .page-title {
    margin-bottom: 16px;
    font-size: clamp(2.3rem, 4.8vw, 4.3rem);
    letter-spacing: 0.08em;
}

.legal-intro {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.85;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr);
    gap: 28px;
    align-items: start;
}

.legal-summary,
.legal-card {
    position: relative;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 253, 0.98) 100%);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.legal-summary {
    position: sticky;
    top: 136px;
    padding: 30px 28px;
}

.legal-summary::before,
.legal-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--color-accent) 0%, rgba(233, 198, 130, 0.28) 100%);
}

.legal-summary h2,
.legal-card h2 {
    margin: 0 0 14px;
    text-align: left;
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.legal-summary p,
.legal-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.82;
}

.legal-highlight-list,
.legal-list {
    display: grid;
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.legal-highlight-list li,
.legal-list li {
    position: relative;
    padding-left: 26px;
    color: var(--color-text);
    line-height: 1.72;
}

.legal-highlight-list li::before,
.legal-list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    box-shadow: 0 0 0 5px rgba(233, 198, 130, 0.16);
    transform: translateY(-50%);
}

.legal-document {
    display: grid;
    gap: 22px;
}

.legal-card {
    padding: 30px 32px;
}

.legal-card-accent {
    background:
        linear-gradient(135deg, rgba(233, 198, 130, 0.18) 0%, rgba(255, 255, 255, 0.98) 38%, rgba(247, 249, 253, 0.98) 100%);
}

@media (max-width: 980px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .legal-section {
        margin-top: 0;
    }

    .legal-hero {
        margin-bottom: 30px;
    }

    .legal-hero .page-title {
        margin-bottom: 12px;
        font-size: 2rem;
        letter-spacing: 0.05em;
    }

    .legal-intro {
        font-size: 0.98rem;
        line-height: 1.74;
    }

    .legal-summary,
    .legal-card {
        border-radius: 22px;
    }

    .legal-summary,
    .legal-card {
        padding: 24px 20px;
    }

    .legal-summary h2,
    .legal-card h2 {
        font-size: 1.45rem;
    }

    .legal-highlight-list,
    .legal-list {
        gap: 12px;
    }
}

/* --- Relatorio de Igualdade Salarial --- */
.report-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top center, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 36%),
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-soft) 100%);
    color: var(--color-text);
}

.report-section {
    min-height: auto;
    padding: 132px 20px 84px;
}

.report-container {
    width: min(980px, 94vw);
    margin: 0 auto;
}

.report-header {
    margin-bottom: 28px;
    text-align: center;
}

.report-header span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.report-header h1 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.1;
}

.report-document {
    margin: 0 auto;
    padding: clamp(10px, 2vw, 18px);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow:
        0 24px 64px color-mix(in srgb, var(--color-text) 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.report-document img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

html[data-theme="dark"] .report-page {
    background:
        radial-gradient(circle at top center, rgba(233, 198, 130, 0.1) 0%, rgba(233, 198, 130, 0) 38%),
        linear-gradient(180deg, #101722 0%, #0d1420 100%);
}

html[data-theme="dark"] .report-header h1 {
    color: var(--color-text);
}

html[data-theme="dark"] .report-header span {
    color: var(--color-accent);
}

html[data-theme="dark"] .report-document {
    border-color: rgba(248, 248, 255, 0.16);
    background: #ffffff;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(233, 198, 130, 0.16);
}

@media (max-width: 768px) {
    .report-section {
        padding: 112px 14px 62px;
    }

    .report-header {
        margin-bottom: 20px;
    }

    .report-document {
        padding: 8px;
    }
}

/* --- Contact Refresh --- */
.contact-main {
    background:
        radial-gradient(circle at top center, rgba(233, 198, 130, 0.12) 0%, rgba(233, 198, 130, 0) 34%),
        linear-gradient(180deg, #f8f8ff 0%, #f3f6fb 100%);
}

.contact-section {
    margin-top: 20px;
    padding-bottom: 24px;
}

.contact-section .container {
    max-width: 1160px;
}

.contact-hero {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.contact-hero .page-title {
    margin-bottom: 16px;
    font-size: clamp(2.3rem, 4.8vw, 4.3rem);
    letter-spacing: 0.08em;
}

.contact-intro {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr);
    gap: 28px;
    align-items: start;
}

.contact-panel,
.contact-form-container {
    position: relative;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 253, 0.98) 100%);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.contact-panel {
    padding: 32px 28px;
}

.contact-panel::before,
.contact-form-container::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--color-accent) 0%, rgba(233, 198, 130, 0.28) 100%);
}

.contact-panel h2,
.contact-form-container h2 {
    margin: 0 0 12px;
    font-size: clamp(1.9rem, 2.6vw, 2.7rem);
    line-height: 1.1;
}

.contact-panel-copy,
.contact-form-intro {
    margin: 0 0 24px;
    color: var(--color-text-muted);
    line-height: 1.75;
    font-size: 1rem;
}

.contact-info {
    display: grid;
    gap: 16px;
    margin-bottom: 0;
    align-items: stretch;
}

.contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(36, 48, 65, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.contact-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(233, 198, 130, 0.3) 0%, rgba(233, 198, 130, 0.14) 100%);
    color: var(--color-contrast-surface);
    font-size: 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.contact-item-body h4 {
    margin: 0 0 8px;
    font-size: 1.16rem;
    color: var(--color-text);
}

.contact-item-body p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-form-container {
    padding: 36px 38px;
}

.contact-form-eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(233, 198, 130, 0.18);
    color: #8b6b2f;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-form {
    display: grid;
    gap: 14px;
}

.contact-form label {
    margin-bottom: 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--color-text);
}

.contact-form input,
.contact-form textarea {
    margin-bottom: 0;
    padding: 14px 16px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: rgba(233, 198, 130, 0.55);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.14);
    transform: translateY(-1px);
}

.contact-form textarea {
    min-height: 148px;
}

.contact-form .cta-button {
    margin-top: 8px;
    border-radius: 18px;
    padding: 16px 20px;
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    box-shadow: 0 14px 28px rgba(216, 180, 109, 0.26);
}

#contact-feedback {
    margin-top: 12px;
    font-size: 0.96rem;
    line-height: 1.6;
}

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

    .contact-hero {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        margin-top: 0;
    }

    .contact-hero .page-title {
        margin-bottom: 12px;
        font-size: 2rem;
        letter-spacing: 0.05em;
    }

    .contact-intro {
        font-size: 0.98rem;
        line-height: 1.72;
    }

    .contact-panel,
    .contact-form-container {
        border-radius: 22px;
    }

    .contact-panel {
        padding: 24px 20px;
    }

    .contact-form-container {
        padding: 28px 20px;
    }

    .contact-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px 16px;
    }

    .contact-item-icon {
        width: 42px;
        height: 42px;
    }
}

/* --- Camada de performance: preserva movimento, reduz pintura em aparelhos fracos --- */
#institutionalVideo,
#institutionalHeroImage,
#institutionalHeroSlideshow,
.newsletter-section .carousel-track,
.animate-on-scroll,
.animate-on-scroll > *,
.diferencial-item img,
.diferencial-item h4,
.diferencial-item p {
    backface-visibility: hidden;
}

.sidebar {
    left: 0;
    opacity: 0;
    transform: translate3d(calc(-100% - 14px), 0, 0);
    transition:
        transform 430ms cubic-bezier(.22, 1, .36, 1),
        opacity 260ms ease;
    contain: layout paint;
    will-change: transform, opacity;
}

.sidebar.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.sidebar-brand {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.98);
    transition:
        opacity 260ms ease,
        transform 360ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: 0ms;
    will-change: transform, opacity;
}

.sidebar.active .sidebar-brand {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 120ms;
}

.sidebar-nav > ul > li {
    opacity: 0;
    transform: translate3d(-14px, 8px, 0);
    transition:
        opacity 240ms ease,
        transform 380ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: 0ms;
    will-change: transform, opacity;
}

.sidebar.active .sidebar-nav > ul > li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.sidebar.active .sidebar-nav > ul > li:nth-child(1) { transition-delay: 120ms; }
.sidebar.active .sidebar-nav > ul > li:nth-child(2) { transition-delay: 165ms; }
.sidebar.active .sidebar-nav > ul > li:nth-child(3) { transition-delay: 210ms; }
.sidebar.active .sidebar-nav > ul > li:nth-child(4) { transition-delay: 255ms; }
.sidebar.active .sidebar-nav > ul > li:nth-child(5) { transition-delay: 300ms; }
.sidebar.active .sidebar-nav > ul > li:nth-child(6) { transition-delay: 345ms; }

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-brand,
    .sidebar-nav > ul > li {
        transition: none !important;
        will-change: auto !important;
    }
}

.highlight-item,
.produto-card,
.article-card,
.blog-post,
.faq-item,
.legal-summary,
.legal-card,
.contact-panel,
.contact-form-container {
    contain: layout paint;
}

.highlight-item,
.produto-card,
.article-card,
.faq-item {
    will-change: auto;
}

.catalogo-grid {
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    contain: layout paint;
}

.catalogo-grid .produto-card {
    scroll-snap-align: center;
}

.catalogo-grid--infinite {
    scroll-snap-type: none;
}

.catalogo-grid--native {
    scroll-snap-type: none;
    padding-left: max(12px, calc((100vw - min(1180px, 92vw)) / 2));
    padding-right: max(12px, calc((100vw - min(1180px, 92vw)) / 2));
}

.catalogo-grid--native .produto-card {
    scroll-snap-align: none;
}

@supports (content-visibility: auto) {
    .product-highlights,
    .diferenciais-section,
    .catalogo-section,
    .newsletter-section,
    .gallery-section,
    .blog-main,
    .faq-section,
    .legal-section,
    .contact-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 720px;
    }
}

@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-data: reduce) {
    .top-header.scrolled,
    .newsletter-content,
    .highlight-item span,
    .category-sort-menu {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .animate-on-scroll {
        --reveal-distance: 16px;
        --reveal-duration: 520ms;
    }

    .catalogo-grid {
        gap: 18px;
        padding-top: 18px;
        padding-bottom: 30px;
    }

    .catalogo-grid .produto-card,
    .category-grid .produto-card,
    .highlight-item,
    .blog-post,
    .faq-item,
    .legal-summary,
    .legal-card,
    .contact-panel,
    .contact-form-container {
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
    }

    .catalogo-grid .produto-card:hover,
    .category-grid .produto-card:hover,
    .catalogo-grid .produto-card:focus-visible,
    .category-grid .produto-card:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    }

    .catalogo-grid .produto-card:hover img,
    .category-grid .produto-card:hover img,
    .catalogo-grid .produto-card:focus-visible img,
    .category-grid .produto-card:focus-visible img {
        filter: none;
        transform: scale(1.02);
    }

    .highlight-item:hover,
    .highlight-item:active {
        transform: translateY(-3px) scale(1.006);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    }

    .highlight-item:hover img,
    .highlight-item:active img {
        transform: scale(1.025);
    }
}

@media (max-width: 768px) {
    .top-header {
        transition-duration: 240ms;
    }

    #institutionalVideo,
    #institutionalHeroImage,
    #institutionalHeroSlideshow {
        transform: none !important;
    }

    .video-hero-section::after {
        height: 96px;
    }

    .catalogo-grid .produto-card,
    .category-grid .produto-card {
        border-radius: 16px;
        box-shadow:
            0 24px 58px color-mix(in srgb, var(--color-accent-hover) 36%, transparent),
            0 14px 32px rgba(15, 23, 42, 0.16);
        transition: transform 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease;
    }

    .veja-tambem-grid .produto-card {
        box-shadow:
            0 24px 58px color-mix(in srgb, var(--color-accent-hover) 36%, transparent),
            0 14px 32px rgba(15, 23, 42, 0.16);
    }

    .catalogo-grid .produto-card::before,
    .category-grid .produto-card::before {
        content: none;
    }

    .catalogo-grid .produto-card img,
    .category-grid .produto-card img {
        border-radius: 14px;
        transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
    }

    .newsletter-section .carousel-track {
        will-change: auto;
    }
}

/* --- Product detail layout refresh --- */
.product-page {
    min-height: 100vh;
    padding: 0 0 56px;
    overflow-x: clip;
    background: #f3f6fb;
    color: var(--color-text);
}

.product-hero-band {
    min-height: 330px;
    padding: 116px 20px 88px;
    background: var(--color-contrast-surface);
    color: #fff;
}

.product-hero-content {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.25fr);
    align-items: end;
    gap: 30px;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.product-breadcrumb {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 34px;
    color: rgba(248, 248, 255, 0.74);
    font-size: 0.9rem;
}

.product-breadcrumb > * {
    min-width: 0;
    max-width: 100%;
}

.product-breadcrumb a {
    overflow-wrap: anywhere;
    word-break: normal;
    color: inherit;
}

.product-breadcrumb a::after {
    content: none;
}

.product-breadcrumb a:hover {
    color: #fff;
}

.product-breadcrumb > * + *::before {
    content: "/";
    margin-right: 8px;
    color: rgba(248, 248, 255, 0.45);
    font-weight: 400;
}

.product-breadcrumb-current {
    overflow-wrap: anywhere;
    word-break: normal;
    color: #fff;
    font-weight: 800;
}

.product-title-block {
    grid-column: 2;
    align-self: center;
}

.product-category-label {
    display: block;
    min-height: 1.35em;
    margin-bottom: 8px;
    color: rgba(248, 248, 255, 0.72);
    font-size: 1rem;
    font-weight: 700;
}

.product-title-block .product-name {
    max-width: none;
    margin: 0;
    color: #fff;
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: 0;
    text-align: left;
}

.product-title-block .product-subtitle {
    max-width: 720px;
    margin: 18px 0 0;
    color: rgba(248, 248, 255, 0.78);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.65;
    text-align: left;
    white-space: pre-line;
}

.product-detail-shell {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: -128px auto 0;
}

.product-container.product-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 30px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
}

.product-image-section {
    position: sticky;
    top: 112px;
    display: grid;
    align-self: start;
    justify-items: center;
    gap: 20px;
}

.product-image-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    cursor: zoom-in;
}

.product-image-card #main-product-image {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    object-fit: contain;
}

.product-thumbnails {
    display: none;
    width: 100%;
    margin-top: 0;
}

.product-thumbnails.is-visible {
    display: grid;
    gap: 16px;
}

.variation-options {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
}

.product-thumb-option {
    display: grid;
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 8px;
    padding: 0 0 8px;
    overflow: hidden;
    background: #fff;
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.product-thumb-option img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    object-fit: cover;
}

.product-thumb-option span {
    display: block;
    padding: 0 6px;
    overflow: hidden;
    font-size: 0.88rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-thumb-option:hover,
.product-thumb-option:focus-visible,
.product-thumb-option.is-active {
    border-color: var(--color-contrast-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    outline: none;
    transform: translateY(-2px);
}

.product-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.product-gallery-dots button {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-contrast-surface);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.product-gallery-dots button.is-active {
    background: var(--color-contrast-surface);
}

.product-gallery-dots button:hover,
.product-gallery-dots button:focus-visible {
    transform: scale(1.08);
    outline: none;
}

.product-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    place-items: center;
    padding: 28px;
    background: rgba(8, 14, 26, 0.84);
}

.product-image-viewer.is-open {
    display: grid;
}

.product-image-viewer img {
    max-width: min(1100px, 96vw);
    max-height: 86vh;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}

.product-image-viewer-close {
    position: fixed;
    top: 22px;
    right: 22px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
}

.product-image-viewer-close:hover,
.product-image-viewer-close:focus-visible {
    background: var(--color-accent-hover);
    outline: none;
}

.product-details-section {
    display: grid;
    align-items: stretch;
    gap: 16px;
    padding-top: 150px;
    text-align: left;
}

.product-info-card {
    position: relative;
    overflow: hidden;
    padding: 26px 28px;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.product-info-card h2 {
    margin: 0 0 14px;
    color: var(--color-contrast-surface);
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
}

.product-card-kicker {
    display: block;
    margin-bottom: 14px;
    color: var(--color-contrast-surface);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}



.product-description-modern {
    width: 100%;
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.8;
}

.product-description-modern p {
    margin: 0 0 16px;
    color: var(--color-text-muted);
}

.product-description-modern p:last-child {
    margin-bottom: 0;
}

.product-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.product-facts-grid div {
    padding: 16px;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    background: #f3f6fb;
}

.product-facts-grid dt {
    margin-bottom: 8px;
    color: var(--color-contrast-surface);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.product-facts-grid dd {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
}

.product-meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
    opacity: 1;
    white-space: pre-line;
}

.product-contact-card p {
    margin: 0 0 18px;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.product-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    background: var(--color-contrast-surface);
    color: #fff;
    font-weight: 800;
}

.product-contact-button::after {
    content: none;
}

.product-contact-button:hover,
.product-contact-button:focus-visible {
    color: #fff;
    transform: translateY(-1px);
}

.veja-tambem-section {
    width: min(1180px, calc(100% - 40px));
    margin: 56px auto 0;
    padding: 0 0 32px;
}

.veja-tambem-shell {
    width: 100%;
}

.veja-tambem-title {
    margin: 0 0 18px;
    color: var(--color-contrast-surface);
    font-size: 1.6rem;
    text-align: left;
}

.veja-tambem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
    gap: 18px;
    margin: 0;
}

.veja-tambem-grid .produto-card {
    width: 100%;
    max-width: none;
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.veja-tambem-grid .produto-card img {
    height: 190px;
    border-radius: 0;
    object-fit: cover;
}

.veja-tambem-grid .produto-card h3 {
    padding: 0 14px 14px;
    color: var(--color-text);
    text-align: left;
}

.veja-tambem-grid .produto-card:hover,
.veja-tambem-grid .produto-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

@media (max-width: 1024px) {
    .product-hero-band {
        min-height: auto;
        padding: 104px 20px 72px;
    }

    .product-hero-content,
    .product-container.product-layout {
        grid-template-columns: 1fr;
    }

    .product-title-block {
        grid-column: 1;
    }

    .product-detail-shell {
        margin-top: -72px;
    }

    .product-image-section {
        position: relative;
        top: auto;
    }

    .product-details-section {
        padding-top: 0;
    }

    .product-image-card {
        max-width: 560px;
    }
}

@media (max-width: 768px) {
    .product-page {
        padding-bottom: 36px;
    }

    .product-hero-band {
        padding: 96px 16px 64px;
    }

    .product-hero-content,
    .product-detail-shell,
    .veja-tambem-section {
        width: calc(100% - 32px);
    }

    .product-detail-shell {
        margin-top: -48px;
    }

    .product-title-block .product-name {
        font-size: 2.6rem;
    }

    .product-title-block .product-subtitle {
        font-size: 1rem;
    }

    .product-info-card {
        padding: 22px 18px;
    }

    .variation-options {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
    }

    .product-thumb-option {
        flex: 0 0 31%;
        scroll-snap-align: start;
    }

    .product-gallery-dots {
        gap: 14px;
    }

    .product-facts-grid,
    .veja-tambem-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Desktop mouse: diagonal accent hover for product/category cards --- */
.catalogo-grid .produto-card::after,
.category-grid .produto-card::after,
.veja-tambem-grid .produto-card::after {
    content: none;
}

@media (hover: hover) and (pointer: fine) {
    .catalogo-grid .produto-card,
    .category-grid .produto-card,
    .veja-tambem-grid .produto-card {
        isolation: isolate;
    }

    .catalogo-grid .produto-card img,
    .category-grid .produto-card img,
    .veja-tambem-grid .produto-card img {
        position: relative;
        z-index: 3;
    }

    .catalogo-grid .produto-card h3,
    .category-grid .produto-card h3,
    .veja-tambem-grid .produto-card h3 {
        position: relative;
        z-index: 4;
        transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
    }

    .catalogo-grid .produto-card::after,
    .category-grid .produto-card::after,
    .veja-tambem-grid .produto-card::after {
        content: "";
        position: absolute;
        inset: -34%;
        z-index: 2;
        width: auto;
        height: auto;
        border-radius: inherit;
        background:
            radial-gradient(circle at 18% 86%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 34%),
            linear-gradient(35deg, var(--color-accent) 0%, #f3d8a2 58%, rgba(255, 255, 255, 0.72) 100%);
        background:
            radial-gradient(circle at 18% 86%, color-mix(in srgb, #fff 42%, transparent) 0%, transparent 34%),
            linear-gradient(
                35deg,
                color-mix(in srgb, var(--color-accent) 92%, #fff 8%) 0%,
                color-mix(in srgb, var(--color-accent) 76%, #fff 24%) 58%,
                rgba(255, 255, 255, 0.72) 100%
            );
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-64%, 64%, 0);
        transform-origin: left bottom;
        transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
        will-change: transform, opacity;
    }

    .catalogo-grid .produto-card:hover::after,
    .category-grid .produto-card:hover::after,
    .veja-tambem-grid .produto-card:hover::after,
    .catalogo-grid .produto-card:focus-visible::after,
    .category-grid .produto-card:focus-visible::after,
    .veja-tambem-grid .produto-card:focus-visible::after {
        opacity: 0.96;
        transform: translate3d(0, 0, 0);
    }

    .catalogo-grid .produto-card::after {
        inset: -42% -34% -30%;
        background:
            radial-gradient(circle at 16% 88%, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 44%),
            linear-gradient(35deg, var(--color-accent) 0%, #e9c682 46%, rgba(255, 255, 255, 0.66) 100%);
        background:
            radial-gradient(circle at 16% 88%, color-mix(in srgb, #fff 50%, transparent) 0%, color-mix(in srgb, #fff 12%, transparent) 32%, transparent 44%),
            linear-gradient(
                35deg,
                color-mix(in srgb, var(--color-accent) 96%, #fff 4%) 0%,
                color-mix(in srgb, var(--color-accent) 84%, #fff 16%) 46%,
                rgba(255, 255, 255, 0.66) 100%
            );
        transform: translate3d(-58%, 58%, 0);
    }

    .catalogo-grid .produto-card:hover::after,
    .catalogo-grid .produto-card:focus-visible::after {
        opacity: 1;
    }

    .catalogo-grid .produto-card:hover,
    .category-grid .produto-card:hover,
    .veja-tambem-grid .produto-card:hover,
    .catalogo-grid .produto-card:focus-visible,
    .category-grid .produto-card:focus-visible,
    .veja-tambem-grid .produto-card:focus-visible {
        box-shadow:
            0 24px 58px rgba(216, 180, 109, 0.34),
            0 14px 32px rgba(15, 23, 42, 0.16);
        box-shadow:
            0 24px 58px color-mix(in srgb, var(--color-accent-hover) 36%, transparent),
            0 14px 32px rgba(15, 23, 42, 0.16);
    }

    .catalogo-grid .produto-card:hover h3,
    .category-grid .produto-card:hover h3,
    .veja-tambem-grid .produto-card:hover h3,
    .catalogo-grid .produto-card:focus-visible h3,
    .category-grid .produto-card:focus-visible h3,
    .veja-tambem-grid .produto-card:focus-visible h3 {
        color: #fff;
        text-shadow: 0 1px 12px rgba(36, 48, 65, 0.18);
    }

}

@property --stik-card-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes stikCardBorderSweep {
    to {
        --stik-card-border-angle: 360deg;
    }
}

.catalogo-grid .produto-card::after,
.category-grid .produto-card::after,
.veja-tambem-grid .produto-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    width: auto;
    height: auto;
    border-radius: inherit;
    padding: 2px;
    background:
        conic-gradient(
            from var(--stik-card-border-angle),
            rgba(233, 198, 130, 0) 0deg,
            rgba(233, 198, 130, 0) 76deg,
            var(--color-accent) 128deg,
            var(--color-accent-hover) 176deg,
            var(--color-accent) 224deg,
            rgba(233, 198, 130, 0) 284deg,
            rgba(233, 198, 130, 0) 360deg
        );
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity 180ms ease;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.catalogo-grid .produto-card:hover::after,
.category-grid .produto-card:hover::after,
.veja-tambem-grid .produto-card:hover::after,
.catalogo-grid .produto-card:focus-visible::after,
.category-grid .produto-card:focus-visible::after,
.veja-tambem-grid .produto-card:focus-visible::after {
    opacity: 1;
    transform: none;
    animation: stikCardBorderSweep 1.35s linear infinite;
}

.catalogo-grid .produto-card:hover h3,
.category-grid .produto-card:hover h3,
.veja-tambem-grid .produto-card:hover h3,
.catalogo-grid .produto-card:focus-visible h3,
.category-grid .produto-card:focus-visible h3,
.veja-tambem-grid .produto-card:focus-visible h3 {
    color: var(--color-accent-hover);
    text-shadow: none;
}

/* --- Catalog rail sizing: fixed card height without affecting category/product pages --- */
.catalogo-grid {
    --catalog-card-height: 300px;
    --catalog-rail-height: 430px;
    min-height: var(--catalog-rail-height);
    align-items: center;
    padding-top: 34px;
    padding-bottom: 54px;
}

.catalogo-grid .produto-card {
    display: flex;
    flex-direction: column;
    height: var(--catalog-card-height);
    margin-top: auto;
    margin-bottom: auto;
}

.catalogo-grid .produto-card img {
    flex: 0 0 210px;
}

.catalogo-grid .produto-card h3 {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-data: reduce) {
    .catalogo-grid {
        --catalog-card-height: 318px;
        --catalog-rail-height: 384px;
        padding-top: 24px;
        padding-bottom: 42px;
    }
}

@media (max-width: 768px) {
    .catalogo-grid {
        --catalog-card-height: 304px;
        --catalog-rail-height: 358px;
        padding-top: 20px;
        padding-bottom: 34px;
    }
}

/* --- Mobile catalog download: taller carousel background behind fixed form --- */
@media (max-width: 768px) {
    .newsletter-section {
        height: 430px;
        min-height: 430px;
    }



    .newsletter-section .carousel-bg {
        height: 100%;
    }
}

@media (max-width: 768px) {
    .product-breadcrumb {
        margin-top: 10px;
    }
}

/* --- Blog editorial screens --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.blog-container,
.blog-editor-shell,
.blog-article-shell {
    width: min(1170px, calc(100% - 40px));
    margin: 0 auto;
}

.blog-showcase-page.blog-main,
.blog-editor-page.create-main,
.blog-article-page.article-detail-page {
    padding: 0;
    background: #fff;
    color: var(--color-text);
}

.blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    align-items: center;
    margin-bottom: 34px;
    font-size: 0.82rem;
    color: #8792a4;
}

.blog-breadcrumb a,
.blog-breadcrumb span,
.blog-breadcrumb strong {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
}

.blog-breadcrumb a {
    color: var(--color-contrast-surface);
}

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

.blog-breadcrumb > * + *::before {
    content: ">";
    margin: 0 8px;
    color: #a4adbb;
}

.blog-breadcrumb strong {
    max-width: 54ch;
    overflow: hidden;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
    white-space: normal;
    text-overflow: clip;
}

.blog-article-breadcrumb strong {
    max-width: min(100%, 72ch);
}

.blog-showcase-hero {
    padding: 112px 0 72px;
    background:
        linear-gradient(180deg, #f4f6f9 0 68%, #fff 68% 100%);
}

.blog-showcase-hero.is-search-results {
    padding: 102px 0 108px;
    background:
        linear-gradient(180deg, var(--color-contrast-surface) 0 360px, #fff 360px 100%);
}

.blog-showcase-hero.is-search-results .blog-breadcrumb {
    color: rgba(255, 255, 255, 0.62);
}

.blog-showcase-hero.is-search-results .blog-breadcrumb a,
.blog-showcase-hero.is-search-results .blog-breadcrumb strong {
    color: #fff;
}

.blog-showcase-hero.is-search-results .blog-breadcrumb > * + *::before {
    color: color-mix(in srgb, var(--color-accent) 68%, #fff 32%);
}

.blog-showcase-hero.is-search-results .blog-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 372px);
    margin-bottom: 122px;
    align-items: end;
}

.blog-showcase-hero.is-search-results .blog-title-group {
    max-width: 980px;
}

.blog-showcase-hero.is-search-results .blog-title-group span {
    color: color-mix(in srgb, var(--color-accent) 74%, #fff 26%);
}

.blog-showcase-hero.is-search-results .blog-title-group h1 {
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.12;
}

.blog-showcase-hero.is-search-results .blog-search-panel {
    align-self: end;
}

.blog-hero-grid {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) minmax(280px, 372px);
    gap: 30px;
    align-items: end;
    margin-bottom: 54px;
}

.blog-title-group span,
.blog-editor-header span {
    display: block;
    margin-bottom: 4px;
    color: #8d98aa;
    font-size: 1.05rem;
}

.blog-title-group h1,
.blog-editor-header h1 {
    margin: 0;
    color: var(--color-accent-hover);
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 0.95;
    text-align: left;
    letter-spacing: 0;
}

.blog-hero-grid p {
    max-width: 560px;
    margin: 0;
    color: #0f2b5c;
    font-size: 1.05rem;
    line-height: 1.55;
}

.blog-search-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    height: 54px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.blog-search-panel input {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0 16px;
    color: var(--color-text);
    background: transparent;
    font: inherit;
    outline: none;
}

.blog-search-panel button {
    width: 48px;
    height: 48px;
    color: #9aa4b2;
}

.blog-featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(260px, 0.7fr);
    gap: 30px;
}

.blog-feature-side {
    display: grid;
    gap: 16px;
}

.blog-feature-card,
.blog-mini-card,
.blog-category-card,
.blog-result-card {
    position: relative;
    display: flex;
    min-height: 270px;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    background: #1f2f45;
    isolation: isolate;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-feature-card:hover,
.blog-mini-card:hover,
.blog-category-card:hover,
.blog-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
}

.blog-feature-card img,
.blog-mini-card img,
.blog-category-card img,
.blog-result-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.55s ease, filter 0.55s ease;
}

.blog-feature-card:hover img,
.blog-mini-card:hover img,
.blog-category-card:hover img,
.blog-result-card:hover img {
    transform: scale(1.04);
    filter: saturate(1.05);
}

.blog-feature-card::after,
.blog-mini-card::after,
.blog-category-card::after,
.blog-result-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 100%);
}

.blog-feature-card.is-large {
    min-height: 570px;
}

.blog-featured-grid > .blog-feature-card:only-child {
    grid-column: 1 / -1;
}

.blog-featured-grid.blog-results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

.blog-featured-grid.blog-results-grid > .blog-result-card:only-of-type {
    grid-column: auto;
}

.blog-result-card {
    min-height: 270px;
}

.blog-feature-side .blog-feature-card {
    min-height: 270px;
}

.blog-card-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    padding: 58px 16px 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 44%, rgba(0, 0, 0, 0.78) 100%);
    overflow-wrap: anywhere;
}

.blog-feature-card.is-large .blog-card-content {
    padding: 68px 18px 22px;
}

.blog-card-tags,
.blog-article-tags,
.blog-selected-tags,
.blog-available-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-card-tag,
.blog-article-tags span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #fff;
    color: var(--color-accent-hover);
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-card-content h2,
.blog-card-content h3 {
    margin: 12px 0 0;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.12;
    text-align: left;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-feature-card.is-large .blog-card-content h2 {
    font-size: 1.15rem;
}

.blog-results-pagination {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 2px;
}

.blog-results-pagination button,
.blog-results-pagination-gap {
    display: inline-grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--color-accent-hover);
    color: var(--color-accent-hover);
    background: #fff;
    font-weight: 700;
}

.blog-results-pagination button:hover,
.blog-results-pagination button.is-active {
    color: #fff;
    background: var(--color-accent-hover);
}

.blog-results-pagination-gap {
    border-color: var(--color-border);
    color: var(--color-text);
}

.blog-section {
    padding: 70px 0 76px;
    background: #fff;
}

.blog-section-heading h2,
.blog-related-section .blog-section-heading h2 {
    position: relative;
    width: max-content;
    margin: 0 auto 30px;
    color: var(--color-accent-hover);
    font-size: clamp(1.45rem, 3vw, 1.8rem);
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0;
}

.blog-section-heading h2::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin: 10px auto 0;
    background: var(--color-accent);
}

.blog-most-read-grid,
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

.blog-mini-card {
    min-height: 270px;
}

.blog-category-filter-section {
    padding: 60px 0;
    background: #f4f6f9;
}

.blog-category-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 10px;
}

.blog-category-chips button {
    min-height: 36px;
    border: 1px solid var(--color-accent-hover);
    border-radius: 999px;
    color: var(--color-accent-hover);
    background: #fff;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.blog-category-chips button:hover,
.blog-category-chips button.is-active {
    color: #fff;
    background: var(--color-accent-hover);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--color-accent-hover) 24%, transparent);
}

.blog-category-sections {
    background: #fff;
    padding: 0
}

.blog-category-block {
    padding: 64px 0 74px;
}

.blog-category-block:nth-child(even) {
    background: #f4f6f9;
}

.blog-category-title {
    margin: 0 0 30px;
    color: var(--color-accent-hover);
    font-size: 1.65rem;
    text-align: left;
    letter-spacing: 0;
    text-transform: uppercase;
}

.blog-category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.68fr) minmax(280px, 0.9fr);
    gap: 30px;
    align-items: stretch;
}

.blog-category-layout.has-newsletter {
    grid-template-columns: minmax(0, 0.95fr) minmax(210px, 0.55fr) minmax(420px, 1.2fr);
}

.blog-category-stack {
    display: grid;
    gap: 16px;
}

.blog-category-card.is-tall {
    min-height: 540px;
}

.blog-category-card.is-medium {
    min-height: 254px;
}

.blog-newsletter-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: min(420px, 100%);
    min-height: 540px;
    padding: 34px 26px;
    border-radius: 8px;
    background: #f1f3f7;
    color: var(--color-accent-hover);
}

.blog-newsletter-card span {
    color: #9099a8;
    font-size: 1rem;
}

.blog-newsletter-card h3 {
    margin: 4px 0 18px;
    color: var(--color-accent-hover);
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.15;
    text-align: left;
    letter-spacing: 0;
}

.blog-newsletter-card form {
    display: grid;
    gap: 14px;
}

.blog-newsletter-card input {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 4px;
    padding: 0 14px;
    color: var(--color-text);
    background: #fff;
    font: inherit;
}

.blog-newsletter-card label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    color: var(--color-accent-hover);
    font-size: 0.82rem;
    line-height: 1.55;
}

.blog-newsletter-card button {
    justify-self: start;
    min-height: 46px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
}

.blog-newsletter-card button:hover {
    background: var(--color-accent-hover);
}

.blog-empty-state {
    grid-column: 1 / -1;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    background: #fff;
    text-align: center;
}

/* --- Article reading screen --- */
.blog-article-page.article-detail-page {
    display: block;
    min-height: 100vh;
    padding: 102px 0 0;
    background:
        linear-gradient(180deg, #f4f6f9 0 300px, #fff 300px 100%);
}

.blog-article-shell {
    max-width: 970px;
    min-width: 0;
    padding-bottom: 82px;
}

.blog-article-breadcrumb {
    margin-bottom: 30px;
}

.blog-article-cover {
    width: min(770px, 100%);
    margin: 0 auto 30px;
    overflow: hidden;
    border-radius: 8px;
    background: #e8edf4;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

.blog-article-cover img {
    width: 100%;
    aspect-ratio: 16 / 7.6;
    object-fit: fill;
    display: block;
}

.blog-article-header,
.blog-article-body {
    width: min(770px, 100%);
    min-width: 0;
    margin: 0 auto;
}

.blog-article-header {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(36, 48, 65, 0.28);
}

.blog-article-tags {
    margin-bottom: 16px;
}

.blog-article-tags span {
    min-width: 76px;
    justify-content: center;
    min-height: 36px;
    background: var(--color-accent);
    color: #fff;
}

.blog-article-header h1 {
    margin: 0 0 14px;
    color: var(--color-accent-hover);
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1.15;
    text-align: left;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    align-items: center;
    color: var(--color-text);
    font-size: 0.96rem;
}

.blog-article-meta span {
    display: inline-flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
    overflow-wrap: anywhere;
}

.blog-article-body.article-content {
    padding-top: 26px;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.72;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-article-body.article-content p,
.blog-article-body.article-content ul,
.blog-article-body.article-content ol,
.blog-article-body.article-content blockquote {
    max-width: 100%;
    margin: 0 0 24px;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-article-body.article-content li {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-article-body.article-content p.is-lead {
    color: #263445;
    font-style: italic;
}

.blog-article-body.article-content h2,
.blog-article-body.article-content h3 {
    margin: 30px 0 14px;
    color: var(--color-accent-hover);
    line-height: 1.25;
    text-align: left;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.blog-article-body.article-content h2 {
    font-size: 1.45rem;
}

.blog-article-body.article-content h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

.blog-article-body.article-content a {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-article-body.article-content figure {
    max-width: 100%;
    margin: 22px 0 24px;
    overflow: hidden;
}

.blog-article-body.article-content img,
.blog-article-body.article-content video,
.blog-article-body.article-content iframe {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    border: 0;
}

.blog-article-body.article-content > img,
.blog-article-body.article-content p > img {
    width: 100%;
    margin: 22px 0 24px;
}

.blog-article-body.article-content figure img {
    width: 100%;
    aspect-ratio: 16 / 7.6;
    object-fit: fill;
    display: block;
    border-radius: 0;
}

.blog-article-body.article-content table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.blog-article-body.article-content th,
.blog-article-body.article-content td {
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-article-body.article-content figcaption {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.blog-article-body.article-content blockquote {
    margin: 28px 0;
    padding: 22px 26px;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    color: var(--color-accent-hover);
    background: color-mix(in srgb, var(--color-accent) 18%, #fff 82%);
    font-size: 1.12rem;
    line-height: 1.55;
}

.blog-article-body.article-content pre,
.blog-article-body.article-content code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-related-section {
    width: min(970px, 100%);
    margin: 70px auto 0;
}

.blog-related-section .blog-section-heading h2 {
    margin-bottom: 24px;
}

.blog-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Article editor screen --- */
.blog-editor-page.create-main {
    min-height: 100vh;
    padding: 102px 0 82px;
    background: #eef2f7;
}

.blog-editor-header {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
}

.blog-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.blog-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 332px;
    min-width: 0;
    gap: 24px;
    align-items: start;
}

.blog-editor-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.blog-editor-sidebar {
    min-width: 0;
    position: sticky;
    top: 92px;
    display: grid;
    gap: 16px;
}

.blog-editor-panel {
    min-width: 0;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.blog-editor-main .blog-editor-panel {
    padding: 24px;
}

.blog-editor-sidebar .blog-editor-panel {
    padding: 20px;
}

.blog-editor-panel-head {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    min-width: 0;
}

.blog-editor-panel h2,
.blog-editor-panel-head h2 {
    margin: 0;
    color: var(--color-accent-hover);
    font-size: 1rem;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0;
}

.blog-editor-panel-head span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 18%, #fff 82%);
    color: var(--color-accent-hover);
    font-size: 0.78rem;
    font-weight: 700;
}

.blog-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.blog-field {
    min-width: 0;
    display: grid;
    gap: 8px;
    color: #243041;
    font-size: 0.88rem;
    font-weight: 700;
}

.blog-field-wide {
    grid-column: 1 / -1;
}

.blog-field input,
.blog-field textarea,
.blog-field select,
.blog-block-heading-input,
.blog-image-meta input,
.blog-tag-entry input {
    width: 100%;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    padding: 12px 13px;
    color: #243041;
    background: #f8fafc;
    font: inherit;
    outline: none;
    overflow-wrap: anywhere;
    word-break: normal;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.blog-field textarea {
    resize: vertical;
    min-height: 92px;
    line-height: 1.55;
}

.blog-editor-page #article-title {
    min-height: 58px;
    margin-bottom: 0;
    overflow-wrap: anywhere;
    resize: vertical;
    white-space: pre-wrap;
    font-size: inherit;
    line-height: 1.45;
    color: #243041;
}

.blog-field input:focus,
.blog-field textarea:focus,
.blog-field select:focus,
.blog-block-heading-input:focus,
.blog-image-meta input:focus,
.blog-tag-entry input:focus,
.blog-rich-text:focus,
.blog-editable-list:focus {
    border-color: var(--color-accent-hover);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(216, 180, 109, 0.18);
}

.blog-editor-btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.blog-editor-btn:hover {
    transform: translateY(-1px);
}

.blog-editor-btn:disabled,
.blog-editor-btn.is-loading {
    cursor: wait;
    opacity: 0.72;
    transform: none;
    pointer-events: none;
}

.blog-editor-btn.is-loading .fa-spinner,
.blog-editor-progress-head .fa-spinner {
    animation: blog-editor-spin 0.8s linear infinite;
}

.blog-editor-btn-primary {
    color: #fff;
    background: var(--color-accent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--color-accent-hover) 24%, transparent);
}

.blog-editor-btn-primary:hover {
    background: var(--color-accent-hover);
}

.blog-editor-btn-outline {
    border: 1px solid var(--color-accent-hover);
    color: var(--color-accent-hover);
    background: #fff;
}

.blog-editor-btn-outline:hover {
    color: #fff;
    background: var(--color-accent-hover);
}

.blog-editor-btn-light {
    border: 1px solid #d7dee8;
    color: #243041;
    background: #fff;
}

.blog-icon-btn {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #d7dee8;
    border-radius: 50%;
    color: #243041;
    background: #fff;
}

.blog-cover-editor {
    display: grid;
    gap: 12px;
}

.blog-cover-editor figure {
    position: relative;
    display: grid;
    min-height: 340px;
    place-items: center;
    overflow: hidden;
    margin: 0;
    border: 1.5px dashed #cfd8e6;
    border-radius: 8px;
    color: #4b5a6d;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32)),
        color-mix(in srgb, var(--color-accent) 10%, #edf1f7 90%);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-cover-editor figure:focus-visible,
.blog-cover-editor figure.is-dragover {
    border-color: var(--color-accent-hover);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
        color-mix(in srgb, var(--color-accent) 18%, #edf1f7 82%);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-accent-hover) 20%, transparent 80%);
    outline: none;
}

.blog-cover-editor figure.is-uploading {
    pointer-events: none;
    opacity: 0.72;
}

.blog-cover-editor img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.blog-cover-placeholder {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 360px;
    padding: 28px;
    text-align: center;
    pointer-events: none;
}

.blog-cover-placeholder span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--color-accent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-accent-hover) 22%, transparent 78%);
}

.blog-cover-placeholder strong {
    color: var(--color-accent-hover);
    font-size: 1.02rem;
}

.blog-cover-placeholder small {
    color: var(--color-text-muted);
    line-height: 1.5;
}

.blog-cover-editor figure:not(.is-empty) {
    border-style: solid;
    background: #101827;
}

.blog-cover-editor figure:not(.is-empty) .blog-cover-placeholder {
    opacity: 0;
}

.blog-cover-change-hint {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    font-size: 0.82rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.blog-cover-editor figure:not(.is-empty) .blog-cover-change-hint,
.blog-cover-editor figure.is-dragover .blog-cover-change-hint {
    opacity: 1;
    transform: translateY(0);
}

.blog-block-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.blog-block-toolbar button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    color: #243041;
    background: #f8fafc;
    font-weight: 700;
}

.blog-block-toolbar button:hover {
    border-color: var(--color-accent-hover);
    background: color-mix(in srgb, var(--color-accent) 18%, #fff 82%);
}

.blog-block-list {
    display: grid;
    gap: 14px;
}

.blog-content-block {
    position: relative;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfe;
}

.blog-block-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.blog-block-controls span {
    margin-right: auto;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blog-block-controls button,
.blog-inline-toolbar button,
.blog-tag-entry button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #d7dee8;
    border-radius: 50%;
    color: #243041;
    background: #fff;
}

.blog-rich-text,
.blog-editable-list {
    min-height: 118px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    padding: 14px;
    color: #243041;
    background: #fff;
    line-height: 1.65;
    outline: none;
}

.blog-rich-text a {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-inline-toolbar {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
}

.blog-content-block-image figure {
    overflow: hidden;
    border-radius: 8px;
    background: #edf1f7;
}

.blog-content-block-image img {
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    display: block;
}

.blog-image-meta {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.blog-editable-list {
    padding-left: 34px;
}

.blog-word-editor {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #fff;
}

.blog-word-toolbar {
    position: sticky;
    /* top: 76px; */
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #d7dee8;
    background: #f8fafc;
}

.blog-word-toolbar select,
.blog-word-toolbar button {
    min-height: 36px;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    color: #243041;
    background: #fff;
    font-weight: 700;
}

.blog-word-toolbar select {
    min-width: 160px;
    padding: 0 10px;
}

.blog-word-toolbar button {
    display: inline-grid;
    width: 38px;
    place-items: center;
}

.blog-word-toolbar button:hover,
.blog-word-toolbar select:focus {
    border-color: var(--color-accent-hover);
    box-shadow: 0 0 0 3px rgba(216, 180, 109, 0.16);
}

.blog-word-canvas {
    max-width: 100%;
    min-width: 0;
    min-height: 460px;
    padding: 36px min(46px, 6vw);
    color: #1f2937;
    background: #fff;
    font-size: 1rem;
    line-height: 1.72;
    outline: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-word-canvas.is-tiptap-ready {
    padding: 0;
}

.blog-word-canvas .ProseMirror,
.blog-word-canvas .tiptap {
    max-width: 100%;
    min-width: 0;
    min-height: 460px;
    padding: 36px min(46px, 6vw);
    outline: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-word-canvas:focus {
    box-shadow: inset 0 0 0 3px rgba(216, 180, 109, 0.12);
}

.blog-word-canvas p,
.blog-word-canvas ul,
.blog-word-canvas ol,
.blog-word-canvas figure,
.blog-word-canvas .ProseMirror p,
.blog-word-canvas .ProseMirror ul,
.blog-word-canvas .ProseMirror ol,
.blog-word-canvas .ProseMirror figure {
    max-width: 100%;
    margin: 0 0 22px;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-word-canvas li,
.blog-word-canvas .ProseMirror li {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.blog-word-canvas h2,
.blog-word-canvas h3,
.blog-word-canvas .ProseMirror h2,
.blog-word-canvas .ProseMirror h3 {
    margin: 30px 0 14px;
    color: var(--color-accent-hover);
    line-height: 1.25;
    text-align: left;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.blog-word-canvas h2 {
    font-size: 1.45rem;
}

.blog-word-canvas h3 {
    font-size: 1.22rem;
    font-weight: 600;
}

.blog-word-canvas a {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-word-canvas ul,
.blog-word-canvas ol {
    padding-left: 24px;
}

.blog-word-canvas figure {
    display: grid;
    gap: 8px;
}

.blog-word-canvas img {
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    display: block;
}

.blog-word-canvas figcaption {
    color: #64748b;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.blog-word-canvas pre,
.blog-word-canvas code,
.blog-word-canvas .ProseMirror pre,
.blog-word-canvas .ProseMirror code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-word-canvas .is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: #9aa4b2;
    pointer-events: none;
}

.blog-publish-panel,
.blog-tag-panel,
.blog-keyword-panel,
.blog-link-panel,
.blog-seo-panel {
    display: grid;
    gap: 14px;
}

.blog-read-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f4f6f9;
    color: #64748b;
    font-size: 0.85rem;
}

.blog-read-stats strong {
    color: var(--color-accent-hover);
}

.blog-selected-tags button,
.blog-available-tags button {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
}

.blog-selected-tags button {
    color: #fff;
    background: var(--color-accent);
}

.blog-selected-tags button:hover {
    background: var(--color-accent-hover);
}

.blog-selected-tags button i {
    font-size: 0.72rem;
}

.blog-available-tags button {
    border: 1px solid #d7dee8;
    color: #243041;
    background: #fff;
}

.blog-tag-item {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    background: #fff;
}

.blog-available-tags .blog-tag-name {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 999px 0 0 999px;
    padding-right: 8px;
    overflow-wrap: anywhere;
}

.blog-tag-inline-input {
    flex: 1 1 auto;
    min-width: 92px;
    max-width: 180px;
    min-height: 30px;
    border: 0;
    border-radius: 999px 0 0 999px;
    padding: 0 10px;
    color: #243041;
    background: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    outline: none;
}

.blog-tag-inline-input:focus {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 55%, #fff 45%);
}

.blog-tag-item-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    padding-right: 6px;
}

.blog-available-tags .blog-tag-item-actions button {
    width: 22px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--color-text-muted);
    background: transparent;
    font-size: 0.8rem;
    line-height: 1;
}

.blog-available-tags .blog-tag-name:hover {
    color: var(--color-accent-hover);
    background: color-mix(in srgb, var(--color-accent) 16%, #fff 84%);
}

.blog-available-tags .blog-tag-remove {
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
}

@media (max-width: 520px) {
    .blog-tag-item {
        width: 100%;
        justify-content: space-between;
    }

    .blog-tag-inline-input {
        max-width: none;
    }
}

.blog-tag-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 8px;
}

.blog-tag-entry button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #fff;
    background: var(--color-accent);
}

.blog-tag-entry button:hover {
    background: var(--color-accent-hover);
}

.blog-seo-preview {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
}

.blog-seo-preview span {
    color: #3b7d45;
    font-size: 0.78rem;
}

.blog-seo-preview strong {
    color: var(--color-accent-hover);
    font-size: 0.96rem;
    line-height: 1.3;
}

.blog-seo-preview p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.blog-editor-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2200;
    max-width: min(360px, calc(100% - 44px));
    padding: 14px 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--color-accent-hover);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.blog-editor-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.blog-editor-toast.is-progress {
    width: min(360px, calc(100% - 44px));
    padding: 16px;
}

.blog-editor-progress-head {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}

.blog-editor-progress-head span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.blog-editor-progress-track {
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.blog-editor-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transition: width 0.28s ease;
}

@keyframes blog-editor-spin {
    to {
        transform: rotate(360deg);
    }
}

.blog-tag-impact-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.42);
}

.blog-tag-impact-card {
    width: min(460px, 100%);
    border-radius: 8px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}

.blog-tag-impact-card h2 {
    margin: 0 0 10px;
    color: var(--color-accent-hover);
    font-size: 1.08rem;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
}

.blog-tag-impact-card p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.6;
}

.blog-tag-impact-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 1100px) {
    .blog-hero-grid,
    .blog-featured-grid,
    .blog-category-layout,
    .blog-category-layout.has-newsletter,
    .blog-editor-layout {
        grid-template-columns: 1fr;
    }

    .blog-editor-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-feature-side,
    .blog-category-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-newsletter-card {
        min-height: auto;
    }
}

@media (max-width: 820px) {
    .blog-container,
    .blog-editor-shell,
    .blog-article-shell {
        width: min(100% - 28px, 1170px);
    }

    .blog-showcase-hero,
    .blog-editor-page.create-main,
    .blog-article-page.article-detail-page {
        padding-top: 124px;
    }

    .blog-showcase-hero.is-search-results {
        padding: 112px 0 72px;
        background:
            linear-gradient(180deg, var(--color-contrast-surface) 0 260px, #fff 260px 100%);
    }

    .blog-showcase-hero.is-search-results .blog-breadcrumb {
        margin-bottom: 18px;
    }

    .blog-hero-grid,
    .blog-featured-grid,
    .blog-category-layout,
    .blog-category-layout.has-newsletter,
    .blog-cover-editor,
    .blog-field-grid,
    .blog-image-meta {
        grid-template-columns: 1fr;
    }

    .blog-showcase-hero.is-search-results .blog-hero-grid,
    .blog-featured-grid.blog-results-grid {
        grid-template-columns: 1fr;
    }

    .blog-showcase-hero.is-search-results .blog-hero-grid {
        gap: 0;
        margin-bottom: 56px;
    }

    .blog-showcase-hero.is-search-results .blog-title-group {
        display: grid;
        min-height: 96px;
        align-content: center;
        text-align: center;
    }

    .blog-showcase-hero.is-search-results .blog-title-group h1 {
        max-width: 15ch;
        margin: 0 auto;
        font-size: 1.55rem;
        line-height: 1.08;
        text-align: center;
    }

    .blog-showcase-hero.is-search-results .blog-title-group span {
        text-align: center;
    }

    .blog-showcase-hero.is-search-results .blog-search-panel {
        margin-top: 34px;
    }

    .blog-feature-card.is-large,
    .blog-category-card.is-tall {
        min-height: 420px;
    }

    .blog-newsletter-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        justify-self: stretch;
        padding-inline: 24px;
    }

    .blog-feature-side,
    .blog-category-stack,
    .blog-most-read-grid,
    .blog-related-grid,
    .blog-editor-sidebar {
        grid-template-columns: 1fr;
    }

    .blog-category-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-editor-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-editor-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .blog-editor-btn {
        flex: 1 1 180px;
    }

    .blog-editor-page .blog-editor-shell {
        display: grid;
        gap: 18px;
    }

    .blog-editor-page .blog-editor-header,
    .blog-editor-page .blog-editor-layout,
    .blog-editor-page .blog-editor-main,
    .blog-editor-page .blog-editor-sidebar {
        display: contents;
    }

    .blog-editor-page .blog-editor-breadcrumb {
        order: 0;
        margin-bottom: 0;
    }

    .blog-editor-page .blog-editor-header > div:not(.blog-editor-actions) {
        order: 1;
    }

    .blog-editor-page .blog-editor-cover {
        order: 2;
    }

    .blog-editor-page .blog-editor-identity {
        order: 3;
    }

    .blog-editor-page .blog-tag-panel {
        order: 4;
    }

    .blog-editor-page .blog-word-panel {
        order: 5;
    }

    .blog-editor-page .blog-editor-actions {
        order: 6;
        margin-top: 2px;
    }

    .blog-card-content h2,
    .blog-card-content h3 {
        font-size: 1rem;
    }

    .blog-article-meta {
        gap: 10px 18px;
    }
}

@media (max-width: 520px) {
    .blog-category-chips {
        grid-template-columns: 1fr;
    }

    .blog-title-group h1,
    .blog-editor-header h1 {
        font-size: 3rem;
    }

    .blog-feature-card.is-large,
    .blog-feature-side .blog-feature-card,
    .blog-mini-card,
    .blog-category-card.is-tall,
    .blog-category-card.is-medium {
        min-height: 320px;
    }

    .blog-editor-main .blog-editor-panel,
    .blog-editor-sidebar .blog-editor-panel {
        padding: 16px;
    }

    .blog-block-toolbar button {
        flex: 1 1 130px;
    }
}

/* --- Admin Panel --- */
.admin-page {
    min-height: 100vh;
    padding: 132px 0 72px;
    background:
        linear-gradient(180deg, rgba(246, 248, 252, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    color: var(--color-text);
}

.admin-login {
    width: min(100% - 32px, 520px);
    margin: 0 auto;
}

.admin-login-card,
.admin-card,
.admin-list-panel,
.admin-editor-panel {
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.1);
}

.admin-login-card {
    display: grid;
    gap: 18px;
    padding: 34px;
}

.admin-eyebrow {
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.admin-login-card h1,
.admin-header h1 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.admin-login-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.admin-login-form,
.admin-form {
    display: grid;
    gap: 12px;
}

.admin-login-form label,
.admin-form label {
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 800;
}

.admin-login-form input,
.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    padding: 12px 13px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-login-form input:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.18);
}

.admin-site-content-form {
    display: grid;
    gap: 18px;
}

.admin-site-content-card {
    display: grid;
    gap: 16px;
}

.admin-site-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-site-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.admin-site-field span,
.admin-site-slot {
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-site-field input,
.admin-site-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    resize: vertical;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-site-field input:focus,
.admin-site-field textarea:focus {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.18);
}

.admin-site-field small {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.admin-site-highlight-list,
.admin-site-repeatable {
    display: grid;
    gap: 12px;
}

.admin-site-highlight-row,
.admin-site-image-row {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.admin-site-highlight-row {
    grid-template-columns: 130px 122px minmax(0, 1fr);
}

.admin-site-image-row {
    grid-template-columns: 122px minmax(0, 1fr) auto;
}

.admin-site-slot {
    display: grid;
    min-height: 86px;
    place-items: center;
    border-radius: 8px;
    padding: 10px;
    background: color-mix(in srgb, var(--color-accent) 12%, #fff 88%);
    color: var(--color-accent-hover);
    text-align: center;
}

.admin-site-image-preview {
    width: 122px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    background: #f6f8fc;
}

.admin-site-image-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.admin-site-image-fields {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.admin-site-row-actions {
    display: grid;
    gap: 8px;
}

.admin-site-actions {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

.admin-site-subtabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    gap: 6px;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.admin-site-subtabs button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 7px;
    padding: 0 14px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 900;
    cursor: pointer;
}

.admin-site-subtabs button.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.admin-site-section {
    display: none;
    gap: 18px;
}

.admin-site-section.is-active {
    display: grid;
}

.admin-hero-mode-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-hero-mode-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-hero-mode-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(36, 48, 65, 0.13);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    color: var(--color-text);
    font-weight: 900;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.admin-hero-mode-button:hover,
.admin-hero-mode-button:focus-visible {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.13);
    outline: none;
}

.admin-hero-mode-button.is-active {
    border-color: rgba(172, 126, 39, 0.62);
    background: color-mix(in srgb, var(--color-accent) 22%, #fff 78%);
    color: #2b2416;
}

.admin-hero-mode-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
}

.admin-site-nested-head {
    align-items: end;
    margin-top: 4px;
}

.admin-site-nested-head h3,
.admin-site-nested-head p {
    margin: 0;
}

.admin-site-nested-head h3 {
    color: var(--color-text);
    font-size: 1rem;
}

.admin-site-nested-head p {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-site-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-site-media-grid-home {
    grid-template-areas:
        "top-left center top-right"
        "bottom-left center bottom-right";
    grid-template-columns: minmax(0, 1fr) minmax(260px, 1.5fr) minmax(0, 1fr);
    grid-template-rows: minmax(330px, auto) minmax(330px, auto);
    align-items: stretch;
}

.admin-site-media-grid-home .admin-site-media-card {
    min-height: 330px;
}

.admin-site-media-grid-home .admin-site-media-preview,
.admin-site-media-grid-home .admin-site-media-preview img {
    min-height: 220px;
}

.admin-site-home-card-small-top-left { grid-area: top-left; }
.admin-site-home-card-large-center { grid-area: center; }
.admin-site-home-card-small-top-right { grid-area: top-right; }
.admin-site-home-card-small-bottom-left { grid-area: bottom-left; }
.admin-site-home-card-small-bottom-right { grid-area: bottom-right; }

.admin-site-media-grid-home .admin-site-slot {
    display: none;
}

.admin-site-media-grid-carousel,
.admin-site-media-grid-hero-slideshow,
.admin-site-media-grid-institutional {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.admin-site-media-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    padding: 12px 12px 34px;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.admin-site-media-card.is-dragging {
    opacity: 0.54;
    transform: scale(0.99);
}

.admin-site-media-card.is-drop-before,
.admin-site-media-card.is-drop-after {
    border-color: rgba(233, 198, 130, 0.9);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.16);
}

.admin-site-media-head {
    display: flex;
    min-height: 38px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.admin-site-media-head h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.25;
}

.admin-site-media-card .admin-site-slot {
    display: inline-flex;
    min-height: 0;
    margin-bottom: 5px;
    padding: 4px 7px;
    place-items: initial;
    font-size: 0.66rem;
}

.admin-site-media-dropzone {
    position: relative;
    display: grid;
    min-height: 170px;
    overflow: hidden;
    border: 1px dashed rgba(36, 48, 65, 0.22);
    border-radius: 8px;
    background: #f6f8fc;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-site-media-dropzone:hover,
.admin-site-media-dropzone:focus-visible,
.admin-site-media-dropzone.is-dragging {
    border-color: rgba(233, 198, 130, 0.88);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.16);
    outline: none;
    transform: translateY(-1px);
}

.admin-site-media-preview {
    width: 100%;
    height: 100%;
    min-height: 170px;
    margin: 0;
    background: #eef2f7;
}

.admin-site-media-preview img,
.admin-site-media-preview video {
    width: 100%;
    height: 100%;
    min-height: 170px;
    display: block;
    object-fit: cover;
}

.admin-site-media-overlay {
    position: absolute;
    inset: auto 10px 10px;
    display: grid;
    gap: 2px;
    border-radius: 8px;
    padding: 9px 10px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.admin-site-media-dropzone.has-video-preview .admin-site-media-overlay {
    inset: 10px 10px auto;
    pointer-events: auto;
    cursor: pointer;
    transform: translateY(-6px);
}

.admin-site-media-dropzone:hover .admin-site-media-overlay,
.admin-site-media-dropzone:focus-visible .admin-site-media-overlay,
.admin-site-media-dropzone.is-dragging .admin-site-media-overlay {
    opacity: 1;
    transform: translateY(0);
}

.admin-site-media-overlay i {
    font-size: 1rem;
}

.admin-site-media-overlay strong {
    font-size: 0.82rem;
}

.admin-site-media-overlay small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
}

.admin-site-media-current {
    overflow: hidden;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-site-drag-handle {
    position: absolute;
    left: 50%;
    bottom: 7px;
    display: inline-grid;
    width: 44px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 999px;
    padding: 0;
    background: #fff;
    color: var(--color-text-muted);
    cursor: grab;
    transform: translateX(-50%);
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.admin-site-drag-handle:hover,
.admin-site-drag-handle:focus-visible {
    border-color: rgba(233, 198, 130, 0.86);
    color: var(--color-accent-hover);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.14);
    outline: none;
}

.admin-site-drag-handle:active {
    cursor: grabbing;
}

.admin-product-image-dropzone {
    position: relative;
    display: grid;
    min-height: 300px;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    margin: 0 0 6px;
    border: 1.5px dashed #cfd8e6;
    border-radius: 8px;
    color: #4b5a6d;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-product-image-dropzone:focus-visible,
.admin-product-image-dropzone.is-dragover {
    border-color: var(--color-accent-hover);
    background: color-mix(in srgb, var(--color-accent) 7%, #fff 93%);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.16), 0 20px 48px rgba(15, 23, 42, 0.12);
    outline: none;
}

.admin-product-image-dropzone.is-uploading {
    pointer-events: none;
    opacity: 0.72;
}

.admin-product-image-dropzone img {
    position: absolute;
    inset: 18px;
    display: none;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: contain;
}

.admin-product-image-dropzone:not(.is-empty) {
    border-style: solid;
    border-color: rgba(36, 48, 65, 0.1);
    background: #fff;
}

.admin-product-image-dropzone:not(.is-empty) img {
    display: block;
}

.admin-product-image-placeholder {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 330px;
    padding: 28px;
    text-align: center;
    pointer-events: none;
}

.admin-product-image-placeholder span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--color-accent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-accent-hover) 22%, transparent 78%);
}

.admin-product-image-placeholder strong {
    color: var(--color-accent-hover);
    font-size: 1.02rem;
}

.admin-product-image-placeholder small {
    color: var(--color-text-muted);
    line-height: 1.5;
}

.admin-product-image-dropzone:not(.is-empty) .admin-product-image-placeholder {
    opacity: 0;
}

.admin-product-image-hint {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.admin-product-image-dropzone.is-dragover .admin-product-image-hint {
    opacity: 1;
    transform: translateY(0);
}

.admin-product-image-strip {
    --admin-product-thumb-size: 124px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--admin-product-thumb-size);
    min-height: 48px;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
    margin: 6px 0 4px;
}

.admin-product-image-strip.is-empty {
    display: none;
}

.admin-product-image-list {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 12px;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(36, 48, 65, 0.28) transparent;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.admin-product-image-list.has-scroll {
    max-width: 100%;
}

.admin-product-image-item {
    position: relative;
    display: grid;
    gap: 6px;
    flex: 0 0 var(--admin-product-thumb-size);
    min-width: 0;
    scroll-snap-align: start;
    touch-action: pan-x;
    transition: opacity 160ms ease, transform 160ms ease;
}

.admin-product-image-item.is-dragging {
    z-index: 2;
    opacity: 0.82;
    transition: none;
}

.admin-product-image-list.is-drop-ready,
.admin-product-image-list.is-reordering {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent 92%);
    box-shadow: inset 0 0 0 2px rgba(233, 198, 130, 0.34);
    cursor: grabbing;
}

.admin-product-image-thumb {
    display: grid;
    width: 100%;
    gap: 8px;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    padding: 7px;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-product-image-thumb img {
    width: 100%;
    aspect-ratio: 1 / 0.86;
    border-radius: 6px;
    background: #f4f7fb;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.admin-product-image-thumb span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-product-image-title {
    display: grid;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-product-image-title input {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    padding: 0 8px;
    color: var(--color-text);
    background: #fff;
    font: inherit;
    font-weight: 700;
}

.admin-product-image-title input:focus {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 3px rgba(233, 198, 130, 0.14);
    outline: none;
}

.admin-product-image-item.is-selected .admin-product-image-thumb {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(233, 198, 130, 0.15);
}

.admin-product-image-thumb:focus-visible {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.admin-product-image-list.is-reordering .admin-product-image-thumb {
    cursor: pointer;
}

.admin-product-image-list.is-reordering .admin-product-image-item:not(.is-dragging) .admin-product-image-thumb {
    border-color: rgba(233, 198, 130, 0.45);
}

.admin-product-image-item.is-dragging .admin-product-image-thumb {
    border-color: var(--color-accent-hover);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(233, 198, 130, 0.24);
    transform: scale(1.02);
}

.admin-product-image-handle {
    position: static;
    z-index: 0;
    display: grid;
    width: 30px;
    height: 22px;
    justify-self: center;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    cursor: grab;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    touch-action: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.admin-product-image-handle:active,
.admin-product-image-handle:focus-visible,
.admin-product-image-list.is-reordering .admin-product-image-handle {
    background: var(--color-accent-hover);
    cursor: grabbing;
    outline: none;
}

.admin-product-image-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.admin-product-image-remove:hover,
.admin-product-image-remove:focus-visible {
    background: #b91c1c;
    outline: none;
}

.admin-product-image-add {
    display: grid;
    width: 48px;
    height: 48px;
    align-self: center;
    justify-self: center;
    place-items: center;
    border: 1px solid #c5cfde;
    border-radius: 50%;
    color: var(--color-accent-hover);
    background: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-product-image-add:hover,
.admin-product-image-add:focus-visible {
    border-color: var(--color-accent-hover);
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.admin-product-image-add span {
    line-height: 1;
}

.admin-category-select {
    position: relative;
    width: 100%;
}

.admin-category-select select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-category-select-trigger {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    padding: 12px 13px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-category-select-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-category-select-trigger i {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    transition: color 160ms ease, transform 160ms ease;
}

.admin-category-select.is-open .admin-category-select-trigger,
.admin-category-select-trigger:focus-visible {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.18);
    outline: none;
}

.admin-category-select.is-open .admin-category-select-trigger i {
    transform: rotate(180deg);
    color: var(--color-accent-hover);
}

.admin-category-select-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    max-height: 260px;
    overflow: auto;
    padding: 7px;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.admin-category-select.is-open .admin-category-select-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.admin-category-select-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 7px;
    padding: 11px 12px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.admin-category-select-option:hover,
.admin-category-select-option:focus-visible {
    color: var(--color-accent-hover);
    background: color-mix(in srgb, var(--color-accent) 14%, #fff 86%);
    outline: none;
}

.admin-category-select-option.is-selected {
    color: #fff;
    background: var(--color-accent-hover);
}

.admin-category-select-option.is-selected::after {
    content: "\f00c";
    flex: 0 0 auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.78rem;
}

.admin-shell {
    width: min(100% - 36px, 1360px);
    margin: 0 auto;
}

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

.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(36, 48, 65, 0.1);
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 14px 16px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.admin-tab.is-active {
    border-bottom-color: var(--color-accent);
    color: var(--color-text);
}

.admin-panel {
    display: none;
}

.admin-panel.is-active {
    display: block;
}

.admin-split {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.admin-articles-layout {
    grid-template-columns: minmax(0, 1fr);
}

.admin-articles-layout.is-editor-open {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.admin-list-panel,
.admin-editor-panel,
.admin-card {
    padding: 20px;
}

.admin-editor-panel[hidden] {
    display: none;
}

.admin-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.admin-editor-head h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.admin-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.admin-list-search {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    margin: -4px 0 16px;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    padding: 0 13px;
    color: var(--color-text-muted);
    background:
        linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--color-accent) 5%, #fff 95%) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-list-search:focus-within {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 4px rgba(233, 198, 130, 0.14), 0 16px 34px rgba(15, 23, 42, 0.08);
}

.admin-list-search i {
    flex: 0 0 auto;
    color: var(--color-accent-hover);
    font-size: 0.88rem;
}

.admin-list-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
}

.admin-list-search input::placeholder {
    color: #8b96a6;
}

.admin-list-head h2,
.admin-card h2,
.admin-editor-actions-panel h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-list {
    display: grid;
    gap: 10px;
    max-height: 720px;
    overflow: auto;
    padding-right: 4px;
}

.admin-list-item,
.admin-category-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.admin-product-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
}

.admin-product-row img {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
    background: #f6f8fc;
}

.admin-list-item strong,
.admin-category-item strong {
    display: block;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.35;
}

.admin-list-item span,
.admin-category-item span,
.admin-empty {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.admin-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.admin-status-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.admin-status-badge.admin-status-badge--published {
    border-color: rgba(22, 163, 74, 0.22);
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.admin-status-badge.admin-status-badge--pending {
    border-color: rgba(217, 119, 6, 0.24);
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.admin-status-badge.admin-status-badge--translation-error {
    border-color: rgba(220, 38, 38, 0.22);
    background: rgba(220, 38, 38, 0.11);
    color: #b91c1c;
}

.admin-status-badge.admin-status-badge--publication-error {
    border-color: rgba(190, 18, 60, 0.25);
    background: rgba(190, 18, 60, 0.12);
    color: #9f1239;
}

.admin-list-actions,
.admin-form-actions,
.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-page .blog-editor-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.86rem;
}

.admin-header .blog-editor-btn {
    flex: 0 0 auto;
}

.admin-form-actions {
    justify-content: flex-end;
}

.admin-icon-btn {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(36, 48, 65, 0.1);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-icon-btn:hover,
.admin-icon-btn:focus-visible {
    border-color: rgba(233, 198, 130, 0.72);
    color: var(--color-accent-hover);
    transform: translateY(-1px);
    outline: none;
}

.admin-icon-btn-danger:hover,
.admin-icon-btn-danger:focus-visible {
    border-color: rgba(185, 28, 28, 0.3);
    color: #b91c1c;
}

.admin-article-form {
    gap: 18px;
}

.admin-editor-actions-panel {
    display: grid;
    gap: 10px;
}

.admin-editor-actions-panel .blog-editor-btn {
    justify-content: center;
    width: 100%;
}

.admin-products-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 0.9fr);
    gap: 22px;
    align-items: start;
}

.admin-categories-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.admin-category-card {
    position: sticky;
    top: 96px;
}

.admin-category-products-card {
    min-height: 420px;
}

.admin-category-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
}

.admin-categories-grid .admin-category-form {
    margin-top: 12px;
}

.admin-category-item {
    cursor: default;
}

.admin-category-item.is-selected {
    border-color: rgba(233, 198, 130, 0.72);
    background: color-mix(in srgb, var(--color-accent) 9%, #fff 91%);
    box-shadow: 0 0 0 3px rgba(233, 198, 130, 0.14);
}

.admin-category-open {
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-category-open:hover strong,
.admin-category-open:focus-visible strong {
    color: var(--color-accent-hover);
}

.admin-category-open:focus-visible {
    outline: none;
}

.admin-category-inline-edit {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
}

.admin-category-inline-edit input {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--color-text);
    font: inherit;
    font-weight: 800;
    outline: none;
}

.admin-category-inline-edit input:focus {
    border-color: rgba(233, 198, 130, 0.72);
    box-shadow: 0 0 0 3px rgba(233, 198, 130, 0.16);
}

.admin-category-selected-products {
    display: grid;
    gap: 10px;
}

.admin-category-selected-product {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    color: var(--color-text);
}

.admin-category-selected-product img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #f6f8fc;
}

.admin-category-selected-product strong,
.admin-category-selected-product span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-category-selected-product span {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.admin-category-products {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.admin-category-products a,
.admin-category-products span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(36, 48, 65, 0.08);
    border-radius: 8px;
    padding: 6px 8px 6px 6px;
    color: var(--color-text);
    background: #f6f8fc;
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-category-products a:hover,
.admin-category-products a:focus-visible {
    border-color: rgba(233, 198, 130, 0.72);
    color: var(--color-accent-hover);
    outline: none;
}

.admin-category-products img {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.admin-category-products .admin-category-empty-product {
    grid-template-columns: minmax(0, 1fr);
    color: var(--color-text-muted);
}

.admin-category-products strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inline-form input {
    flex: 1;
}

@media (max-width: 1100px) {
    .admin-hero-mode-control {
        grid-template-columns: 1fr;
    }

    .admin-split,
    .admin-articles-layout.is-editor-open,
    .admin-products-grid,
    .admin-categories-grid,
    .admin-site-grid,
    .admin-site-media-grid,
    .admin-site-media-grid-home,
    .admin-site-media-grid-carousel,
    .admin-site-media-grid-hero-slideshow,
    .admin-site-media-grid-institutional {
        grid-template-columns: 1fr;
    }

    .admin-site-media-grid-home {
        grid-template-areas: none;
        grid-template-rows: auto;
    }

    .admin-site-media-grid-home .admin-site-media-card {
        grid-area: auto;
    }

    .admin-site-highlight-row,
    .admin-site-image-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .admin-site-highlight-row {
        grid-template-columns: 1fr 96px minmax(0, 1fr);
    }

    .admin-site-image-row .admin-site-row-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
    }

    .admin-site-image-preview {
        width: 96px;
    }

    .admin-split .admin-editor-panel {
        order: -1;
    }

    .admin-products-grid > .admin-card:nth-child(2) {
        order: -1;
    }

    .admin-categories-grid .admin-category-card {
        order: -1;
    }

    .admin-categories-grid .admin-category-products-card {
        order: 2;
    }

    .admin-category-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .admin-site-subtabs {
        width: 100%;
    }

    .admin-site-subtabs button {
        flex: 1;
    }

    .admin-site-highlight-row,
    .admin-site-image-row {
        grid-template-columns: 1fr;
    }

    .admin-site-image-preview {
        width: 100%;
        max-width: none;
    }

    .admin-site-actions {
        position: static;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .admin-page {
        padding-top: 116px;
    }

    .admin-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-header .blog-editor-btn {
        align-self: flex-start;
    }

    .admin-tabs,
    .admin-inline-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-form-actions {
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .admin-form-actions .blog-editor-btn,
    .admin-inline-form .blog-editor-btn,
    .admin-header .blog-editor-btn {
        width: auto;
        min-height: 36px;
        padding: 0 13px;
        border-radius: 8px;
        font-size: 0.78rem;
    }

    .admin-form-actions .blog-editor-btn-primary {
        min-width: 124px;
    }

    .admin-inline-form {
        gap: 8px;
    }

    .admin-inline-form .blog-editor-btn {
        align-self: flex-end;
        min-width: 92px;
    }

    .admin-category-form .admin-inline-form .blog-editor-btn {
        flex: 0 0 auto;
        width: 100%;
        height: 36px;
        min-height: 36px;
        white-space: nowrap;
    }

    .admin-tab {
        justify-content: center;
    }

    .admin-product-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .blog-word-canvas,
    .blog-word-canvas .ProseMirror,
    .blog-word-canvas .tiptap {
        min-height: 320px;
        padding: 22px 18px;
    }

    .admin-product-image-dropzone {
        min-height: 220px;
        aspect-ratio: 1 / 0.92;
    }

    .admin-product-image-strip {
        --admin-product-thumb-size: clamp(88px, 27vw, 108px);
        gap: 10px;
    }

    .admin-product-image-list {
        gap: 10px;
        padding-bottom: 8px;
    }

    .admin-product-image-list.has-scroll {
        max-width: 100%;
    }

    .admin-product-image-add {
        width: 42px;
        height: 42px;
        font-size: 1.08rem;
    }

    .admin-category-selected-product {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .admin-category-selected-product img {
        width: 54px;
        height: 54px;
    }

    .admin-category-selected-product .admin-list-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .admin-product-row .admin-list-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* --- Dark mode: branded navy surfaces with gold accents --- */
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(233, 198, 130, 0.08) 0%, rgba(233, 198, 130, 0) 30%),
        var(--color-bg);
    color: var(--color-text);
}

html[data-theme="dark"] a,
html[data-theme="dark"] .veja-tambem-title,
html[data-theme="dark"] .top-header .icon-btn {
    color: var(--color-text);
}

html[data-theme="dark"] a:hover {
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .top-header.scrolled {
    background-color: rgba(11, 17, 26, 0.86);
    border-bottom: 1px solid rgba(233, 198, 130, 0.14);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(32, 44, 61, 0.82);
    color: var(--color-accent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #121b28 0%, #0d1420 100%);
    border-right-color: rgba(233, 198, 130, 0.16);
    box-shadow: 18px 0 42px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .close-sidebar {
    color: var(--color-text);
}

html[data-theme="dark"] .close-sidebar:hover,
html[data-theme="dark"] .close-sidebar:focus-visible {
    background-color: rgba(233, 198, 130, 0.18);
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .sidebar-nav li {
    border-bottom-color: rgba(238, 243, 248, 0.1);
}

html[data-theme="dark"] .product-highlights,
html[data-theme="dark"] .product-page,
html[data-theme="dark"] .institutional-page,
html[data-theme="dark"] .blog-main,
html[data-theme="dark"] .create-main,
html[data-theme="dark"] .diferenciais-section,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .faq-main,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .category-page,
html[data-theme="dark"] .admin-page {
    background:
        radial-gradient(circle at top right, rgba(233, 198, 130, 0.07) 0%, rgba(233, 198, 130, 0) 34%),
        linear-gradient(180deg, #101722 0%, #0d1420 100%);
    color: var(--color-text);
}

html[data-theme="dark"] .catalogo-section,
html[data-theme="dark"] .product-hero-band,
html[data-theme="dark"] .blog-showcase-hero.is-search-results {
    background: var(--color-contrast-surface);
    color: var(--color-text);
}

html[data-theme="dark"] .catalogo-section h2,
html[data-theme="dark"] .catalogo-subtitle {
    color: var(--color-text);
}

html[data-theme="dark"] .catalogo-subtitle,
html[data-theme="dark"] .category-description,
html[data-theme="dark"] .diferencial-item p,
html[data-theme="dark"] .product-category,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .post-excerpt,
html[data-theme="dark"] .search-result-item small,
html[data-theme="dark"] .no-results-msg,
html[data-theme="dark"] .search-results-dropdown a span small,
html[data-theme="dark"] .blog-card-meta,
html[data-theme="dark"] .blog-article-meta,
html[data-theme="dark"] .blog-editor-panel p,
html[data-theme="dark"] .admin-login-card p,
html[data-theme="dark"] .blog-word-canvas figcaption,
html[data-theme="dark"] .blog-block-controls span,
html[data-theme="dark"] .admin-category-selected-product span,
html[data-theme="dark"] .admin-category-products .admin-category-empty-product {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .blog-hero-grid p,
html[data-theme="dark"] .blog-article-body.article-content,
html[data-theme="dark"] .blog-article-body.article-content p,
html[data-theme="dark"] .blog-article-body.article-content li,
html[data-theme="dark"] .blog-article-body.article-content blockquote,
html[data-theme="dark"] .blog-article-body.article-content p.is-lead,
html[data-theme="dark"] .blog-field,
html[data-theme="dark"] .blog-editor-page #article-title,
html[data-theme="dark"] .blog-block-toolbar button,
html[data-theme="dark"] .blog-block-controls button,
html[data-theme="dark"] .blog-inline-toolbar button,
html[data-theme="dark"] .blog-rich-text,
html[data-theme="dark"] .blog-editable-list,
html[data-theme="dark"] .blog-word-toolbar select,
html[data-theme="dark"] .blog-word-canvas,
html[data-theme="dark"] .blog-word-canvas p,
html[data-theme="dark"] .blog-word-canvas li,
html[data-theme="dark"] .blog-word-canvas .ProseMirror,
html[data-theme="dark"] .blog-word-canvas .tiptap,
html[data-theme="dark"] .admin-category-open,
html[data-theme="dark"] .admin-category-products a,
html[data-theme="dark"] .admin-category-products span,
html[data-theme="dark"] .admin-category-selected-product strong,
html[data-theme="dark"] .admin-product-image-dropzone,
html[data-theme="dark"] .sidebar-nav > ul > li > .sidebar-link:hover,
html[data-theme="dark"] .submenu .sidebar-link,
html[data-theme="dark"] .submenu .sidebar-link:hover,
html[data-theme="dark"] .sidebar-link-chevron {
    color: var(--color-text);
}

html[data-theme="dark"] .highlight-item,
html[data-theme="dark"] .catalogo-grid .produto-card,
html[data-theme="dark"] .category-grid .produto-card,
html[data-theme="dark"] .veja-tambem-grid .produto-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .legal-summary,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .contact-panel,
html[data-theme="dark"] .contact-form-container,
html[data-theme="dark"] .blog-post,
html[data-theme="dark"] .blog-feature-card,
html[data-theme="dark"] .blog-mini-card,
html[data-theme="dark"] .blog-category-card,
html[data-theme="dark"] .blog-search-panel,
html[data-theme="dark"] .blog-editor-panel,
html[data-theme="dark"] .product-image-card,
html[data-theme="dark"] .product-info-card,
html[data-theme="dark"] .admin-login-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .admin-list-panel,
html[data-theme="dark"] .admin-editor-panel {
    border-color: rgba(233, 198, 130, 0.18);
    background:
        linear-gradient(180deg, rgba(24, 34, 49, 0.98) 0%, rgba(18, 27, 40, 0.96) 100%);
    color: var(--color-text);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .catalogo-grid .produto-card:hover,
html[data-theme="dark"] .category-grid .produto-card:hover,
html[data-theme="dark"] .veja-tambem-grid .produto-card:hover,
html[data-theme="dark"] .catalogo-grid .produto-card:focus-visible,
html[data-theme="dark"] .category-grid .produto-card:focus-visible,
html[data-theme="dark"] .veja-tambem-grid .produto-card:focus-visible {
    border-color: rgba(233, 198, 130, 0.42);
    box-shadow: 0 24px 58px rgba(242, 242, 242, 0.36);
}

html[data-theme="dark"] .catalogo-grid .produto-card img,
html[data-theme="dark"] .category-grid .produto-card img,
html[data-theme="dark"] .veja-tambem-grid .produto-card img,
html[data-theme="dark"] #main-product-image {
    /* background-color: #111827; */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

html[data-theme="dark"] .catalogo-grid .produto-card h3,
html[data-theme="dark"] .category-grid .produto-card h3,
html[data-theme="dark"] .veja-tambem-grid .produto-card h3,
html[data-theme="dark"] .produto-card h3,
html[data-theme="dark"] .product-highlights h2,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .title-section,
html[data-theme="dark"] .faq-section .page-title,
html[data-theme="dark"] .contact-section h2,
html[data-theme="dark"] .create-main .page-title,
html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .main-content h2,
html[data-theme="dark"] .faq-section h3,
html[data-theme="dark"] .admin-login-card h1,
html[data-theme="dark"] .admin-header h1, 
html[data-theme="dark"] .product-card-kicker,
html[data-theme="dark"] .product-info-card h2,
html[data-theme="dark"] .product-facts-grid dt{
    color: var(--color-text);
}

html[data-theme="dark"] .catalogo-grid .produto-card:hover h3,
html[data-theme="dark"] .category-grid .produto-card:hover h3,
html[data-theme="dark"] .veja-tambem-grid .produto-card:hover h3,
html[data-theme="dark"] .catalogo-grid .produto-card:focus-visible h3,
html[data-theme="dark"] .category-grid .produto-card:focus-visible h3,
html[data-theme="dark"] .veja-tambem-grid .produto-card:focus-visible h3 {
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .highlight-item span,
html[data-theme="dark"] .newsletter-content,
html[data-theme="dark"] .product-highlights span {
    background-color: rgba(24, 34, 49, 0.9);
    color: var(--color-text);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-results-dropdown,
html[data-theme="dark"] .category-sort-menu {
    border-color: rgba(238, 243, 248, 0.1);
    background: rgba(24, 34, 49, 0.98);
    color: var(--color-text);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .search-result-item:hover,
html[data-theme="dark"] .search-results-dropdown a:hover,
html[data-theme="dark"] .category-sort-option:hover,
html[data-theme="dark"] .category-sort-option:focus-visible,
html[data-theme="dark"] .search-result-item.keyboard-selected,
html[data-theme="dark"] .search-result-item.keyboard-selected:hover {
    background-color: rgba(233, 198, 130, 0.13);
    color: var(--color-text);
    outline-color: rgba(233, 198, 130, 0.24);
}

html[data-theme="dark"] .category-sort-option.is-selected {
    background: rgba(233, 198, 130, 0.18);
    color: var(--color-text);
}

html[data-theme="dark"] .category-show-more,
html[data-theme="dark"] .carousel-btn {
    border-color: rgba(233, 198, 130, 0.18);
    background: linear-gradient(180deg, #202c3d 0%, #182231 100%);
    color: var(--color-text);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .category-show-more:hover,
html[data-theme="dark"] .category-show-more:focus-visible,
html[data-theme="dark"] .carousel-btn:hover,
html[data-theme="dark"] .carousel-btn:focus-visible {
    border-color: rgba(233, 198, 130, 0.46);
    background: var(--color-surface-strong);
}

/* html[data-theme="dark"] .footer-bottom {
    background-color: rgba(11, 17, 26, 0.84);
    border-top-color: rgba(238, 243, 248, 0.1);
} */

html[data-theme="dark"] .main-footer {
    --footer-watermark-opacity: 0.5;
    border-top-color: rgba(233, 198, 130, 0.14);
}

html[data-theme="dark"] .institutional-principle-card + .institutional-principle-card::before {
    background: rgba(248, 248, 255, 0.12);
}

html[data-theme="dark"] .bottom-icons a {
    background: var(--color-surface-soft);
    color: var(--color-text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .bottom-icons a:hover,
html[data-theme="dark"] .bottom-icons a:focus-visible {
    color: #ffffff;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-group input[type="text"],
html[data-theme="dark"] .newsletter-content input,
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .admin-login-form input,
html[data-theme="dark"] .admin-form input,
html[data-theme="dark"] .admin-form select,
html[data-theme="dark"] .admin-form textarea,
html[data-theme="dark"] .admin-site-field input,
html[data-theme="dark"] .admin-site-field textarea,
html[data-theme="dark"] .blog-search-panel input,
html[data-theme="dark"] .blog-word-canvas,
html[data-theme="dark"] .blog-word-canvas .ProseMirror,
html[data-theme="dark"] .blog-word-canvas .tiptap {
    border-color: rgba(238, 243, 248, 0.12);
    background: #101722;
    color: var(--color-text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(170, 182, 197, 0.76);
}

html[data-theme="dark"] .blog-word-editor,
html[data-theme="dark"] .blog-word-toolbar,
html[data-theme="dark"] .trix-toolbar,
html[data-theme="dark"] .trix-button--icon,
html[data-theme="dark"] .blog-field input,
html[data-theme="dark"] .blog-field textarea,
html[data-theme="dark"] .blog-field select,
html[data-theme="dark"] .blog-block-heading-input,
html[data-theme="dark"] .blog-image-meta input,
html[data-theme="dark"] .blog-tag-entry input,
html[data-theme="dark"] .blog-block-toolbar button,
html[data-theme="dark"] .blog-block-controls button,
html[data-theme="dark"] .blog-inline-toolbar button,
html[data-theme="dark"] .blog-content-block,
html[data-theme="dark"] .blog-rich-text,
html[data-theme="dark"] .blog-editable-list,
html[data-theme="dark"] .blog-content-block-image figure,
html[data-theme="dark"] .admin-product-image-dropzone,
html[data-theme="dark"] .admin-product-image-thumb,
html[data-theme="dark"] .admin-category-select-trigger,
html[data-theme="dark"] .admin-category-select-menu,
html[data-theme="dark"] .blog-cover-editor figure,
html[data-theme="dark"] .admin-list-item,
html[data-theme="dark"] .admin-product-row,
html[data-theme="dark"] .admin-category-item,
html[data-theme="dark"] .admin-category-selected-product,
html[data-theme="dark"] .admin-category-products a,
html[data-theme="dark"] .admin-category-products span {
    border-color: rgba(238, 243, 248, 0.12);
    background: var(--color-surface-soft);
    color: var(--color-text);
}
html[data-theme="dark"] .admin-list-search {
    background: #101722;
}

html[data-theme="dark"] .admin-list-item strong,
html[data-theme="dark"] .admin-category-item strong {
    color: var(--color-text);
}

html[data-theme="dark"] .admin-list-item span,
html[data-theme="dark"] .admin-category-item span,
html[data-theme="dark"] .admin-empty {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .admin-status-badge.admin-status-badge--published {
    border-color: rgba(74, 222, 128, 0.26);
    background: rgba(22, 163, 74, 0.18);
    color: #86efac;
}

html[data-theme="dark"] .admin-status-badge.admin-status-badge--pending {
    border-color: rgba(251, 191, 36, 0.26);
    background: rgba(217, 119, 6, 0.2);
    color: #fcd34d;
}

html[data-theme="dark"] .admin-status-badge.admin-status-badge--translation-error,
html[data-theme="dark"] .admin-status-badge.admin-status-badge--publication-error {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(220, 38, 38, 0.18);
    color: #fca5a5;
}

html[data-theme="dark"] .blog-field input:focus,
html[data-theme="dark"] .blog-field textarea:focus,
html[data-theme="dark"] .blog-field select:focus,
html[data-theme="dark"] .blog-block-heading-input:focus,
html[data-theme="dark"] .blog-image-meta input:focus,
html[data-theme="dark"] .blog-tag-entry input:focus,
html[data-theme="dark"] .blog-rich-text:focus,
html[data-theme="dark"] .blog-editable-list:focus,
html[data-theme="dark"] .admin-product-image-dropzone:focus-visible,
html[data-theme="dark"] .admin-product-image-dropzone.is-dragover {
    border-color: rgba(233, 198, 130, 0.62);
    background: rgba(233, 198, 130, 0.1);
}

html[data-theme="dark"] .blog-tag-item,
html[data-theme="dark"] .blog-tag-inline-input,
html[data-theme="dark"] .blog-available-tags button,
html[data-theme="dark"] .blog-seo-preview,
html[data-theme="dark"] .blog-read-stats,
html[data-theme="dark"] .blog-link-panel,
html[data-theme="dark"] .blog-tag-panel,
html[data-theme="dark"] .blog-keyword-panel,
html[data-theme="dark"] .blog-seo-panel {
    background: var(--color-surface-soft);
    color: var(--color-text);
    border-color: rgba(238, 243, 248, 0.12);
}

html[data-theme="dark"] .admin-icon-btn,
html[data-theme="dark"] .blog-editor-btn-light,
html[data-theme="dark"] .blog-editor-btn-outline {
    border-color: rgba(238, 243, 248, 0.14);
    background: var(--color-surface);
    color: var(--color-text);
}

html[data-theme="dark"] .admin-tabs{
    border-bottom: 1px solid rgba(236, 242, 240, 0.1);
}

html[data-theme="dark"] .admin-tab:focus-visible,
html[data-theme="dark"] .admin-icon-btn:hover,
html[data-theme="dark"] .admin-icon-btn:focus-visible,
html[data-theme="dark"] .blog-editor-btn-light:hover,
html[data-theme="dark"] .blog-editor-btn-outline:hover {
    border-color: rgba(233, 198, 130, 0.38);
    background: rgba(233, 198, 130, 0.14);
    color: var(--color-text);
}

html[data-theme="dark"] .admin-icon-btn[disabled] {
    border-color: rgba(238, 243, 248, 0.08);
    background: rgba(16, 23, 34, 0.62);
    color: rgba(170, 182, 197, 0.38);
}

html[data-theme="dark"] .blog-tag-impact-modal {
    background: rgba(3, 7, 18, 0.68);
}

html[data-theme="dark"] .blog-tag-impact-card {
    border: 1px solid rgba(233, 198, 130, 0.18);
    background: linear-gradient(180deg, rgba(24, 34, 49, 0.98) 0%, rgba(18, 27, 40, 0.98) 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .blog-tag-impact-card h2 {
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .blog-tag-impact-card p {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-primary {
    border: 1px solid rgba(233, 198, 130, 0.64);
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 16px 34px rgba(233, 198, 130, 0.18);
}

html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-primary:hover,
html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-primary:focus-visible {
    background: var(--color-accent-hover);
    color: var(--color-on-accent);
}

html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-light,
html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-outline {
    border-color: rgba(238, 243, 248, 0.16);
    background: var(--color-contrast-surface);
    color: var(--color-text);
}

html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-light:hover,
html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-light:focus-visible,
html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-outline:hover,
html[data-theme="dark"] .blog-tag-impact-actions .blog-editor-btn-outline:focus-visible {
    border-color: rgba(233, 198, 130, 0.38);
    background: var(--color-surface-soft);
    color: var(--color-text);
}

/* html[data-theme="dark"] .product-meta, */
html[data-theme="dark"] .product-facts-grid div,
html[data-theme="dark"] .product-contact-card,
/* html[data-theme="dark"] .veja-tambem-section, */
html[data-theme="dark"] .blog-category-block:nth-child(even) {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

html[data-theme="dark"] .blog-showcase-hero {
    background:
        linear-gradient(180deg, #0b111a 0 68%, #101722 68% 100%);
}

html[data-theme="dark"] .institutional-page {
    background:
        radial-gradient(circle at 82% 0%, rgba(233, 198, 130, 0.08) 0%, rgba(233, 198, 130, 0) 32%),
        linear-gradient(180deg, #101722 0%, #0d1420 100%);
}

html[data-theme="dark"] .institutional-page > .institucional-section:first-of-type {
    background:
        linear-gradient(180deg, #0b111a 0%, #101722 100%);
    color: var(--color-text);
}

html[data-theme="dark"] .institutional-page > .institucional-section:first-of-type .title-section,
html[data-theme="dark"] .institutional-page > .institucional-section:first-of-type .text-block,
html[data-theme="dark"] .institutional-page > .institucional-section:first-of-type .text-block p,
html[data-theme="dark"] .institutional-page p,
html[data-theme="dark"] .institutional-page h3,
html[data-theme="dark"] .text-block,
html[data-theme="dark"] .text-block p,
html[data-theme="dark"] .stacked-text,
html[data-theme="dark"] .stacked-text p {
    color: var(--color-text);
}

html[data-theme="dark"] .institutional-page > .institucional-section:first-of-type .text-block p,
html[data-theme="dark"] .stacked-text p {
    color: var(--color-text-muted);
}


html[data-theme="dark"] .values-block h3 {
    color: var(--color-text);
}

html[data-theme="dark"] .gallery-item img,
html[data-theme="dark"] .stacked-image img {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .blog-showcase-page.blog-main,
html[data-theme="dark"] .blog-editor-page.create-main,
html[data-theme="dark"] .blog-article-page.article-detail-page,

html[data-theme="dark"] .blog-category-filter-section,
html[data-theme="dark"] .blog-category-sections,
html[data-theme="dark"] .blog-category-block {
    background:
        radial-gradient(circle at 82% 0%, rgba(233, 198, 130, 0.07) 0%, rgba(233, 198, 130, 0) 32%),
        linear-gradient(180deg, #101722 0%, #0d1420 100%);
    color: var(--color-text);
}

html[data-theme="dark"] .blog-section{
    background: #101722
}

html[data-theme="dark"] .blog-category-filter-section,
html[data-theme="dark"] .blog-category-block:nth-child(even) {
    background:
        linear-gradient(180deg, rgba(32, 44, 61, 0.98) 0%, rgba(24, 34, 49, 0.98) 100%);
}

html[data-theme="dark"] .blog-showcase-hero {
    background:
        linear-gradient(180deg, #0b111a 0 68%, #101722 68% 100%);
}

html[data-theme="dark"] .blog-breadcrumb,
html[data-theme="dark"] .blog-breadcrumb strong,
html[data-theme="dark"] .blog-title-group span,
html[data-theme="dark"] .blog-editor-header span {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .blog-breadcrumb a,
html[data-theme="dark"] .blog-breadcrumb span {
    color: var(--color-text);
}

html[data-theme="dark"] .blog-breadcrumb > * + *::before {
    color: rgba(170, 182, 197, 0.62);
}

html[data-theme="dark"] .blog-search-panel,
html[data-theme="dark"] .blog-newsletter-card,
html[data-theme="dark"] .blog-empty-state,
html[data-theme="dark"] .blog-results-pagination button,
html[data-theme="dark"] .blog-results-pagination-gap,
html[data-theme="dark"] .blog-category-chips button {
    border-color: rgba(233, 198, 130, 0.18);
    background: var(--color-surface-soft);
    color: var(--color-text);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .blog-search-panel button {
    color: var(--color-accent);
}

html[data-theme="dark"] .blog-category-chips button,
html[data-theme="dark"] .blog-results-pagination button {
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .blog-category-chips button:hover,
html[data-theme="dark"] .blog-category-chips button.is-active,
html[data-theme="dark"] .blog-results-pagination button:hover,
html[data-theme="dark"] .blog-results-pagination button.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

html[data-theme="dark"] .blog-newsletter-card span,
html[data-theme="dark"] .blog-newsletter-card label {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .blog-newsletter-card input {
    border-color: rgba(238, 243, 248, 0.12);
    background: #101722;
    color: var(--color-text);
}

html[data-theme="dark"] .blog-card-tag,
html[data-theme="dark"] .blog-article-tags span {
    background: rgba(233, 198, 130, 0.16);
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .blog-article-page.article-detail-page {
    background:
        linear-gradient(180deg, #0b111a 0 300px, #101722 300px 100%);
}

html[data-theme="dark"] .blog-article-cover {
    background: var(--color-surface-soft);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .blog-article-header {
    border-bottom-color: rgba(238, 243, 248, 0.16);
}

html[data-theme="dark"] .blog-showcase-hero.is-search-results {
    background:
        linear-gradient(180deg, var(--color-contrast-surface) 0 360px, #101722 360px 100%);
}

html[data-theme="dark"] .contact-item {
    border-color: rgba(233, 198, 130, 0.18);
    background: linear-gradient(180deg, rgba(32, 44, 61, 0.96) 0%, rgba(24, 34, 49, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(238, 243, 248, 0.08), 0 14px 32px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .contact-item-icon {
    background: linear-gradient(180deg, rgba(233, 198, 130, 0.28) 0%, rgba(233, 198, 130, 0.16) 100%);
    color: var(--color-accent-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .contact-item-body h4 {
    color: var(--color-text);
}

html[data-theme="dark"] .contact-item-body p {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .faq-main .faq-section,
html[data-theme="dark"] .contact-main .contact-section {
    margin-top: 0;
    background: transparent;
}

html[data-theme="dark"] .faq-main,
html[data-theme="dark"] .legal-main,
html[data-theme="dark"] .contact-main {
    background:
        radial-gradient(circle at top center, rgba(233, 198, 130, 0.09) 0%, rgba(233, 198, 130, 0) 34%),
        linear-gradient(180deg, #101722 0%, #0d1420 100%);
}

html[data-theme="dark"] .whatsapp-fab {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Hover de controles secundarios: destaque no texto/icone, nao no fundo. */
.top-header .icon-btn:hover,
.top-header .icon-btn:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible,
.close-sidebar:hover,
.close-sidebar:focus-visible,
.sidebar-nav > ul > li > .sidebar-link:hover,
.sidebar-nav > ul > li > .sidebar-link:focus-visible,
.submenu .sidebar-link:hover,
.submenu .sidebar-link:focus-visible,
.category-sort:hover .category-sort-trigger,
.category-sort:focus-within .category-sort-trigger,
.category-sort-option:hover,
.category-sort-option:focus-visible,
.category-show-more:hover,
.category-show-more:focus-visible,
.carousel-btn:hover,
.carousel-btn:focus-visible,
.bottom-icons a:hover,
.bottom-icons a:focus-visible,
.search-result-item:hover,
.search-result-item:focus-visible,
.search-results-dropdown a:hover,
.search-results-dropdown a:focus-visible,
.product-image-viewer-close:hover,
.product-image-viewer-close:focus-visible,
.admin-icon-btn:hover,
.admin-icon-btn:focus-visible,
.blog-editor-btn-light:hover,
.blog-editor-btn-light:focus-visible,
.blog-editor-btn-outline:hover,
.blog-editor-btn-outline:focus-visible,
.blog-results-pagination button:hover:not(.is-active),
.blog-results-pagination button:focus-visible:not(.is-active),
.blog-category-chips button:hover:not(.is-active),
.blog-category-chips button:focus-visible:not(.is-active),
.blog-block-toolbar button:hover,
.blog-block-toolbar button:focus-visible,
.blog-word-toolbar button:hover,
.blog-word-toolbar button:focus-visible,
.blog-icon-btn:hover,
.blog-icon-btn:focus-visible,
.admin-category-select-option:hover,
.admin-category-select-option:focus-visible,
.admin-product-image-add:hover,
.admin-product-image-add:focus-visible {
    color: var(--color-accent-hover);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

.close-sidebar:hover,
.close-sidebar:focus-visible,
.sidebar-nav > ul > li > .sidebar-link:hover,
.sidebar-nav > ul > li > .sidebar-link:focus-visible,
.submenu .sidebar-link:hover,
.submenu .sidebar-link:focus-visible,
.category-sort-option:hover,
.category-sort-option:focus-visible,
.search-result-item:hover,
.search-result-item:focus-visible,
.search-results-dropdown a:hover,
.search-results-dropdown a:focus-visible,
.admin-category-select-option:hover,
.admin-category-select-option:focus-visible {
    background-color: transparent;
}

.sidebar-link.is-current:hover,
.sidebar-link.is-current:focus-visible,
.sidebar-link.is-current:active {
    background: var(--color-contrast-surface);
    color: var(--color-accent-hover);
}

.submenu .sidebar-link.is-current:hover,
.submenu .sidebar-link.is-current:focus-visible,
.submenu .sidebar-link.is-current:active {
    background-color: rgba(46, 59, 78, 0.16);
    color: var(--color-accent-hover);
}

.sidebar-link:hover .sidebar-link-icon,
.sidebar-link:hover .sidebar-link-chevron,
.sidebar-link:focus-visible .sidebar-link-icon,
.sidebar-link:focus-visible .sidebar-link-chevron,
.bottom-icons a:hover svg,
.bottom-icons a:focus-visible svg,
.product-image-viewer-close:hover i,
.product-image-viewer-close:focus-visible i,
.admin-icon-btn:hover i,
.admin-icon-btn:focus-visible i {
    color: inherit;
}

.category-show-more:hover,
.category-show-more:focus-visible {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.96);
}

.bottom-icons a:hover,
.bottom-icons a:focus-visible,
.bottom-icons a[aria-label="Facebook"]:hover,
.bottom-icons a[aria-label="Facebook"]:focus-visible,
.bottom-icons a[aria-label="Instagram"]:hover,
.bottom-icons a[aria-label="Instagram"]:focus-visible,
.bottom-icons a[aria-label="WhatsApp"]:hover,
.bottom-icons a[aria-label="WhatsApp"]:focus-visible,
.bottom-icons .footer-admin-link:hover,
.bottom-icons .footer-admin-link:focus-visible {
    background: #ffffff;
}

.product-image-viewer-close:hover,
.product-image-viewer-close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

.blog-editor-btn-light:hover,
.blog-editor-btn-light:focus-visible,
.blog-editor-btn-outline:hover,
.blog-editor-btn-outline:focus-visible,
.blog-results-pagination button:hover:not(.is-active),
.blog-results-pagination button:focus-visible:not(.is-active),
.blog-category-chips button:hover:not(.is-active),
.blog-category-chips button:focus-visible:not(.is-active),
.admin-product-image-add:hover,
.admin-product-image-add:focus-visible {
    background: #ffffff;
}

.blog-block-toolbar button:hover,
.blog-block-toolbar button:focus-visible,
.blog-word-toolbar button:hover,
.blog-word-toolbar button:focus-visible,
.blog-icon-btn:hover,
.blog-icon-btn:focus-visible {
    background: #f8fafc;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
    background: rgba(32, 44, 61, 0.82);
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .language-select {
    background: rgba(32, 44, 61, 0.86);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-text);
}

html[data-theme="dark"] .admin-site-highlight-row,
html[data-theme="dark"] .admin-site-image-row,
html[data-theme="dark"] .admin-site-image-preview,
html[data-theme="dark"] .admin-site-subtabs,
html[data-theme="dark"] .admin-hero-mode-button,
html[data-theme="dark"] .admin-site-media-card,
html[data-theme="dark"] .admin-site-media-dropzone,
html[data-theme="dark"] .admin-site-media-preview {
    border-color: rgba(238, 243, 248, 0.1);
    background: #101722;
}

html[data-theme="dark"] .admin-hero-mode-button {
    color: var(--color-text);
}

html[data-theme="dark"] .admin-hero-mode-button.is-active {
    border-color: rgba(233, 198, 130, 0.54);
    background: color-mix(in srgb, var(--color-accent) 24%, #101722 76%);
    color: var(--color-text);
}

html[data-theme="dark"] .admin-site-slot {
    background: color-mix(in srgb, var(--color-accent) 18%, #101722 82%);
}

html[data-theme="dark"] .admin-site-actions {
    border-color: rgba(238, 243, 248, 0.1);
    background: rgba(16, 23, 34, 0.92);
}

html[data-theme="dark"] .admin-site-subtabs button.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

html[data-theme="dark"] .admin-site-media-preview {
    background: #0b111b;
}

html[data-theme="dark"] .admin-site-drag-handle {
    border-color: rgba(238, 243, 248, 0.12);
    background: #172132;
    color: rgba(220, 228, 238, 0.82);
}

html[data-theme="dark"] .admin-site-media-current {
    color: rgba(170, 182, 197, 0.82);
}

html[data-theme="dark"] .close-sidebar:hover,
html[data-theme="dark"] .close-sidebar:focus-visible,
html[data-theme="dark"] .sidebar-nav > ul > li > .sidebar-link:hover,
html[data-theme="dark"] .sidebar-nav > ul > li > .sidebar-link:focus-visible,
html[data-theme="dark"] .submenu .sidebar-link:hover,
html[data-theme="dark"] .submenu .sidebar-link:focus-visible,
html[data-theme="dark"] .category-sort-option:hover,
html[data-theme="dark"] .category-sort-option:focus-visible,
html[data-theme="dark"] .search-result-item:hover,
html[data-theme="dark"] .search-result-item:focus-visible,
html[data-theme="dark"] .search-results-dropdown a:hover,
html[data-theme="dark"] .search-results-dropdown a:focus-visible {
    background-color: transparent;
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .category-show-more:hover,
html[data-theme="dark"] .category-show-more:focus-visible,
html[data-theme="dark"] .carousel-btn:hover,
html[data-theme="dark"] .carousel-btn:focus-visible {
    background: linear-gradient(180deg, #202c3d 0%, #182231 100%);
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .bottom-icons a:hover,
html[data-theme="dark"] .bottom-icons a:focus-visible,
html[data-theme="dark"] .bottom-icons a[aria-label="Facebook"]:hover,
html[data-theme="dark"] .bottom-icons a[aria-label="Facebook"]:focus-visible,
html[data-theme="dark"] .bottom-icons a[aria-label="Instagram"]:hover,
html[data-theme="dark"] .bottom-icons a[aria-label="Instagram"]:focus-visible,
html[data-theme="dark"] .bottom-icons a[aria-label="WhatsApp"]:hover,
html[data-theme="dark"] .bottom-icons a[aria-label="WhatsApp"]:focus-visible,
html[data-theme="dark"] .bottom-icons .footer-admin-link:hover,
html[data-theme="dark"] .bottom-icons .footer-admin-link:focus-visible {
    background: var(--color-surface-soft);
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .admin-icon-btn:hover,
html[data-theme="dark"] .admin-icon-btn:focus-visible,
html[data-theme="dark"] .blog-editor-btn-light:hover,
html[data-theme="dark"] .blog-editor-btn-light:focus-visible,
html[data-theme="dark"] .blog-editor-btn-outline:hover,
html[data-theme="dark"] .blog-editor-btn-outline:focus-visible,
html[data-theme="dark"] .blog-results-pagination button:hover:not(.is-active),
html[data-theme="dark"] .blog-results-pagination button:focus-visible:not(.is-active),
html[data-theme="dark"] .blog-category-chips button:hover:not(.is-active),
html[data-theme="dark"] .blog-category-chips button:focus-visible:not(.is-active),
html[data-theme="dark"] .blog-block-toolbar button:hover,
html[data-theme="dark"] .blog-block-toolbar button:focus-visible,
html[data-theme="dark"] .blog-word-toolbar button:hover,
html[data-theme="dark"] .blog-word-toolbar button:focus-visible,
html[data-theme="dark"] .blog-icon-btn:hover,
html[data-theme="dark"] .blog-icon-btn:focus-visible,
html[data-theme="dark"] .admin-category-select-option:hover,
html[data-theme="dark"] .admin-category-select-option:focus-visible,
html[data-theme="dark"] .admin-product-image-add:hover,
html[data-theme="dark"] .admin-product-image-add:focus-visible {
    background: var(--color-surface);
    color: var(--color-accent-hover);
}

html[data-theme="dark"] .blog-block-toolbar button:hover,
html[data-theme="dark"] .blog-block-toolbar button:focus-visible,
html[data-theme="dark"] .blog-word-toolbar button:hover,
html[data-theme="dark"] .blog-word-toolbar button:focus-visible,
html[data-theme="dark"] .blog-results-pagination button:hover:not(.is-active),
html[data-theme="dark"] .blog-results-pagination button:focus-visible:not(.is-active),
html[data-theme="dark"] .blog-category-chips button:hover:not(.is-active),
html[data-theme="dark"] .blog-category-chips button:focus-visible:not(.is-active),
html[data-theme="dark"] .admin-category-select-option:hover,
html[data-theme="dark"] .admin-category-select-option:focus-visible {
    background: var(--color-surface-soft);
}

/* Excecao do footer: icones sociais mantem a cor propria da rede no hover. */
.bottom-icons a[aria-label="Facebook"]:hover,
.bottom-icons a[aria-label="Facebook"]:focus-visible,
html[data-theme="dark"] .bottom-icons a[aria-label="Facebook"]:hover,
html[data-theme="dark"] .bottom-icons a[aria-label="Facebook"]:focus-visible {
    background: #1877f2;
    color: #ffffff;
}

.bottom-icons a[aria-label="Instagram"]:hover,
.bottom-icons a[aria-label="Instagram"]:focus-visible,
html[data-theme="dark"] .bottom-icons a[aria-label="Instagram"]:hover,
html[data-theme="dark"] .bottom-icons a[aria-label="Instagram"]:focus-visible {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #8134af 100%);
    color: #ffffff;
}

.bottom-icons a[aria-label="WhatsApp"]:hover,
.bottom-icons a[aria-label="WhatsApp"]:focus-visible,
html[data-theme="dark"] .bottom-icons a[aria-label="WhatsApp"]:hover,
html[data-theme="dark"] .bottom-icons a[aria-label="WhatsApp"]:focus-visible {
    background: #25d366;
    color: #ffffff;
}

.bottom-icons a[aria-label="Facebook"]:hover svg,
.bottom-icons a[aria-label="Facebook"]:focus-visible svg,
.bottom-icons a[aria-label="Instagram"]:hover svg,
.bottom-icons a[aria-label="Instagram"]:focus-visible svg,
.bottom-icons a[aria-label="WhatsApp"]:hover svg,
.bottom-icons a[aria-label="WhatsApp"]:focus-visible svg {
    color: #ffffff;
}

/* --- Captured Analytics Panel --- */
.analytics-page {
    min-height: 100vh;
    padding: 132px 0 72px;
    background:
        radial-gradient(circle at top right, rgba(233, 198, 130, 0.10) 0%, rgba(233, 198, 130, 0) 34%),
        linear-gradient(180deg, #f6f8fb 0%, #eef2f6 100%);
}

.analytics-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.analytics-header > div:first-child {
    text-align: left;
}

.analytics-header h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 2.4rem;
    line-height: 1.08;
    text-align: left;
}

.analytics-header p {
    max-width: 700px;
    margin: 10px 0 0;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.analytics-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.admin-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.analytics-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.analytics-btn:hover,
.analytics-btn:focus-visible {
    transform: translateY(-1px);
}

.analytics-btn-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.analytics-btn-light {
    background: #ffffff;
    color: var(--color-text);
    border-color: var(--color-border);
}

.analytics-status {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(36, 48, 65, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-text-muted);
    font-weight: 700;
}

.analytics-status.is-error {
    border-color: rgba(176, 58, 46, 0.35);
    background: rgba(176, 58, 46, 0.08);
    color: #8a2e25;
}

.analytics-scope {
    display: grid;
    grid-template-columns: minmax(240px, 360px);
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(36, 48, 65, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.analytics-scope-field {
    display: grid;
    gap: 6px;
    position: relative;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.analytics-select-wrap {
    position: relative;
    display: block;
}

.analytics-select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.analytics-select-control {
    appearance: none;
    -webkit-appearance: none;
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0 42px 0 12px;
    background: #ffffff;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.analytics-select-control span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-scope select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.analytics-select-control:hover,
.analytics-select-control:focus {
    border-color: var(--color-accent);
    outline: none;
}

.analytics-select-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 40;
    display: none;
    width: 100%;
    max-width: 100%;
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.20);
    scrollbar-color: rgba(36, 48, 65, 0.32) transparent;
    scrollbar-width: thin;
}

.analytics-select-wrap.is-open .analytics-select-menu {
    display: grid;
    gap: 4px;
}

.analytics-select-option {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 9px 10px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.analytics-select-option:hover,
.analytics-select-option:focus-visible {
    outline: none;
    background: rgba(233, 198, 130, 0.18);
    color: #111827;
}

.analytics-select-option[aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 900;
}

.analytics-scope p {
    margin: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-weight: 800;
    line-height: 1.4;
}

.analytics-scope p.is-user {
    border-color: rgba(36, 48, 65, 0.14);
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-text);
}

.analytics-scope p.is-general {
    border-color: rgba(36, 48, 65, 0.12);
    background: var(--color-surface-soft);
}

.analytics-users-card {
    margin-bottom: 18px;
}

.analytics-users-head {
    align-items: flex-start;
}

.analytics-users-head > div {
    display: grid;
    gap: 4px;
}

.analytics-all-users-btn {
    min-height: 38px;
    white-space: nowrap;
}

.analytics-all-users-btn.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.analytics-scope-summary {
    margin: 0 0 14px;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid rgba(36, 48, 65, 0.12);
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-weight: 800;
    line-height: 1.4;
}

.analytics-scope-summary.is-user {
    border-color: rgba(36, 48, 65, 0.14);
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-text);
}

.analytics-scope-summary.is-general {
    border-color: rgba(36, 48, 65, 0.12);
    background: var(--color-surface-soft);
}

.analytics-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.analytics-metric,
.analytics-card {
    border: 1px solid rgba(36, 48, 65, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.analytics-metric {
    min-height: 118px;
    padding: 16px;
    display: grid;
    gap: 8px;
    align-content: center;
}

.analytics-metric span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-accent);
}

.analytics-metric strong {
    color: var(--color-text);
    font-size: 1.8rem;
    line-height: 1;
}

.analytics-metric small {
    color: var(--color-text-muted);
    font-weight: 800;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.analytics-grid-wide {
    align-items: start;
}

.analytics-card {
    padding: 18px;
    min-width: 0;
}

.analytics-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.analytics-card-head h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.08rem;
}

.analytics-card-head span {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.analytics-list {
    display: grid;
    gap: 10px;
}

.analytics-list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.analytics-list-item strong {
    display: block;
    color: var(--color-text);
    font-size: 0.94rem;
}

.analytics-list-item span {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.analytics-list-item em {
    flex: 0 0 auto;
    color: var(--color-accent);
    font-style: normal;
    font-weight: 900;
}

.analytics-split-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.analytics-split-list h3 {
    margin: 0 0 10px;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    text-transform: uppercase;
}

.analytics-table-wrap {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.analytics-table th,
.analytics-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    color: var(--color-text);
    font-size: 0.9rem;
}

.analytics-table th {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.analytics-table td strong {
    color: var(--color-text);
}

.analytics-users-table {
    min-width: 760px;
}

.analytics-user-row {
    cursor: pointer;
}

.analytics-user-row:hover td {
    background: rgba(233, 198, 130, 0.10);
}

.analytics-user-row-button {
    max-width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-accent-hover);
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.analytics-user-row-button:hover,
.analytics-user-row-button:focus-visible {
    color: var(--color-accent);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.analytics-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.analytics-filters label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.analytics-filters input,
.analytics-filters select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0 12px;
    background: #ffffff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    text-transform: none;
}

.analytics-toggle {
    display: inline-flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-text) !important;
    text-transform: none !important;
}

.analytics-toggle input {
    width: 16px;
    min-height: 16px;
    accent-color: var(--color-accent);
}

.analytics-user-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.analytics-user-select {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
}

.analytics-table tr.is-selected td {
    background: rgba(45, 125, 84, 0.07);
}

.analytics-user-detail {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 14px;
    min-height: 260px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.analytics-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.analytics-detail-head span {
    color: var(--color-text);
    font-weight: 900;
}

.analytics-detail-head strong {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.analytics-detail-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.analytics-detail-list div {
    display: grid;
    gap: 3px;
}

.analytics-detail-list dt,
.analytics-detail-section h3 {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.analytics-detail-list dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 800;
}

.analytics-detail-section ul {
    display: grid;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.analytics-detail-section li {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.analytics-detail-section li strong {
    color: var(--color-text);
}

.analytics-detail-section li span {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.analytics-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-weight: 900;
    font-size: 0.78rem;
}

.analytics-pill.is-ok {
    background: rgba(45, 125, 84, 0.12);
    color: #2d7d54;
}

.analytics-pill.is-denied {
    background: rgba(176, 58, 46, 0.12);
    color: #9a3328;
}

.analytics-empty,
.analytics-empty-cell {
    color: var(--color-text-muted);
    font-weight: 700;
}

.analytics-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.analytics-page-tab {
    min-width: 36px;
    min-height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-text);
    font-weight: 900;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.analytics-page-tab:hover,
.analytics-page-tab:focus-visible {
    transform: translateY(-1px);
    border-color: var(--color-accent);
}

.analytics-page-tab.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}

.analytics-page-gap {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--color-text-muted);
    font-weight: 900;
}

body:has(.analytics-page) .whatsapp-fab {
    display: none;
}

html[data-theme="dark"] .analytics-page {
    background:
        radial-gradient(circle at top right, rgba(233, 198, 130, 0.07) 0%, rgba(233, 198, 130, 0) 34%),
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-soft) 100%);
}

html[data-theme="dark"] .analytics-metric,
html[data-theme="dark"] .analytics-card,
html[data-theme="dark"] .analytics-status,
html[data-theme="dark"] .analytics-scope {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .analytics-btn-light,
html[data-theme="dark"] .analytics-list-item,
html[data-theme="dark"] .analytics-page-tab,
html[data-theme="dark"] .analytics-select-control,
html[data-theme="dark"] .analytics-select-menu,
html[data-theme="dark"] .analytics-scope select,
html[data-theme="dark"] .analytics-filters input,
html[data-theme="dark"] .analytics-filters select,
html[data-theme="dark"] .analytics-toggle,
html[data-theme="dark"] .analytics-user-detail,
html[data-theme="dark"] .analytics-detail-section li {
    background: rgba(255, 255, 255, 0.122);
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .analytics-select-menu {
    background: #202836;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .analytics-select-option {
    color: #f7f1e7;
}

html[data-theme="dark"] .analytics-select-option:hover,
html[data-theme="dark"] .analytics-select-option:focus-visible {
    background: rgba(233, 198, 130, 0.16);
    color: #fff8eb;
}

html[data-theme="dark"] .analytics-select-option[aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

html[data-theme="dark"] .analytics-scope p.is-general {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .analytics-scope p.is-user {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .analytics-page-tab.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}

html[data-theme="dark"] .analytics-all-users-btn.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}

html[data-theme="dark"] .analytics-scope-summary.is-general {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .analytics-scope-summary.is-user {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .analytics-user-row:hover td {
    background: rgba(233, 198, 130, 0.10);
}

html[data-theme="dark"] .analytics-table th,
html[data-theme="dark"] .analytics-table td {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

@media (max-width: 1040px) {
    .analytics-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .analytics-filters,
    .analytics-user-layout,
    .analytics-scope {
        grid-template-columns: 1fr;
    }

    .analytics-user-detail {
        position: static;
    }
}

@media (max-width: 700px) {
    .analytics-page {
        padding-top: 112px;
    }

    .analytics-header {
        display: grid;
    }

    .analytics-header h1 {
        font-size: 2rem;
    }

    .analytics-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .analytics-users-head {
        display: grid;
    }

    .analytics-btn {
        width: 100%;
    }

    .analytics-metrics,
    .analytics-split-list {
        grid-template-columns: 1fr;
    }

    .analytics-card {
        padding: 14px;
    }

    .analytics-card-head {
        align-items: flex-start;
    }
}

.data-consent-banner {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 5200;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(36, 48, 65, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--color-text);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.data-consent-banner.is-expanded {
    align-items: start;
}

.data-consent-copy {
    min-width: 0;
}

.data-consent-copy strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
    color: var(--color-text);
}

.data-consent-copy p {
    max-width: 760px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.data-consent-copy a {
    display: inline-block;
    margin-top: 8px;
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: underline;
}

.data-consent-copy p a {
    display: inline;
    margin-top: 0;
}

.data-consent-preferences {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.data-consent-preferences[hidden] {
    display: none;
}

.data-consent-preferences label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
    font-weight: 700;
    font-size: 0.86rem;
}

.data-consent-preferences input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.data-consent-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-width: 132px;
}

.data-consent-actions button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.data-consent-actions button:hover,
.data-consent-actions button:focus-visible {
    transform: translateY(-1px);
}

.data-consent-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.data-consent-secondary,
.data-consent-link {
    background: #ffffff;
    color: var(--color-text);
    border-color: var(--color-border) !important;
}

.data-consent-link {
    background: transparent;
}

.legal-preferences-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 18px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-text);
    font-weight: 800;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.legal-preferences-button:hover,
.legal-preferences-button:focus-visible {
    transform: translateY(-1px);
    border-color: var(--color-accent);
}

html[data-theme="dark"] .data-consent-banner {
    background: rgba(20, 26, 34, 0.98);
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .data-consent-secondary,
html[data-theme="dark"] .data-consent-link {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}

html[data-theme="dark"] .legal-preferences-button {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}

@media (max-width: 760px) {
    .data-consent-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        grid-template-columns: 1fr;
        max-height: calc(100dvh - 24px);
        overflow: auto;
        padding: 16px;
    }

    .data-consent-actions {
        display: grid;
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .data-consent-actions button {
        width: 100%;
    }
}

/* --- Página institucional editorial --- */
.institutional-page {
    --institutional-page-bg: #f6f2ea;
    --institutional-hero-top: #f7f4ee;
    --institutional-hero-mid: #e7edf0;
    --institutional-band: #e9c682;
    --institutional-text: #273241;
    --institutional-muted: #596575;
    --institutional-quote: #273241;
    --institutional-quote-mark: #2e3b4e;
    --institutional-corner: rgba(159, 119, 42, 0.78);
    --institutional-photo-border: #fff7e4;
    --institutional-photo-shadow: rgba(71, 84, 103, 0.28);
    --institutional-history-text: #273241;
    --institutional-values-bg: #eef3f4;
    --institutional-values-text: #273241;
    --institutional-values-muted: #667386;
    --institutional-evolution-bg: #f8f8ff;
    --institutional-evolution-text: #273241;
    --institutional-evolution-muted: #4f5d6d;
    --institutional-callout-bg: #e9c682;
    --institutional-callout-text: #273241;
    background: var(--institutional-page-bg);
    color: var(--institutional-text);
    overflow: hidden;
}

html[data-theme="dark"] .institutional-page {
    --institutional-page-bg: #171c23;
    --institutional-hero-top: #030508;
    --institutional-hero-mid: #111821;
    --institutional-band: #e9c682;
    --institutional-text: #f8f8ff;
    --institutional-muted: rgba(248, 248, 255, 0.72);
    --institutional-quote: #ffffff;
    --institutional-quote-mark: #ffffff;
    --institutional-corner: rgba(233, 198, 130, 0.72);
    --institutional-photo-border: #e4ddbf;
    --institutional-photo-shadow: rgba(0, 0, 0, 0.36);
    --institutional-history-text: #273241;
    --institutional-values-bg: #20252e;
    --institutional-values-text: #f8f8ff;
    --institutional-values-muted: rgba(248, 248, 255, 0.62);
    --institutional-evolution-bg: #171c23;
    --institutional-evolution-text: #f8f8ff;
    --institutional-evolution-muted: rgba(248, 248, 255, 0.82);
    --institutional-callout-bg: #e9c682;
    --institutional-callout-text: #273241;
    background: var(--institutional-page-bg);
    color: var(--institutional-text);
}

.institutional-story-hero {
    position: relative;
    padding: 86px 20px 0;
    background:
        linear-gradient(180deg, var(--institutional-hero-top) 0%, var(--institutional-hero-mid) 74%, var(--institutional-band) 74%, var(--institutional-band) 100%);
}

.institutional-story-inner {
    width: min(1180px, 94vw);
    min-height: 780px;
    margin: 0 auto;
    position: relative;
}

.institutional-story-copy {
    position: absolute;
    top: 34px;
    left: clamp(0px, 2vw, 28px);
    z-index: 5;
    width: min(390px, 36vw);
    min-height: 190px;
    display: grid;
    place-items: center;
    padding: 32px 36px 28px;
    text-align: center;
}

.institutional-story-copy::before,
.institutional-story-copy::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border-color: var(--institutional-corner);
    pointer-events: none;
}

.institutional-story-copy::before {
    top: 0;
    left: 0;
    border-top: 2px solid var(--institutional-corner);
    border-left: 2px solid var(--institutional-corner);
}

.institutional-story-copy::after {
    right: 0;
    bottom: 0;
    border-right: 2px solid var(--institutional-corner);
    border-bottom: 2px solid var(--institutional-corner);
}

.institutional-kicker {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.institutional-story-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    color: var(--color-accent);
}

.institutional-story-quote {
    position: relative;
    margin: 0;
    padding: 28px 0 0;
    color: var(--institutional-quote);
    font-size: clamp(0.92rem, 1.35vw, 1.1rem);
    font-weight: 900;
    line-height: 1.28;
    text-align: center;
}

.institutional-story-quote::before {
    content: "“";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--institutional-quote-mark);
    font-size: 4.6rem;
    line-height: 1;
}

.institutional-photo-collage {
    position: relative;
    min-height: 880px;
    isolation: isolate;
}

.institutional-top-photo {
    position: absolute;
    margin: 0;
    border: 8px solid var(--institutional-photo-border);
    background: var(--institutional-photo-border);
    box-shadow: 0 18px 42px var(--institutional-photo-shadow);
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
}

.institutional-top-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.institutional-top-photo-main {
    left: clamp(14px, 4vw, 64px);
    bottom: 18px;
    z-index: 4;
    width: min(292px, 25%);
    aspect-ratio: 0.78 / 1;
    transform: rotate(-4deg);
    height: 500px;
}

.institutional-top-photo-side {
    top: 40px;
    right: clamp(30px, 4vw, 68px);
    z-index: 3;
    width: min(440px, 39%);
    aspect-ratio: 1.45 / 1;
    transform: rotate(-3deg);
}

.institutional-top-photo-accent {
    top: 340px;
    right: 0;
    z-index: 2;
    width: min(360px, 31%);
    aspect-ratio: 1.4 / 1;
    transform: rotate(7deg);
}

.institutional-story-hero.photos-waapi-ready .institutional-top-photo {
    opacity: 1;
}

.institutional-history-card {
    position: relative;
    z-index: 4;
    width: min(690px, 54vw);
    margin: -238px calc(max((100vw - 1180px) / 2, 3vw) + 34px) 0 auto;
    padding: 34px 0 58px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    color: var(--institutional-history-text);
}

.institutional-history-card p {
    margin: 0;
    color: var(--institutional-history-text) !important;
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 700;
    line-height: 1.55;
}

.institutional-values-section {
    padding: 46px 20px 54px;
    background: var(--institutional-values-bg) !important;
    color: var(--institutional-values-text) !important;
}

.institutional-values-section .diferenciais-grid {
    width: min(1040px, 92vw);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(22px, 5vw, 72px);
    align-items: start;
}

.institutional-values-section .diferencial-item {
    max-width: none;
    min-height: 118px;
    gap: 12px;
    justify-content: start;
}

.institutional-values-section .diferencial-item img,
.institutional-values-section .diferencial-icon {
    width: 70px;
    height: 70px;
}

.institutional-values-section .diferencial-icon {
    display: block;
    border: 0;
    border-radius: 0;
    transition: opacity 320ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
}

.institutional-values-section .diferencial-item h4 {
    max-width: 150px;
    margin: 0 auto;
    color: var(--institutional-values-text);
    font-size: clamp(0.72rem, 0.88vw, 0.84rem);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
}

.institutional-values-section .diferencial-item p {
    display: none;
}

.diferenciais-section.diferenciais-ready .diferencial-item .diferencial-icon {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
}

.diferenciais-section.diferenciais-ready .diferencial-item.is-image-visible .diferencial-icon {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.institutional-principles-section {
    padding: clamp(54px, 6.5vw, 86px) 20px;
    background: var(--institutional-values-bg) !important;
    color: var(--institutional-values-text) !important;
}

.institutional-principles-grid {
    width: min(1180px, 94vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.institutional-principle-card {
    position: relative;
    min-height: 190px;
    padding: 0 clamp(28px, 4vw, 58px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 26px;
    justify-items: center;
    color: var(--institutional-values-text);
}

.institutional-principle-card + .institutional-principle-card::before {
    content: "";
    position: absolute;
    top: 80px;
    bottom: 16px;
    left: 0;
    width: 1px;
    background: rgba(39, 50, 65, 0.14);
}

.institutional-principle-heading {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
}

.institutional-principle-icon {
    flex: 0 0 clamp(42px, 4.8vw, 58px);
    width: clamp(42px, 4.8vw, 58px);
    height: clamp(42px, 4.8vw, 58px);
    color: var(--institutional-values-text);
    stroke: currentColor;
    stroke-width: 4.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform-origin: center;
    transition: opacity 560ms ease, transform 760ms cubic-bezier(.16, 1, .3, 1);
}

.institutional-principle-heading h2 {
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: var(--institutional-values-text);
    font-size: clamp(2.45rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    clip-path: inset(0 0 0 0);
    transform-origin: left center;
    transition: opacity 620ms ease, max-width 860ms cubic-bezier(.16, 1, .3, 1), clip-path 860ms cubic-bezier(.16, 1, .3, 1);
}

.institutional-principle-card p {
    max-width: 330px;
    margin: 0;
    color: var(--institutional-values-muted) !important;
    font-size: clamp(1.05rem, 1.48vw, 1.34rem);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    transition: opacity 700ms ease, clip-path 980ms cubic-bezier(.16, 1, .3, 1), transform 980ms cubic-bezier(.16, 1, .3, 1);
}

.institutional-principles-section.principles-ready .institutional-principle-icon {
    opacity: 0;
    transform: translateX(0) scale(0.84);
}

.institutional-principles-section.principles-ready .institutional-principle-heading h2 {
    max-width: 0;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}

.institutional-principles-section.principles-ready .institutional-principle-card p {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-16px);
}

.institutional-principle-card.is-icon-visible .institutional-principle-icon {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.institutional-principle-card.is-title-visible .institutional-principle-heading h2 {
    max-width: 260px;
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.institutional-principles-section.principles-ready .institutional-principle-card.is-text-visible p {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

.institutional-evolution-section {
    padding: clamp(64px, 9vw, 120px) 20px;
    background: var(--institutional-evolution-bg);
    color: var(--institutional-evolution-text);
}

.institutional-evolution-inner {
    width: min(1180px, 94vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(320px, 1.12fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
}

.institutional-evolution-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.institutional-evolution-media img {
    width: 100%;
    min-height: 360px;
    height: 100%;
    display: block;
    object-fit: cover;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

.institutional-evolution-media img:nth-child(1),
.institutional-evolution-media img:nth-child(2) {
    aspect-ratio: 1 / 1.28;
}

.institutional-evolution-media img:nth-child(3) {
    grid-column: 1 / -1;
    min-height: 300px;
    aspect-ratio: 2.08 / 1;
}

.institutional-evolution-copy {
    display: grid;
    gap: clamp(24px, 4vw, 46px);
    justify-items: center;
}

.institutional-evolution-copy h2 {
    max-width: 680px;
    margin: 0;
    color: var(--institutional-evolution-text);
    font-size: clamp(2rem, 4vw, 4.35rem);
    line-height: 1.08;
    text-align: center;
}

.institutional-evolution-callout {
    max-width: 520px;
    padding: 26px clamp(24px, 4vw, 46px);
    background: var(--institutional-callout-bg);
    color: var(--institutional-callout-text);
    font-size: clamp(1rem, 1.4vw, 1.22rem);
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
}

.institutional-evolution-copy p {
    max-width: 610px;
    margin: 0;
    color: var(--institutional-evolution-muted) !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.82;
}

@media (max-width: 1080px) {
    .institutional-evolution-inner {
        grid-template-columns: 1fr;
    }

    .institutional-story-copy {
        width: min(390px, 42vw);
    }

    .institutional-photo-collage {
        min-height: 680px;
    }

    .institutional-top-photo-main {
        width: min(250px, 25%);
    }

    .institutional-top-photo-side {
        right: 18px;
        width: min(390px, 42%);
    }

    .institutional-top-photo-accent {
        top: 302px;
        width: min(315px, 34%);
    }

    .institutional-history-card {
        width: min(620px, 58vw);
        margin-top: -210px;
        margin-right: 3vw;
    }

    .institutional-values-section .diferenciais-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .institutional-principles-grid {
        width: min(100%, 900px);
    }

    .institutional-principle-card {
        padding: 0 clamp(18px, 3vw, 34px);
    }

    .institutional-principle-heading {
        gap: 12px;
    }

    .institutional-principle-heading h2 {
        font-size: clamp(2rem, 4.6vw, 2.75rem);
    }

    .institutional-principle-card p {
        font-size: clamp(0.98rem, 1.9vw, 1.16rem);
    }
}

@media (max-width: 760px) {
    .institutional-story-hero {
        padding: 92px 16px 0;
        background:
            linear-gradient(180deg, var(--institutional-hero-top) 0%, var(--institutional-hero-mid) 68%, var(--institutional-band) 68%, var(--institutional-band) 100%);
    }

    .institutional-story-inner {
        width: min(100%, 560px);
        min-height: auto;
    }

    .institutional-evolution-inner {
        width: min(100%, 560px);
        gap: 28px;
    }

    .institutional-story-copy {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 390px);
        min-height: 166px;
        margin: 0 auto 18px;
        padding: 30px 28px 24px;
    }

    .institutional-story-title,
    .institutional-evolution-copy h2 {
        text-align: left;
    }

    .institutional-story-quote {
        padding: 24px 0 0;
        font-size: 0.9rem;
    }

    .institutional-photo-collage {
        min-height: 610px;
    }

    .institutional-top-photo {
        border-width: 6px;
    }

    .institutional-top-photo-main {
        width: 42%;
        left: 2%;
        bottom: 0;
        height: auto;
        aspect-ratio: 0.78 / 1;
    }

    .institutional-top-photo-side {
        width: 64%;
        right: 1%;
        top: 10px;
        height: auto;
    }

    .institutional-top-photo-accent {
        width: 54%;
        right: 0;
        top: 276px;
        bottom: auto;
        height: auto;
    }

    .institutional-history-card {
        width: 100%;
        margin: 0 auto;
        padding: 58px 0 46px;
        grid-template-columns: 1fr;
    }

    .institutional-values-section .diferenciais-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }

    .institutional-values-section .diferencial-item {
        min-height: 132px;
    }

    .institutional-principles-section {
        padding: 58px 16px 64px;
    }

    .institutional-principles-grid {
        width: min(100%, 560px);
        grid-template-columns: 1fr;
        gap: 0;
    }

    .institutional-principle-card {
        min-height: 0;
        padding: 34px 0;
        gap: 20px;
    }

    .institutional-principle-card + .institutional-principle-card::before {
        top: 0;
        bottom: auto;
        left: 50%;
        width: min(240px, 64vw);
        height: 1px;
        transform: translateX(-50%);
    }

    .institutional-principle-heading {
        min-height: 50px;
    }

    .institutional-principle-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        stroke-width: 4.2;
    }

    .institutional-principle-heading h2 {
        font-size: clamp(2.25rem, 11vw, 3rem);
    }

    .institutional-principle-card p {
        max-width: 360px;
        font-size: 1.08rem;
    }

    .institutional-evolution-media {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .institutional-evolution-media img {
        min-height: 340px;
    }

    .institutional-evolution-callout {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .institutional-story-hero {
        background:
            linear-gradient(180deg, var(--institutional-hero-top) 0%, var(--institutional-hero-mid) 62%, var(--institutional-band) 62%, var(--institutional-band) 100%);
    }

    .institutional-values-section .diferenciais-grid {
        grid-template-columns: 1fr;
    }

    .institutional-photo-collage {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        margin: 6px auto 22px;
    }

    .institutional-top-photo {
        position: relative;
        inset: auto;
        width: 100%;
        border-width: 5px;
        opacity: 1;
        transform: none !important;
    }

    .institutional-top-photo-main {
        grid-row: span 2;
        width: 100%;
        aspect-ratio: 0.78 / 1;
    }

    .institutional-top-photo-side,
    .institutional-top-photo-accent {
        width: 100%;
        aspect-ratio: 1.1 / 1;
    }

    .institutional-history-card {
        padding-top: 42px;
    }

    .institutional-evolution-media {
        grid-template-columns: 1fr;
    }

    .institutional-evolution-media img:nth-child(3) {
        grid-column: auto;
        aspect-ratio: 1.35 / 1;
    }

    .institutional-evolution-media img {
        min-height: 280px;
    }
}