/**
 * Marcas de Quem Decide — apenas cores e identidade visual.
 * Layout, destaque, tipografia e componentes vêm do GE (css.css + css_responsivo).
 */

@import url('//fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i,800i');
@import url('https://d.jornaldocomercio.com/ge2019/fonts/degular-display/degular-display.css');
@import url('https://d.jornaldocomercio.com/ge2019/fonts/icons8/css/styles.min.css');
@import url('//fonts.googleapis.com/css?family=Roboto:300,500');
@import url('https://d.jornaldocomercio.com/assets/materialdesignicons/css/materialdesignicons.min.css');

body.marcas-site {
    --marcas-ink: #0f141f;
    --marcas-deep: #181f39;
    /* var6 no site pai: hover / detalhes (mais clara que var5) */
    --marcas-deep-mid: #283473;
    --marcas-accent: #283473;
    --marcas-accent-hover: #283473;
    /* var5: base (mais escura) — botões, bordas fortes */
    --marcas-accent-muted: #181f39;
    --marcas-destaque-faixa: #d8dce8;
    /* overrides via site pai (inc.marcas-theme-inline.php) */
    --marcas-destaque-titulo-cor: #ffffff; /* var3 típico */
    --marcas-destaque-faixa-bg: #181f39;  /* var5 */
    --marcas-snake-bg: #181f39;           /* var5 */
    --marcas-footer-bg: #181f39;          /* var5 */
    /* Gradientes da galeria: padrão; inc.marcas-theme-inline.php redefine com var do site pai */
    --marcas-galeria-a: #0a1020;
    --marcas-galeria-b: #121a33;
    --marcas-galeria-c: #0d1428;
    --marcas-surface: #ffffff;
    background-color: var(--marcas-surface);
    color: var(--marcas-ink);
}

body.marcas-site .site-container {
    overflow-x: hidden;
}

/* Páginas internas (editoria / matéria): logo no header-internas */
body.marcas-pagina-editoria .header-internas .logo,
body.marcas-pagina-materia .header-internas .logo {
    max-height: 64px;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

@media (min-width: 576px) {
    body.marcas-pagina-editoria .header-internas .logo,
    body.marcas-pagina-materia .header-internas .logo {
        max-height: 100px;
    }
}

/* Matéria: assunto e título (substitui verde/laranja do GE) */
body.marcas-pagina-materia .marcas-materia-assunto {
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff !important;
    background-color: var(--marcas-accent-muted) !important;
    padding: 0.2rem 0.55rem;
}

body.marcas-pagina-materia .marcas-materia-titulo {
    display: inline;
    font-weight: bold;
    line-height: 1.5;
    color: #fff !important;
    background-color: var(--marcas-deep-mid) !important;
    padding: 0.15rem 0.4rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Matéria: galeria — setas (ícones) e legenda */
body.marcas-pagina-materia .marcas-galeria-materia .seta {
    color: var(--marcas-accent-muted) !important;
    text-decoration: none !important;
}

body.marcas-pagina-materia .marcas-galeria-materia .seta:hover,
body.marcas-pagina-materia .marcas-galeria-materia .seta:focus {
    color: var(--marcas-deep-mid) !important;
}

body.marcas-pagina-materia .marcas-galeria-materia .seta .icons8 {
    font-size: 3rem;
    line-height: 1;
    vertical-align: middle;
}

body.marcas-pagina-materia .marcas-galeria-materia .seta-container-mobile .seta .icons8 {
    font-size: 2.25rem;
}

body.marcas-pagina-materia .marcas-galeria-materia .figure-caption {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--marcas-accent-muted) 92%, #000),
        color-mix(in srgb, var(--marcas-deep-mid) 78%, #000)
    ) !important;
    color: #fff !important;
    padding: 0.75rem 1rem !important;
}

/*
 * Avaliação (#avaliacao-usuario): o formulário vem do js_head com classes Tailwind
 * compiladas em ge2019/css/css.css (ou v2/css/css.css) — .text-orange-500, .bg-main-secondary,
 * .checked\:after\:bg-main-secondary, .hover\:bg-button-primary, etc.
 * Sobrescrevemos com o mesmo nome de classe + escopo body.marcas-site #avaliacao-usuario (carrega depois).
 */
/* Rótulos em caps: cor da marca; estrelas mantêm laranja (classe compartilhada .text-orange-500) */
body.marcas-site #avaliacao-usuario .text-orange-500:not(.rating__star) {
    color: var(--marcas-accent-muted) !important;
    --tw-text-opacity: 1;
}

body.marcas-site #avaliacao-usuario .rating__star.text-orange-500,
body.marcas-site #avaliacao-usuario svg.rating__star.text-orange-500 {
    color: #f97316 !important;
    --tw-text-opacity: 1;
    stroke: currentColor !important;
}

body.marcas-site #avaliacao-usuario .text-main-secondary,
body.marcas-site #avaliacao-usuario .text-button-primary {
    color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario .bg-main-secondary {
    background-color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario .bg-main-secondary\/20 {
    background-color: color-mix(in srgb, var(--marcas-accent-muted) 22%, transparent) !important;
}

body.marcas-site #avaliacao-usuario button.envia-avaliacao,
body.marcas-site #avaliacao-usuario .btn.text-white.bg-main-secondary {
    background-color: var(--marcas-accent-muted) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.marcas-site #avaliacao-usuario button.envia-avaliacao:hover,
body.marcas-site #avaliacao-usuario button.envia-avaliacao:focus,
body.marcas-site #avaliacao-usuario .hover\:bg-button-primary:hover {
    background-color: var(--marcas-deep-mid) !important;
    color: #fff !important;
}

body.marcas-site #avaliacao-usuario .border-main-secondary,
body.marcas-site #avaliacao-usuario .hover\:border-main-secondary:hover,
body.marcas-site #avaliacao-usuario .hover\:border-button-primary:hover {
    border-color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario .checked\:after\:bg-main-secondary:checked::after {
    background-color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario input[type="checkbox"]:checked::after {
    background-color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario input[type="checkbox"]:checked {
    accent-color: var(--marcas-accent-muted);
}

body.marcas-site #avaliacao-usuario a[href].underline {
    color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario a[href].underline:hover {
    color: var(--marcas-deep-mid) !important;
}

body.marcas-site #avaliacao-usuario .focus\:border-main-secondary:focus {
    border-color: var(--marcas-accent-muted) !important;
}

body.marcas-site #avaliacao-usuario .hover\:text-main-secondary:hover,
body.marcas-site #avaliacao-usuario .hover\:text-button-primary:hover {
    color: var(--marcas-deep-mid) !important;
}

/* Separadores / bordas genéricas (GE ou utilitários Tailwind podem deixar verde) */
body.marcas-site #avaliacao-usuario hr {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--marcas-accent-muted) 32%, #e0e0e0);
    background: transparent;
    opacity: 1;
}

body.marcas-site #avaliacao-usuario .border-green-200,
body.marcas-site #avaliacao-usuario .border-emerald-200,
body.marcas-site #avaliacao-usuario .divide-green-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: color-mix(in srgb, var(--marcas-accent-muted) 28%, #e5e5e5) !important;
}

body.marcas-site #avaliacao-usuario #form-avaliacao-usuario-extras.border {
    border-color: color-mix(in srgb, var(--marcas-accent-muted) 22%, #d8d8d8) !important;
}

/* Matéria: footer dentro de .site-container (reforça fundo Marcas sobre qualquer regra do GE) */
body.marcas-pagina-materia footer.footer {
    background: var(--marcas-footer-bg) !important;
    color: #ffffff !important;
}

body.marcas-pagina-materia footer.footer a,
body.marcas-pagina-materia footer.footer a.nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.marcas-pagina-materia footer.footer a:hover,
body.marcas-pagina-materia footer.footer a:focus,
body.marcas-pagina-materia footer.footer a.nav-link:hover,
body.marcas-pagina-materia footer.footer a.nav-link:focus {
    color: rgba(255, 255, 255, 1) !important;
}

/* Push / notificação (costuma ser injetado por GTM ou script de terceiro) */
body.marcas-site #push-btn-container,
body.marcas-site .push-container {
    display: none !important;
}

/*
 * Menu lateral mobile (#menu): mesmo tom escuro do rodapé (var5 do site pai → --marcas-footer-bg).
 * Texto claro para contraste.
 */
body.marcas-site #menu {
    background-color: var(--marcas-footer-bg) !important;
}

body.marcas-site #menu .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.marcas-site #menu .nav-link:hover,
body.marcas-site #menu .nav-link:focus {
    color: #ffffff !important;
}

body.marcas-site #menu .nav-link.active {
    color: #ffffff !important;
    font-weight: 700;
}

body.marcas-site #menu .nav-link.disabled,
body.marcas-site #menu .nav-link.disabled strong {
    color: rgba(255, 255, 255, 0.55) !important;
}

body.marcas-site #menu .btn.menu-link,
body.marcas-site #menu .btn-container .btn {
    color: #ffffff !important;
}

/* Capa do caderno no footer — limita altura da imagem */
body.marcas-site .marc-as-capa-caderno img {
    max-height: 352px;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* Destaque: link único (imagem + título) — sem estilo de link padrão */
body.marcas-site section.destaque > a.destaque-link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

body.marcas-site section.destaque > a.destaque-link:hover,
body.marcas-site section.destaque > a.destaque-link:focus {
    color: inherit;
    text-decoration: none;
}

/* Destaque principal: cor do título (var3) e fundo do span (var5) */
body.marcas-site .destaque .destaque-titulo span {
    color: var(--marcas-destaque-titulo-cor) !important;
    background-color: var(--marcas-destaque-faixa-bg) !important;
}

/* Barra (.snake) abaixo das abas do menu de categorias */
body.marcas-site .menu-categorias-container .snake {
    background-color: var(--marcas-snake-bg) !important;
}

body.marcas-site .titulo-secao {
    color: var(--marcas-accent-muted);
}

/* Abas (Recentes, Inspiração, etc.): largura fixa por card — com 1 ou 2 matérias não esticam na linha */
body.marcas-site section.chamadas .card-deck {
    justify-content: flex-start;
}
body.marcas-site section.chamadas .card-deck > .card {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
@media (min-width: 768px) {
    body.marcas-site section.chamadas .card-deck > .card {
        flex: 0 0 calc(33.333333% - 30px);
        width: calc(33.333333% - 30px);
        max-width: calc(33.333333% - 30px);
    }
}

body.marcas-site .btn-primary {
    background-color: var(--marcas-accent-muted) !important;
    border-color: var(--marcas-accent-muted) !important;
    color: #fff !important;
}

body.marcas-site .btn-primary:hover,
body.marcas-site .btn-primary:focus {
    background-color: var(--marcas-deep-mid) !important;
    border-color: var(--marcas-deep-mid) !important;
}

body.marcas-site .pre-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5;
}

/* Menu + login: primeira coluna pode encolher; login fica colado à direita */
body.marcas-site .pre-header .col.min-w-0 {
    min-width: 0;
}

body.marcas-site .pre-header .nav-link {
    color: #000000 !important;
}

body.marcas-site .pre-header .nav-link:hover,
body.marcas-site .pre-header .nav-link:focus {
    color: var(--marcas-accent-muted) !important;
}

body.marcas-site .pre-header .btn-primary.icon {
    background-color: #ffffff !important;
    border: 1px solid #333333 !important;
    color: #000000 !important;
}

body.marcas-site .pre-header .btn-primary.icon:hover,
body.marcas-site .pre-header .btn-primary.icon:focus {
    background-color: var(--marcas-accent-muted) !important;
    border-color: var(--marcas-accent-muted) !important;
    color: #ffffff !important;
}

body.marcas-site .pre-header .btn-primary.icon i,
body.marcas-site .pre-header .btn-primary.icon .icons8 {
    color: inherit !important;
}

body.marcas-site .barra.laranja {
    background: var(--marcas-accent-muted) !important;
    color: #fff !important;
}

body.marcas-site .marcas-btn-mais {
    display: inline-block;
    margin: 15px;
    padding: 5px 15px;
    font-weight: bold;
    text-decoration: none !important;
    color: #fff !important;
    background: var(--marcas-accent-muted) !important;
    border-radius: 2px;
    transition: background 0.2s, color 0.2s;
}

body.marcas-site .marcas-btn-mais:hover,
body.marcas-site .marcas-btn-mais:focus {
    background: var(--marcas-deep-mid) !important;
    color: #fff !important;
}

body.marcas-site .marcas-retranca-badge {
    background-color: var(--marcas-accent-muted) !important;
    color: #fff !important;
    font-weight: bold;
    line-height: 1.5;
}

body.marcas-site .ge-galeria-videos--videos-ge {
    background: linear-gradient(
        135deg,
        var(--marcas-galeria-a) 0%,
        var(--marcas-galeria-b) 50%,
        var(--marcas-galeria-c) 100%
    ) !important;
}

body.marcas-site .ge-galeria-videos--videos-ge .ge-galeria-videos__title {
    color: #ffffff !important;
}

/*
 * Mobile: largura da tela sem extrapolar (cancela 100vw/calc do galeria-videos-accordion.css,
 * que somado ao .container gerava scroll horizontal à direita).
 */
@media (max-width: 991.98px) {
    body.marcas-site .ge-galeria-videos {
        /* Faixa externa full-bleed (tela toda) */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        box-sizing: border-box;
        overflow-x: hidden;
    }

    body.marcas-site .ge-galeria-videos__inner {
        max-width: none;
        /* Conteúdo interno alinhado ao "miolo" da página */
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    body.marcas-site .ge-yt-galeria,
    body.marcas-site .ge-yt-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.marcas-site .ge-yt-col,
    body.marcas-site .ge-yt-col.is-expanded,
    body.marcas-site .ge-yt-col:not(.is-expanded) {
        width: 100%;
        max-width: 100%;
        grid-column: 1 / -1;
        min-width: 0;
    }

    body.marcas-site .ge-yt-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
        min-height: 240px;
        aspect-ratio: 16 / 9;
        max-height: 420px;
    }
}

body.marcas-site .ge-galeria-videos--videocast-ge {
    background: linear-gradient(135deg, var(--marcas-galeria-b) 0%, var(--marcas-galeria-a) 100%) !important;
}

body.marcas-site .ge-galeria-videos--videocast-ge .ge-galeria-videos__title {
    color: #ffffff !important;
}

body.marcas-site .ge-galeria-videos--videocast-ge .ge-galeria-videos__more {
    color: rgba(255, 255, 255, 0.88) !important;
}

body.marcas-site .ge-galeria-videos--videocast-ge .ge-galeria-videos__more:hover {
    color: #ffffff !important;
    border-bottom-color: var(--marcas-accent) !important;
}

/* Footer: fundo (var5) */
body.marcas-site footer.footer {
    background: var(--marcas-footer-bg);
    color: #ffffff;
}

body.marcas-site footer.footer a {
    color: rgba(255, 255, 255, 0.92);
}

body.marcas-site footer.footer a:hover,
body.marcas-site footer.footer a:focus {
    color: rgba(255, 255, 255, 1);
}

body.marcas-site footer.footer a.nav-link {
    color: rgba(255, 255, 255, 0.92);
}

body.marcas-site footer.footer a.nav-link:hover,
body.marcas-site footer.footer a.nav-link:focus {
    color: rgba(255, 255, 255, 1);
}

/* Footer: fundo var5 (site pai); links claros */

/* Abas: ativa = var5 (base); hover em inativa = var6 (mais clara) */
body.marcas-site .menu-categorias .nav-link {
    color: #000000 !important;
    transition: color 0.2s ease;
}

body.marcas-site .menu-categorias .nav-link:hover:not(.active):not(.show),
body.marcas-site .menu-categorias .nav-link:focus:not(.active):not(.show) {
    color: var(--marcas-deep-mid) !important;
}

body.marcas-site .menu-categorias .nav-link.active,
body.marcas-site .menu-categorias .nav-link.show {
    color: var(--marcas-accent-muted) !important;
}

body.marcas-site .menu-categorias .nav-link.active:hover,
body.marcas-site .menu-categorias .nav-link.show:hover {
    color: var(--marcas-accent-muted) !important;
}

/* Galeria de vídeos: bordas um pouco mais arredondadas (thumb continua em cover, preenche o card) */
body.marcas-site .ge-yt-card {
    border-radius: 2.125rem;
}

@media (min-width: 992px) {
    body.marcas-site .ge-yt-card {
        height: 320px;
    }
}

body.marcas-site ::selection {
    background: color-mix(in srgb, var(--marcas-accent-muted) 35%, transparent);
    color: var(--marcas-ink);
}