/*!
 Theme Name:   Divi Child
 Theme URI:    https://www.elegantthemes.com/gallery/divi/
 Description:  Child theme for the Divi theme — site de compartilhamento Simone 400
 Author:       D4G
 Author URI:   https://inovgest.com.br
 Template:     Divi
 Version:      2.0.0
 Text Domain:  divi-child
*/

/* ===========================================================
   DESIGN TOKENS — Simone Tebet 2026
   -----------------------------------------------------------
   Espelho do :root do tema do site oficial da campanha
   (../../../../../html/wp-content/themes/divi-child/style.css).
   Fonte da verdade da marca — todo o resto deste arquivo, e os
   tokens do plugin de compartilhamento, só consomem var(--stb-*).

   ATENÇÃO — dois contextos NÃO carregam este arquivo e por isso
   repetem estes mesmos tokens. Ao alterar um valor aqui, altere
   também em:
     • functions.php → dc_login_styles()   (tela do wp-login.php)

   As fontes (rama-gothic-e, obviously, playfair-display)
   vêm do Adobe Typekit, carregado no functions.php:
   https://use.typekit.net/jwl3glu.css
   =========================================================== */

:root {
    /* --- Paleta da marca -----------------------------------
       Cores com canais RGB separados são as que precisam de
       versão translúcida em algum ponto do CSS. O hex é DERIVADO
       dos canais, então basta trocar a linha "*-rgb". */

    --stb-blue: #006BFE;   /* marca: header rolado, rodapé, botão primário */
    --stb-pink: #FF004D;   /* destaque pontual: badge, foco, hover, ativo */
    --stb-gray: #363A46;   /* escuro secundário */

    /* Escuro primário: texto sobre claro, fundos escuros, drawer */
    --stb-dark-rgb: 39, 43, 56;      /* #272B38 */
    --stb-dark: rgb(var(--stb-dark-rgb));

    --stb-white-rgb: 255, 255, 255;  /* #FFFFFF */
    --stb-white: rgb(var(--stb-white-rgb));

    /* Bege — superfícies quentes: hover de botão, slider claro. */
    --stb-beige-rgb: 211, 195, 167;  /* #D3C3A7 */
    --stb-beige: rgb(var(--stb-beige-rgb));

    /* Creme — superfície clara de leitura (painel de texto do card do grid).
       ATENÇÃO: este token NÃO existe no :root do site oficial da campanha —
       entrou aqui a partir do mockup do grid de compartilhamento. Ao
       ressincronizar o espelho da paleta, preserve esta linha. */
    --stb-cream: #FFF5DA;

    /* --- Neutros e estados (não são cor de marca) ----------- */
    --stb-placeholder: #6A6A6A;  /* fundo de imagem ainda não carregada */
    --stb-border: #B3B3B3;       /* borda de card */
    --stb-success: #00A820;      /* estado de sucesso */
    --stb-error: #E02B20;        /* estado de erro sobre fundo claro */
    --stb-error-text: #FF8A8A;   /* estado de erro sobre fundo escuro */

    /* --- Tipografia ---------------------------------------- */
    --stb-font-display: 'rama-gothic-e', 'Arial Narrow', Arial, sans-serif;
    /* Variantes de largura da mesma família Rama Gothic, vindas do mesmo
       kit Typekit. Use quando quiser um traço mais estreito (condensada)
       ou intermediário (média) sem trocar de família. */
    --stb-font-display-cond: 'rama-gothic-c', 'Arial Narrow', Arial, sans-serif;
    --stb-font-display-med: 'rama-gothic-m', 'Arial Narrow', Arial, sans-serif;
    --stb-font-body: 'obviously', 'Helvetica Neue', Arial, sans-serif;
    /* Instâncias de largura fixa da família Obviously (mesmo kit Typekit),
       do mais estreito ao mais largo. */
    --stb-font-body-compressed: 'obviously-compressed', 'Arial Narrow', Arial, sans-serif;
    --stb-font-body-condensed: 'obviously-condensed', 'Arial Narrow', Arial, sans-serif;
    --stb-font-body-narrow: 'obviously-narrow', 'Arial Narrow', Arial, sans-serif;
    --stb-font-body-normal: 'obviously', 'Helvetica Neue', Arial, sans-serif;
    --stb-font-body-wide: 'obviously-wide', 'Helvetica Neue', Arial, sans-serif;
    --stb-font-body-extended: 'obviously-extended', 'Helvetica Neue', Arial, sans-serif;
    --stb-font-serif: 'playfair-display', Georgia, 'Times New Roman', serif;
}

/* ===========================================================
   PONTE DE TOKENS — plugin "Sistema de Compartilhamento"
   -----------------------------------------------------------
   O plugin é whitelabel: seu CSS só consome var(--smc-*), e cada
   token --smc-* tem fallback para um --dm-* do tema. Aqui traduzimos
   a marca Simone 400 para os dois conjuntos, de uma vez só. Ao trocar
   a paleta acima, o grid de materiais acompanha sem editar o plugin.

   O grid vive sobre o AZUL da marca (fundo das seções Divi da home e
   da interna), então: superfície de card = bege, texto = grafite.
   =========================================================== */

:root {
    /* Contrato antigo do plugin (--dm-*), mantido por compatibilidade. */
    --dm-bg:          var(--stb-blue);
    --dm-fg:          var(--stb-beige);
    --dm-accent:      var(--stb-dark);
    --dm-blue:        var(--stb-pink);
    --dm-font-serif:  var(--stb-font-display);
    --dm-font-sans:   var(--stb-font-body);

    /* Contrato direto do plugin — vence os fallbacks acima. */
    --smc-bg:         var(--stb-blue);      /* fundo de superfícies "página" (modal) */
    --smc-fg:         var(--stb-dark);      /* texto/ícone principal sobre claro */
    --smc-card-bg:      var(--stb-beige);   /* superfície do card no grid */
    --smc-card-info-bg: var(--stb-cream);   /* painel de texto abaixo da mídia */
    --smc-card-title-font: var(--stb-font-body-wide);  /* título do card */
    --smc-accent:     var(--stb-pink);      /* foco, ativo, hover */
    /* Cortina do hover do card. Preto puro de propósito, fora da paleta:
       é scrim (escurece a mídia), não cor de marca — o --stb-dark tem
       viés de azul e sujava a foto. */
    --smc-overlay-bg: rgba(0, 0, 0, .3);
    --smc-icon-bg:    var(--stb-beige);     /* botão sobre o overlay escuro da mídia */
    --smc-icon-fg:    var(--stb-dark);

    /* Par INVERSO — a interna do material fica sobre o azul da marca, então
       lá o texto vira bege e os botões invertem (bege com ícone grafite). */
    --smc-inverse-fg:      var(--stb-beige);
    --smc-inverse-icon-bg: var(--stb-beige);
    --smc-inverse-icon-fg: var(--stb-dark);

    --smc-radius:     0px;                  /* a marca é de canto reto */
    --smc-gap:        16px;

    --smc-font-title: var(--stb-font-display);
    --smc-font-ui:    var(--stb-font-body);
}

/* ===========================================================
   Typography rules
   - Obviously (--stb-font-body): texto corrido, listas, forms, tabelas
   - Rama Gothic M (--stb-font-display-med): títulos + menus de navegação
   - Playfair Display (--stb-font-serif): destaque editorial, via .stb-serif
   =========================================================== */

body,
p,
ul, ol, li, dl, dt, dd,
blockquote,
table, th, td,
input, textarea, select, button,
.et_pb_text,
.et_pb_blurb_description,
.et_pb_post_content,
.entry-content {
    font-family: var(--stb-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.et_pb_module_header,
.et_pb_slide_title,
.et_pb_promo_title,
.et_pb_toggle_title,
.et_pb_accordion_item .et_pb_toggle_title,
.et_pb_tab a,
.et_pb_tab_content h1,
.et_pb_tab_content h2,
.et_pb_tab_content h3,
.et_pb_tab_content h4,
.et_pb_tab_content h5,
.et_pb_tab_content h6,
.et_pb_blurb_content h4,
#main-header .nav li a,
#main-header .et_mobile_menu li a,
#et-top-navigation .nav li a,
#top-menu li a,
.bottom-nav li a,
.et_mobile_menu li a {
    font-family: var(--stb-font-display-med);
}

/* Destaque editorial em Playfair Display. Aplique a classe .stb-serif
   em qualquer elemento (inclusive dentro de um módulo de Texto do Divi)
   para trazer a serifa da marca. */
.stb-serif,
.et_pb_text .stb-serif {
    font-family: var(--stb-font-serif);
}
.stb-serif--italic,
.et_pb_text .stb-serif--italic {
    font-family: var(--stb-font-serif);
    font-style: italic;
}

/* Seleção de texto na cor da marca. */
::selection {
    background: var(--stb-pink);
    color: var(--stb-white);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* O header é fixo: o conteúdo precisa começar abaixo dele.
   O fundo azul no body cobre as frestas entre seções do Divi e os blocos
   que o plugin reposiciona para fora delas (a barra "Recolher" da interna),
   que de outro modo cairiam no branco padrão do Divi. */
body {
    padding-top: 110px;
    background-color: var(--stb-blue);
}

/* O Divi pinta #main-content de branco. Como o site inteiro vive sobre o
   azul da marca, deixamos o container transparente para o body aparecer —
   é ele que cobre as frestas entre seções e a barra "Recolher" da interna,
   que o JS do plugin move para FORA da seção do Divi. */
#main-content,
#et-main-area,
#page-container {
    background-color: transparent;
}
@media (max-width: 600px) {
    body { padding-top: 72px; }
}

/* ===========================================================
   BOTÕES — sistema de sombra suave
   -----------------------------------------------------------
   Canto reto, Rama Gothic em caixa alta, hover rosa. A sombra é
   DIFUSA (com blur, deslocada para baixo/direita). No hover o botão
   sobe levemente e a sombra cresce; no clique ele encosta (press).

   Os !important são necessários: o Divi grava style inline nos
   links dentro dos módulos de Texto, e regra de folha de estilo
   só vence estilo inline quando é !important.
   =========================================================== */

a.dc-btn-solid,
a.dc-btn-outline-light,
.et_pb_text a.dc-btn-solid,
.et_pb_text a.dc-btn-outline-light {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    padding: 14px 28px 12px !important;
    border-radius: 0 !important;
    font-family: var(--stb-font-display-med) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: 6px 9px 13px rgba(0, 0, 0, 0.45);
    transition: background-color .28s ease,
                color .28s ease,
                border-color .28s ease,
                box-shadow .28s cubic-bezier(.2, .8, .2, 1),
                transform .28s cubic-bezier(.2, .8, .2, 1);
}

a.dc-btn-solid:hover,
a.dc-btn-outline-light:hover,
a.dc-btn-solid:focus-visible,
a.dc-btn-outline-light:focus-visible,
.et_pb_text a.dc-btn-solid:hover,
.et_pb_text a.dc-btn-outline-light:hover,
.et_pb_text a.dc-btn-solid:focus-visible,
.et_pb_text a.dc-btn-outline-light:focus-visible {
    transform: translateY(-3px);
    box-shadow: 9px 14px 20px rgba(0, 0, 0, 0.48);
}

a.dc-btn-solid:active,
a.dc-btn-outline-light:active,
.et_pb_text a.dc-btn-solid:active,
.et_pb_text a.dc-btn-outline-light:active {
    transform: translateY(1px);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.42);
}

a.dc-btn-solid:focus-visible,
a.dc-btn-outline-light:focus-visible {
    outline: 2px solid var(--stb-pink);
    outline-offset: 3px;
}

/* ── Sólido (padrão): azul → rosa ─────────────────────────── */
a.dc-btn-solid,
.et_pb_text a.dc-btn-solid {
    background-color: var(--stb-blue) !important;
    color: var(--stb-beige) !important;
    border: 0 !important;
}
a.dc-btn-solid:hover,
a.dc-btn-solid:focus-visible,
.et_pb_text a.dc-btn-solid:hover,
.et_pb_text a.dc-btn-solid:focus-visible {
    background-color: var(--stb-pink) !important;
    color: var(--stb-white) !important;
}

/* ── Contorno claro — para uso sobre o azul da marca ──────── */
a.dc-btn-outline-light,
.et_pb_text a.dc-btn-outline-light {
    background-color: transparent !important;
    color: var(--stb-beige) !important;
    border: 2px solid var(--stb-beige) !important;
}
a.dc-btn-outline-light:hover,
a.dc-btn-outline-light:focus-visible,
.et_pb_text a.dc-btn-outline-light:hover,
.et_pb_text a.dc-btn-outline-light:focus-visible {
    background-color: var(--stb-pink) !important;
    border-color: var(--stb-pink) !important;
    color: var(--stb-white) !important;
}

/* ===========================================================
   Footer Option 1 — rendered by [dc_footer]
   =========================================================== */

.dc-footer {
    background-color: var(--stb-blue);
    color: var(--stb-white);
    padding: 78px 20px 56px;
    box-sizing: border-box;
}
.dc-footer__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.dc-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--stb-white);
    text-decoration: none !important;
}
.dc-footer__logo:hover {
    opacity: 1;
}
.dc-footer__logo-img {
    display: block;
    height: auto;
    width: 40%;
    margin: 0 auto;
}
.dc-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}
.dc-footer__social-item {
    color: #272b39;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: opacity .2s ease;
}
.dc-footer__social-item:hover,
.dc-footer__social-item:focus-visible {
    opacity: 0.7;
}
.dc-footer__social-item svg {
    width: 28px;
    height: 28px;
    display: block;
}
.dc-footer__bottom {
    max-width: 1140px;
    margin: 35px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--stb-pink);
    text-align: center;
}
.dc-footer__copy {
    margin: 0;
    color: #272b39;
    font-family: var(--stb-font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .dc-footer {
        padding: 56px 16px 40px;
    }
    .dc-footer__social {
        gap: 16px;
    }
    .dc-footer__social-item svg {
        width: 24px;
        height: 24px;
    }
    .dc-footer__logo-img {
        width: 60%;
    }
    .dc-footer__copy {
        font-size: 16px;
    }
}

/* ===========================================================
   Header — rendered by [dc_header]
   Fixo no topo, sem background. Logo à esquerda, hambúrguer à direita.
   O menu vem de Aparência → Menus (localização "dc_header_primary")
   e abre como overlay em tela cheia ao clicar no hambúrguer.
   =========================================================== */

/* Diferença deliberada em relação ao site oficial: lá o header nasce
   transparente sobre o vídeo escuro do topo e só ganha fundo ao rolar.
   Aqui o topo já é o azul da marca, então o header entra pintado — o
   estágio transparente deixaria o logo boiando sem contraste. A classe
   .is-scrolled continua vindo do JS e segue encolhendo a logo. */
.dc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--stb-blue);
    color: var(--stb-white);
    padding: 10px 40px;
    box-sizing: border-box;
    transition: background-color .3s ease;
}
.dc-header__inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 2;
}
/* Banner entre o logo e o hambúrguer — SÓ no desktop (≥1025px, ver @media). */
.dc-header__banner {
    display: none;
}
.dc-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    flex-shrink: 0;
}
.dc-header__logo img {
    display: block;
    height: 90px;
    width: auto;
    transition: height .3s ease;
}
/* Quando rolar mais de 100px (classe injetada via JS), encolhe a logo. */
.dc-header.is-scrolled .dc-header__logo img {
    height: 60px;
}

/* Hambúrguer — sempre visível. Barras grossas e largas para presença. */
.dc-header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    width: 52px;
    height: 52px;
    margin-left: auto;
    position: relative;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}
.dc-header__toggle span {
    display: block;
    width: 34px;
    height: 4px;
    background-color: var(--stb-white);
    border-radius: 2px;
    margin: 4px 0;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1),
                opacity .2s ease,
                background-color .25s ease;
}
/* Feedback no hover/foco: as barras assumem o rosa da marca. */
.dc-header__toggle:hover span,
.dc-header__toggle:focus-visible span {
    background-color: var(--stb-pink);
}
.dc-header__toggle:focus-visible {
    outline: 2px solid var(--stb-beige);
    outline-offset: 3px;
    border-radius: 8px;
}
/* Estado X — barras cruzam no centro, alongadas (scaleX) para um X marcante. */
.dc-header.is-open .dc-header__toggle span:nth-child(1) {
    transform: translateY(12px) rotate(45deg) scaleX(1.12);
}
.dc-header.is-open .dc-header__toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.dc-header.is-open .dc-header__toggle span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg) scaleX(1.12);
}

/* ===========================================================
   Overlay de navegação em TELA CHEIA — mobile a desktop
   -----------------------------------------------------------
   O menu vira um painel full-bleed na cor da marca. A entrada é
   uma "mancha" (clip-path circle) que nasce no canto do botão
   hambúrguer e cobre a tela; os itens sobem em cascata (stagger).
   A saída reverte a mesma mancha. Logo e hambúrguer (z-index 3)
   ficam ACIMA do painel (z-index 1) e permanecem visíveis/clicáveis.
   =========================================================== */
.dc-header__logo {
    position: relative;
    z-index: 3;
    transition: opacity .25s ease, visibility 0s linear 0s;
}
/* Com o overlay aberto o logo some (o painel já carrega a marca). */
.dc-header.is-open .dc-header__logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.dc-header__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(84px, 13vh, 140px) 24px clamp(48px, 8vh, 96px);
    box-sizing: border-box;
    color: var(--stb-white);
    background:
        radial-gradient(135% 120% at 100% 0%,
            #2f86ff 0%,
            var(--stb-blue) 46%,
            #0050c4 100%);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-clip-path: circle(0% at calc(100% - 56px) 40px);
    clip-path: circle(0% at calc(100% - 56px) 40px);
    visibility: hidden;
    transition: clip-path .6s cubic-bezier(.86, 0, .07, 1),
                -webkit-clip-path .6s cubic-bezier(.86, 0, .07, 1),
                visibility 0s linear .6s;
}
.dc-header.is-open .dc-header__nav {
    -webkit-clip-path: circle(150% at calc(100% - 56px) 40px);
    clip-path: circle(150% at calc(100% - 56px) 40px);
    visibility: visible;
    transition: clip-path .7s cubic-bezier(.86, 0, .07, 1),
                -webkit-clip-path .7s cubic-bezier(.86, 0, .07, 1),
                visibility 0s linear 0s;
}
/* Marca d'água editorial: o ano da campanha, gigante e fantasma. */
.dc-header__nav::before {
    content: "2026";
    position: absolute;
    right: -.06em;
    bottom: -.24em;
    font-family: var(--stb-font-display);
    font-weight: 700;
    font-size: clamp(9rem, 34vw, 25rem);
    line-height: .8;
    letter-spacing: -.02em;
    color: var(--stb-white);
    opacity: .06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.dc-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2px, 1.2vh, 14px);
    width: min(760px, 92vw);
    counter-reset: stbnav;
}
.dc-header__menu li {
    list-style: none;
    margin: 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
    transition-delay: 0s; /* cascata só na abertura (regras .is-open abaixo) */
}
.dc-header.is-open .dc-header__menu li {
    opacity: 1;
    transform: none;
}
.dc-header.is-open .dc-header__menu li:nth-child(1)  { transition-delay: .16s; }
.dc-header.is-open .dc-header__menu li:nth-child(2)  { transition-delay: .22s; }
.dc-header.is-open .dc-header__menu li:nth-child(3)  { transition-delay: .28s; }
.dc-header.is-open .dc-header__menu li:nth-child(4)  { transition-delay: .34s; }
.dc-header.is-open .dc-header__menu li:nth-child(5)  { transition-delay: .40s; }
.dc-header.is-open .dc-header__menu li:nth-child(6)  { transition-delay: .46s; }
.dc-header.is-open .dc-header__menu li:nth-child(7)  { transition-delay: .52s; }
.dc-header.is-open .dc-header__menu li:nth-child(8)  { transition-delay: .58s; }
.dc-header.is-open .dc-header__menu li:nth-child(9)  { transition-delay: .64s; }
.dc-header.is-open .dc-header__menu li:nth-child(10) { transition-delay: .70s; }
.dc-header.is-open .dc-header__menu li:nth-child(11) { transition-delay: .76s; }
.dc-header.is-open .dc-header__menu li:nth-child(12) { transition-delay: .82s; }

.dc-header__menu a {
    counter-increment: stbnav;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 30px);
    width: fit-content;
    max-width: 100%;
    padding: clamp(4px, .6vh, 10px) 0;
    color: var(--stb-white) !important;
    text-decoration: none !important;
    font-family: var(--stb-font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2rem, 5.6vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: .01em;
    transition: color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* Índice 01, 02, 03… em bege, tipografia de corpo para contraste de forma. */
.dc-header__menu a::before {
    content: counter(stbnav, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: var(--stb-font-body);
    font-weight: 600;
    font-size: clamp(.72rem, 1.4vw, 1rem);
    letter-spacing: .18em;
    color: var(--stb-beige);
    opacity: .6;
    transform: translateY(-.4em);
    transition: color .25s ease, opacity .25s ease;
}
/* Traço rosa que cresce da esquerda no hover/foco. */
.dc-header__menu a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background-color: var(--stb-pink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.dc-header__menu a:focus-visible {
    outline: 2px solid var(--stb-beige);
    outline-offset: 6px;
}
@media (hover: hover) {
    .dc-header__menu a:hover,
    .dc-header__menu a:focus-visible {
        color: var(--stb-beige) !important;
        transform: translateX(clamp(8px, 1.6vw, 22px));
    }
    .dc-header__menu a:hover::after,
    .dc-header__menu a:focus-visible::after {
        transform: scaleX(1);
    }
    .dc-header__menu a:hover::before,
    .dc-header__menu a:focus-visible::before {
        color: var(--stb-pink);
        opacity: 1;
    }
}
.dc-header__menu-empty {
    position: relative;
    z-index: 1;
    max-width: 480px;
    color: var(--stb-white);
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* Trava o scroll do body enquanto o overlay está aberto (cobre a tela toda). */
body.dc-header--open {
    overflow: hidden;
}

/* ===========================================================
   Desktop (≥ 1025px): o overlay NUNCA rola — tem de caber em 100vh.
   =========================================================== */
@media (min-width: 1025px) {
    /* Banner centralizado entre o logo e o botão do menu. Absoluto para
       não competir com o margin-left:auto do hambúrguer; espelha o encolher
       da logo ao rolar e some junto com ela quando o overlay abre. */
    .dc-header__banner {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 56px;
        width: auto;
        z-index: 3;
        transition: height .3s ease, opacity .25s ease, visibility 0s linear 0s;
    }
    .dc-header.is-scrolled .dc-header__banner {
        height: 40px;
    }
    .dc-header.is-open .dc-header__banner {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: height .3s ease, opacity .25s ease, visibility 0s linear .25s;
    }
    .dc-header__nav {
        overflow: hidden;
        padding: clamp(72px, 9vh, 120px) 24px clamp(32px, 5vh, 72px);
    }
    .dc-header__menu {
        gap: min(1.4vh, 16px);
    }
    .dc-header__menu a {
        /* min() garante que a fonte respeite a MENOR entre largura, altura
           e o teto absoluto — é o cap por altura (vh) que evita o scroll. */
        font-size: min(3.3rem, 4.6vw, 6.3vh);
        padding: min(0.5vh, 10px) 0;
    }
}

@media (max-width: 600px) {
    .dc-header {
        padding: 16px 20px;
    }
    .dc-header__logo img,
    .dc-header.is-scrolled .dc-header__logo img {
        height: 40px;
    }
    /* Mancha nasce mais perto do canto (padding menor no mobile). */
    .dc-header__nav {
        -webkit-clip-path: circle(0% at calc(100% - 44px) 40px);
        clip-path: circle(0% at calc(100% - 44px) 40px);
    }
    .dc-header.is-open .dc-header__nav {
        -webkit-clip-path: circle(150% at calc(100% - 44px) 40px);
        clip-path: circle(150% at calc(100% - 44px) 40px);
    }
    .dc-header__menu a {
        font-size: clamp(1.65rem, 8.5vw, 2.5rem);
    }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    .dc-header__logo img {
        height: 65px;
    }
}

/* Acessibilidade: sem movimento, o painel apenas aparece/some por opacidade
   e a cascata é desligada. */
@media (prefers-reduced-motion: reduce) {
    .dc-header__nav,
    .dc-header.is-open .dc-header__nav {
        -webkit-clip-path: none;
        clip-path: none;
        opacity: 0;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }
    .dc-header.is-open .dc-header__nav {
        opacity: 1;
        transition: opacity .25s ease, visibility 0s linear 0s;
    }
    .dc-header__menu li,
    .dc-header.is-open .dc-header__menu li {
        transform: none;
        transition: opacity .25s ease;
        transition-delay: 0s !important;
    }
}

/* ===========================================================
   TOPO DA HOME — faixa de título "COMPARTILHE"
   -----------------------------------------------------------
   Substitui o antigo bloco de imagem: o título agora é texto,
   em Rama Gothic, sobre o azul da marca. Escala com a viewport.
   =========================================================== */

.dc-compartilhe-topo .dc-compartilhe-titulo,
.dc-compartilhe-topo .dc-compartilhe-titulo h1 {
    margin: 0;
    font-family: var(--stb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: .92;
    letter-spacing: .01em;
    font-size: clamp(3.5rem, 12vw, 9rem);
    color: var(--stb-beige);
}
.dc-compartilhe-topo .dc-compartilhe-titulo .dc-compartilhe-titulo__sub {
    display: block;
    font-family: var(--stb-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: clamp(.7rem, 1.6vw, 1.05rem);
    line-height: 1.4;
    /* Bege, não rosa: em corpo pequeno o rosa da marca perde legibilidade
       sobre o azul (fica perto do limite de contraste). O rosa segue nos
       elementos grandes — badge do card, tarja do modal, hover do menu. */
    color: #000;
    margin-top: 14px;
}

/* Intro — faixa bege com o texto de apoio em grafite. */
.dc-compartilhe-intro .dc-compartilhe-intro-text,
.dc-compartilhe-intro .dc-compartilhe-intro-text p {
    margin: 0;
    font-family: var(--stb-font-body);
    font-weight: 500;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    color: #000;
    text-align: center;
}
.dc-compartilhe-intro .et_pb_row {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
}

/* ===========================================================
   BUSCA DE MATERIAIS — faixa entre a intro e o grid
   -----------------------------------------------------------
   ATENÇÃO: o campo ainda NÃO faz nada. É um placeholder visual,
   sem JS ligado a ele — a busca será implementada depois. Ao
   implementar, o gancho é `.dc-busca__input` (ver a nota no
   módulo de Código da home, seção "Compartilhe Busca").

   Faixa em grafite para separar a intro bege do azul do grid e
   dar contraste máximo ao campo, que segue o mesmo tratamento
   das pílulas de filtro: canto reto, contorno bege, caixa alta.

   Os seletores do campo são escopados por `.dc-busca` de propósito:
   o Divi declara `input[type="text"]` (0,1,1), que venceria um
   `.dc-busca__input` solto (0,1,0). Com o escopo (0,2,0) ganhamos
   sem !important e sem depender da ordem das folhas de estilo.
   =========================================================== */

.dc-busca {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
}

.dc-busca__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--stb-beige);
    opacity: .75;
    pointer-events: none;
    transition: opacity .2s ease, color .2s ease;
}
.dc-busca__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.dc-busca .dc-busca__input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px 12px 48px;
    background: transparent;
    border: 2px solid var(--stb-beige);
    border-radius: 0;
    color: var(--stb-beige);
    font-family: var(--stb-font-display-med);
    font-size: 20px;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.dc-busca .dc-busca__input::placeholder {
    color: var(--stb-beige);
    opacity: .55;
    text-transform: uppercase;
}
.dc-busca .dc-busca__input:focus,
.dc-busca .dc-busca__input:focus-visible {
    outline: none;
    border-color: var(--stb-pink);
    color: var(--stb-white);
}
.dc-busca .dc-busca__input:focus + .dc-busca__icon,
.dc-busca:focus-within .dc-busca__icon {
    color: var(--stb-pink);
    opacity: 1;
}

.dc-compartilhe-busca .et_pb_row {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
}

@media (max-width: 600px) {
    .dc-busca .dc-busca__input {
        font-size: 16px;
        padding: 12px 14px 10px 42px;
    }
    .dc-busca__icon {
        left: 13px;
    }
    .dc-busca__icon svg {
        width: 17px;
        height: 17px;
    }
}

/* ===========================================================
   INTERNA DO MATERIAL — respiro do bloco [material_interna]
   =========================================================== */

.content-block .smc-wrapper--single {
    padding-top: 8px;
}