/* 
 * ============================================================================
 * WAVE THEME - BRUTALISM OVERRIDES
 * ============================================================================
 * Overwrites all glassmorphism definitions above with hard, brutalist styles.
 */

:root {
    --wave-blur: none !important;
    --wave-blur-strong: none !important;
    --wave-radius-sm: 0px !important;
    --wave-radius-md: 0px !important;
    --wave-radius-lg: 0px !important;
    --wave-radius-pill: 0px !important;
    --radius-sm: 0px !important;
    --radius-md: 0px !important;
    --radius-lg: 0px !important;
    --radius-xl: 0px !important;
    --card-radius: 0px !important;
    
    --wave-surface: var(--wave-bg-deep) !important;
    --wave-surface-strong: var(--wave-bg-deep) !important;
    --glass-bg: var(--wave-bg-deep) !important;
    --card-bg: var(--wave-bg-deep) !important;
    --bg-card: var(--wave-bg-deep) !important;
    
    --wave-glass-border: #000 !important;
    --glass-border: #000 !important;
    --border-color: #000 !important;
    --border-light: #000 !important;
    
    --shadow-sm: 4px 4px 0 var(--color-primary) !important;
    --shadow-md: 4px 4px 0 var(--color-primary) !important;
    --shadow-lg: 4px 4px 0 var(--color-primary) !important;
    --glass-shadow: 4px 4px 0 var(--color-primary) !important;
    
    --wave-glow-pink-sm: none !important;
    --wave-glow-pink-md: none !important;
    --wave-glow-cyan-sm: none !important;
    --wave-glow-cyan-md: none !important;
}

body {
    background: var(--wave-bg-deep) !important;
    font-weight: 500;
}

body.theme-light {
    --wave-surface: #ffffff !important;
    --wave-surface-strong: #ffffff !important;
    --glass-bg: #ffffff !important;
    --card-bg: #ffffff !important;
    --bg-card: #ffffff !important;
    --wave-glass-border: #000 !important;
    --glass-border: #000 !important;
    --border-color: #000 !important;
    --border-light: #000 !important;
    --shadow-sm: 4px 4px 0 var(--color-primary) !important;
    --shadow-md: 4px 4px 0 var(--color-primary) !important;
    --shadow-lg: 4px 4px 0 var(--color-primary) !important;
    --glass-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-light {
    background: var(--wave-bg-deep) !important;
}

/* Force Borders and Remove Rounded Corners universally */
* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- HEADER --- */
.wave-header {
    box-sizing: border-box !important;
    border-bottom: 3px solid var(--wave-glass-border) !important;
    background: var(--bg-primary) !important;
    box-shadow: none !important;
}

/* Corrigir largura do header desktop para não vazar e alinhar com as demos neon/pulse */
@media (min-width: 1025px) {
    .wave-header__inner {
        max-width: 1440px !important;
        gap: 16px !important;
        padding: 0 16px !important;
    }
    .wave-nav {
        gap: 12px !important;
    }
    .wave-nav__link {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }
    .wave-header__actions {
        gap: 12px !important;
    }
}

.wave-nav__link {
    text-transform: uppercase;
    font-weight: 800 !important;
    border-radius: 0 !important;
    background: none !important;
    border: 2px solid transparent;
}
.wave-nav__link:hover {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}
.wave-nav__link--active {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

.wave-mobile__link--active {
    color: var(--wave-pink) !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-left: 4px solid var(--color-secondary) !important;
}

/* Mobile actions (Buscar, etc) sem gradiente de fundo ou pill shape */
.wave-search__btn, .wave-header__mobile-btn, .wave-header__mobile-action {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    background: var(--wave-surface-strong) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
.wave-search__btn:hover, .wave-header__mobile-btn:hover, .wave-header__mobile-action:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--color-secondary) !important;
}


/* --- CARDS (News, Team, Promo, etc) --- */
.wave-news-card, .wave-team-card, .wave-promo-card, .wave-podcast-card, .wave-event-card {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    background: var(--wave-surface) !important;
}

/* O fundo com malha e filter escuro deve sumir no brutalismo (para manter a cor solida ou a foto nítida) */
.wave-news-card__bg, .wave-promo-card__bg, .wave-event-card__bg {
    filter: brightness(0.9) grayscale(1) !important;
    mix-blend-mode: hard-light !important;
}

/* Hovers de deslocamento Brutalista */
.wave-news-card:hover, .wave-team-card:hover, .wave-promo-card:hover, .wave-podcast-card:hover, .wave-event-card:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-color: #000 !important;
    background: var(--color-secondary) !important;
}

/* Imagens circulares da Equipe => Imagens Quadradas no Brutalismo */
.wave-team-card__avatar, .wave-team-card__avatar-initials {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
.wave-team-card__avatar-glow {
    display: none !important; /* Remove ambient glow effect */
}


/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6, .wave-news-header__title, .wave-team-header__title, .wave-section-title {
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    font-weight: 900 !important;
}

.wave-news-header__bar, .wave-promo-header__bar, .wave-team-header__bar {
    background: var(--wave-text) !important;
    width: 12px !important;
    border-radius: 0 !important;
}


/* --- PLAYER --- */
.wave-player {
    border-top: 4px solid #000 !important;
    background: var(--wave-surface-strong) !important;
    box-shadow: none !important;
}

.wave-player-controls__play {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: #000 !important; /* brutalist loud contrast */
}

body.theme-light .wave-player-controls__play {
    color: #000 !important;
}

.wave-player-controls__play:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--color-secondary) !important;
}

.wave-volume-slider__track {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    height: 12px !important;
    background: var(--wave-bg-deep) !important;
}
.wave-volume-slider__thumb {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    background: var(--color-primary) !important;
    width: 18px !important;
    height: 24px !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

/* Mobile Video Player Wrapper Pill */
.wave-mobile-player {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--wave-surface-strong) !important;
}


/* --- BUTTONS --- */
.wave-news-card__link, .wave-promo-card__cta, .btn, .wave-btn {
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease !important;
    padding: 10px 20px !important;
    background: var(--wave-surface-strong) !important;
    color: var(--wave-text) !important;
    display: inline-flex;
    align-items: center;
}
.wave-news-card__link:hover, .wave-promo-card__cta:hover, .btn:hover, .wave-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}


/* Labels and Pills (Borders instead of background) */
.wave-news-card__pill, .wave-promo-card__pill, .wave-onair__label {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--wave-bg-deep) !important;
    color: var(--wave-text) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    font-weight: 800 !important;
}

/* Forms and Inputs */
input, select, textarea, .form-control {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--wave-surface) !important;
    color: var(--wave-text) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none !important;
    border-color: #000 !important;
    box-shadow: 4px 4px 0 var(--color-secondary) !important;
}

/* Footer structure overrides */
.wave-footer {
    border-top: 4px solid var(--color-primary) !important;
    background: var(--wave-bg-deep) !important;
}
.wave-footer__col-title {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 8px;
    margin-bottom: 24px;
}

/* Banners sem radius/borda/shadow (Cantos Retos) */
.banner-wrapper, .banner-slot, .banner-section, .home-banner img, .banner img, img[src*="banners"], a[class*="banner"] img {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 1: HERO / SLIDER
 * ============================================================================ */

/* Borda inferior brutalista na seção hero */
.wave-slider {
    border-bottom: 4px solid var(--wave-glass-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Remover border-radius de todos os containers do slider */
.wave-slider--rounded,
.wave-slider--contained,
.wave-slider__container,
.wave-slider__track,
.wave-slider__carousel {
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Título do hero: peso brutalista */
.wave-slide__title {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}

/* Botão CTA do hero: estilo brutalista */
.wave-slide__cta {
    border: 3px solid var(--wave-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--wave-surface-strong) !important;
    color: var(--wave-text) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.wave-slide__cta:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    background: var(--color-secondary) !important;
    color: var(--wave-bg-deep) !important;
}

/* Dots do slider: quadrados brutalistas */
.wave-slider__dot {
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
    background: var(--wave-surface) !important;
}
.wave-slider__dot.active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 0 var(--wave-bg-deep) !important;
}

/* Setas do slider: quadradas brutalistas */
.wave-slider__arrow {
    border-radius: 0 !important;
    border: 3px solid var(--wave-glass-border) !important;
    background: var(--wave-surface-strong) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    backdrop-filter: none !important;
}
.wave-slider__arrow:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 3px 3px 0 var(--wave-bg-deep) !important;
    transform: translate(-2px, -2px) !important;
}

/* Mobile: sem border-radius no slider */
@media (max-width: 768px) {
    body .wave-slider.slider-fullscreen,
    body .hero-slider.slider-fullscreen {
        margin: 0 !important;
        width: 100% !important;
    }
    body .wave-slider,
    body .wave-slider.slider-fullscreen,
    body .wave-slider--contained,
    body .wave-slider__container,
    body .wave-slider__track,
    body .wave-slider__carousel,
    body .wave-slide,
    body .wave-slide__img,
    body .hero-slider,
    body .hero-slider.slider-fullscreen,
    body .hero-slider--contained,
    body .hero-slide,
    body .hero-slide__media,
    body .hero-slide__media img {
        border-radius: 0 !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 2: NO AR AGORA
 * ============================================================================ */

/* Card principal brutalist */
.wave-onair-card {
    border: 2px solid var(--wave-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--wave-surface-strong) !important;
}

/* Foto do locutor: sem border-radius */
.wave-onair-card__photo,
.wave-onair-card__photo-wrap,
.wave-onair-card__photo-glow,
.wave-onair-card__photo-placeholder {
    border-radius: 0 !important;
}

/* Remover o glow circular da foto */
.wave-onair-card__photo-glow {
    display: none !important;
}

/* Foto: borda brutalista */
.wave-onair-card__photo {
    border: 3px solid var(--wave-glass-border) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}

/* Badge "NO AR AGORA" / live-badge: tag brutalista */
.wave-onair-card__live-badge {
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--wave-bg-deep) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Label "AO VIVO" do header da seção */
.wave-onair__label,
.wave-news-header__label {
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

/* Nome do programa e locutor: uppercase */
.wave-onair-card__name,
.wave-onair-card__host {
    text-transform: uppercase !important;
}

/* Placeholder sem arredondamento */
.wave-onair-card__photo-placeholder {
    border-radius: 0 !important;
    border: 3px solid var(--wave-glass-border) !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 3: TOP MÚSICAS
 * ============================================================================ */

/* Cada item da lista */
.wave-chart-track {
    border: 2px solid var(--wave-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--wave-surface) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Hover com offset sólido */
.wave-chart-track:hover {
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    transform: translate(-2px, -2px) !important;
    border-color: var(--color-primary) !important;
}

/* Estado ativo */
.wave-chart-track.wave-chart-active {
    border-color: var(--color-primary) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

/* Thumbnail/cover da música: recorte quadrado, sem border-radius */
.wave-chart-track__cover,
.wave-chart-track__cover-img {
    border-radius: 0 !important;
}

/* Botão play overlay: sem border-radius */
.wave-chart-track__play-overlay {
    border-radius: 0 !important;
}

/* Numeração: peso brutalista */
.wave-chart-track__rank {
    font-weight: 900 !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
}

/* Separador entre itens: sólido, sem opacity reduzida */
.wave-chart-track + .wave-chart-track {
    border-top: 1px solid var(--wave-glass-border) !important;
}

/* Botões de voto: sem border-radius */
.wave-vote-btn {
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
}
.wave-vote-btn:hover,
.wave-vote-btn.voted {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--wave-bg-deep) !important;
}

/* Player inline brutalista */
.wave-inline-player {
    border-radius: 0 !important;
    border-top: 2px solid var(--wave-glass-border) !important;
}

.wave-inline-player__btn {
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

.wave-inline-player__bar {
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
}

.wave-inline-player__progress {
    border-radius: 0 !important;
    background: var(--color-primary) !important;
}

/* CTA do chart (Ver Todas) */
.wave-chart-header__cta {
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    color: var(--wave-text) !important;
    text-decoration: none !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.wave-chart-header__cta:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--wave-bg-deep) !important;
    border-color: var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 4: FOOTER
 * ============================================================================ */

/* Borda superior grossa de destaque */
.wave-footer {
    border-top: 4px solid var(--color-primary) !important;
    background: var(--wave-bg-deep) !important;
    border-radius: 0 !important;
}

/* Títulos das colunas */
.wave-footer__heading,
.wave-footer__col-title {
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
}

/* Links do footer */
.wave-footer__links a,
.wave-footer__contact a,
.wave-footer__privacy-link {
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    border-radius: 0 !important;
    display: inline-block;
}
.wave-footer__links a:hover,
.wave-footer__contact a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* Ícones de redes sociais: containers quadrados brutalistas */
.wave-footer__social-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease !important;
    background: var(--wave-surface) !important;
    color: var(--wave-text) !important;
}
.wave-footer__social-btn:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    transform: translate(-1px, -1px) !important;
    background: var(--color-primary) !important;
    color: var(--wave-bg-deep) !important;
}

/* Linha inferior do footer */
.wave-footer__bottom {
    border-top: 2px solid var(--wave-glass-border) !important;
    border-radius: 0 !important;
}

/* Logo do dev no footer: sem arredondamento */
.wave-footer__dev-logo,
.wave-footer__logo img {
    border-radius: 0 !important;
}

/* Copyright e crédito */
.wave-footer__copyright,
.wave-footer__credit-text,
.wave-footer__credit-link {
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
}

/* Accent line no topo do footer (caso exista) */
.wave-footer__accent-line {
    height: 0 !important;
    display: none !important;
}

/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 5: SETAS DO SLIDER
 * ============================================================================ */

/* Setas sempre visíveis — sem opacity: 0 nem visibility: hidden */
.wave-slider__arrow,
.wave-slider__arrow--prev,
.wave-slider__arrow--next {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    /* Container quadrado brutalista */
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
    border: 3px solid var(--wave-glass-border) !important;
    background: var(--wave-surface-strong) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--wave-text) !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* Hover brutalista: deslocamento + swap de cor */
.wave-slider__arrow:hover,
.wave-slider__arrow--prev:hover,
.wave-slider__arrow--next:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--wave-bg-deep) !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 6: BANNERS — CANTOS RETOS
 * ============================================================================ */

/* Base: sem border-radius, sem glow em todos os elementos internos */
.banner-slot *,
.banner-html-content {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Wrapper do slot: sem border aqui — ele estica pela célula do grid,
   a borda ficaria solta abaixo do conteúdo real */
.banner-slot {
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* A BORDA vai nos elementos de conteúdo interno, que têm a altura real */
.banner-slot > a,
.banner-slot > img,
.banner-slot > .banner-html-content {
    border: 2px solid var(--wave-glass-border) !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

/* Imagens de banner: sem arredondamento, preenche o container */
.banner-slot img,
.banner-slot a img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

/* Slots de POSIÇÃO FIXA (fora de grid): borda e aspect-ratio no container */

/* Billboard — dimensões livres, container se ajusta à altura da imagem */
.banner-slot--topo,
.banner-slot--entre_blocos {
    width: 100% !important;
    border: 2px solid var(--wave-glass-border) !important;
}

/* Rodapé — Retângulo Padrão 728×90 */
.banner-slot--rodape {
    aspect-ratio: 728 / 90 !important;
    width: 100% !important;
    border: 2px solid var(--wave-glass-border) !important;
}

/*
 * In-grid: shrink-wrap ao conteúdo real para que a borda (no <a>/<img> interno)
 * não fique solta abaixo do banner.
 */
.banner-slot--in_grid_noticias,
.banner-slot--in_grid_eventos,
.banner-slot--in_grid_podcasts,
.banner-slot--in_grid_promocoes,
.banner-slot--in_grid_top_musicas,
.banner-slot--in_grid_equipe {
    width: 100% !important;
    height: fit-content !important;      /* contrai ao tamanho do conteúdo */
    align-self: start !important;        /* não estica na célula do grid */
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 7: BOTÕES — ZERO border-radius GLOBAL
 * ============================================================================ */

/* Zero border-radius em TODOS os botões do tema */
button,
[type="button"],
[type="submit"],
[type="reset"],
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.wave-btn,
.button,
a.btn,
a[class*="btn"],
.wave-news-card__link,
.wave-promo-card__cta,
.wave-chart-header__cta,
.wave-slide__cta,
.wave-team-card__social,
.wave-team-card__modal-cta,
.wave-event-card__cta,
.s-event-card__cta,
.wave-header__cta,
.wave-player-controls__play,
.wave-search__btn,
.wave-header__mobile-btn {
    border-radius: 0 !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 8: CARDS DE EVENTO E DETALHES
 * ============================================================================ */

/* Remover fundo da seção Eventos */
.wave-events-section,
.wave-events-section.section-alt {
    background: var(--cor-fundo, transparent) !important;
}

/* Override do CTA: de pill com glow para botão brutalista preto */
.wave-event-card__cta,
.s-event-card__cta {
    border-radius: 0 !important;
    border: 2px solid var(--cor-texto-primario, var(--text-primary, #000)) !important;
    background: transparent !important;
    color: var(--cor-texto-primario, var(--text-primary, #000)) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 8px 16px !important;
    box-shadow: none !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, color 0.1s ease !important;
    /* Remover box-shadow com blur do glassmorphism */
    filter: none !important;
}

/* Hover: offset sólido sem blur */
.wave-event-card__cta:hover,
.s-event-card__cta:hover {
    box-shadow: 3px 3px 0 var(--cor-texto-primario, var(--text-primary, #000)) !important;
    transform: translate(-2px, -2px) !important;
    background: var(--cor-texto-primario, var(--text-primary, #000)) !important;
    color: var(--cor-fundo, var(--wave-bg-deep, #fff)) !important;
    border-color: var(--cor-texto-primario, var(--text-primary, #000)) !important;
}

/* Ícone dentro do CTA: mantém tamanho, sem mudança */
.wave-event-card__cta i,
.s-event-card__cta i {
    font-size: 0.75rem !important;
}

/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 9: PLAYER ARTWORK (CAPA DO TOCADOR)
 * ============================================================================ */

/* Garante que a capa do player fique contida em 52x52 e mantenha a estética brutalista */
.wave-player__artwork {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    border-radius: 0 !important;
    border: 2px solid var(--wave-glass-border) !important;
    overflow: hidden !important;
    display: block !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.wave-player__artwork img {
    width: 100% !important;
    height: 100% !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    position: static !important;
}

/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 10: PLAYER DESKTOP E MINI PLAYER MOBILE
 * ============================================================================ */

/* 1. PLAYER DESKTOP (BARRA FIXA) E ESTRUTURA GERAL */

/* Container Principal do Player */
html body #player.wave-player {
    border-radius: 0 !important;
    border-top: 3px solid #000000 !important; /* Retornado para a cor preta padrão dos cards */
}

/* Força a remoção incondicional da forma circular declarada inline no player */
html body #player.wave-player .round-btn,
html body #player.wave-player .wave-btn {
    border-radius: 0 !important;
}

/* Substitui a regra de artwork com opacity conforme solicitado e blinda totalmente o eixo dimensional */
html body #player .wave-player__artwork,
html body #player #playerArtwork,
html body #player.wave-player .wave-player__artwork,
html body #player.wave-player #playerArtwork {
    border-radius: 0 !important;
    border: 2px solid #000000 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

html body #player .wave-player__artwork img,
html body #player #playerArtwork img,
html body #player.wave-player .wave-player__artwork img,
html body #player.wave-player #playerArtwork img {
    width: 100% !important;
    height: 100% !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Botões do painel play (Play, Rádio, Volume) -> Formato brutalista + Borda PRETA */
html body #player.wave-player #playBtn,
html body #player.wave-player #zmpLiveBtn,
html body #player.wave-player #volumeBtn,
html body #player.wave-player .zmp-btn {
    border-radius: 0 !important;
    border: 2px solid #000000 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Efeito tátil de pressão / mouse no hover */
html body #player.wave-player #playBtn:hover,
html body #player.wave-player #zmpLiveBtn:hover,
html body #player.wave-player #volumeBtn:hover {
    box-shadow: 3px 3px 0 #000000 !important; /* Sombra preta para acompanhar a borda */
    transform: translate(-1px, -1px) !important;
}

/* Slider de Volume - Manter background livre de overrides para o JS colorir o progresso! */
html body #player .zmp-volume-slider {
    border-radius: 0 !important;
    outline: none !important;
}

/* Limpar o track interno do navegador para evitar a duplicação na renderização */
html body #player .zmp-volume-slider::-webkit-slider-runnable-track {
    background: transparent !important;
    border: none !important;
}

/* Thumb do slider de volume (O indicador quadradinho) */
html body #player .zmp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 0 !important;
    border: 2px solid #000000 !important;
    background: var(--player-bg) !important;
    box-shadow: none !important;
    margin-top: -5px !important; /* Alinha no centro do track original (media de -5px pra centralizar os 14px na linha de 4px) */
}
html body #player .zmp-volume-slider::-moz-range-thumb {
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 0 !important;
    border: 2px solid #000000 !important;
    background: var(--player-bg) !important;
    box-shadow: none !important;
}

/* Botão "ASSISTIR AO VIVO" */
html body #player .wave-player__watch-btn {
    border-radius: 0 !important;
    border: 2px solid #000000 !important;
    background: transparent !important;
    color: var(--player-text-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: none !important;
    transition: all 0.1s ease !important;
}
html body #player .wave-player__watch-btn:hover {
    background: #000000 !important;
    color: var(--color-primary) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    transform: translate(-2px, -2px) !important;
}
html body #player .wave-player__watch-btn:hover .wave-watch-label {
    color: var(--color-primary) !important;
}
html body #player .wave-player__watch-btn:hover .wave-watch-dot {
    background: var(--color-primary) !important;
}

/* Badge "AO VIVO" (geral da interface) e mini dot */
html body #player .wave-player__live-badge,
html body #player .wave-player__status,
html body #player #mobileReturnLiveBtn {
    border-radius: 0 !important;
}


/* 2. MINI PLAYER MOBILE ESPECÍFICO */
@media (max-width: 768px) {
    /* Container Pílula -> Retângulo Rígido com Shadow Preta Brutalista */
    html body #player.wave-player {
        border-radius: 0 !important;
        border: 3px solid #000000 !important; /* Padrão solicitado */
        box-shadow: 4px 4px 0 #000000 !important;
    }

    /* Album art no mini player */
    html body #player.wave-player .wave-player__artwork,
    html body #player.wave-player #playerArtwork,
    html body #player.wave-player .nmp-fallback-logo,
    html body #player.wave-player #epArtworkImg {
        border-radius: 0 !important;
        border: 2px solid #000000 !important;
    }

    /* Botão Play no mini player (Específico estado Active) */
    html body #player.wave-player #playBtn {
        border-radius: 0 !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }
    html body #player.wave-player #playBtn:active {
        opacity: 0.8 !important;
        box-shadow: none !important;
        transform: translate(2px, 2px) !important;
    }

    /* Layout da Informação da Faixa Mobile: Reset flex handling for global rules */
    html body #player.wave-player .wave-player__artist,
    html body #player.wave-player .wave-player__title {
        display: block;
    }
}

/* =========================================
   3. VIDEO PLAYER (DESKTOP E MOBILE)
   ========================================= */
/* Bordas quadradas do Video Player apenas no Wave */
html body .vmp-widget,
html body .video-mobile-section {
    border-radius: 0 !important;
}

/* Botões utilitários do Video Player alinhados ao visual quadrangular */
html body .vmp-ctrl-btn,
html body .vmp-hd-badge,
html body .vmp-live-badge,
html body .vms-play-btn,
html body .vms-float-btn,
html body .vms-status-pill,
html body #vms-fs-close {
    border-radius: 0 !important;
}

/* ============================================================================
 * WAVE BRUTALISM — CHARTS/TOP MUSICS (CAPAS AUMENTADAS)
 * ============================================================================ */

/* Aumentar para 72px e aplicar brutalismo na capa */
.wave-chart-track__cover,
.wave-chart-track__cover img,
.wave-chart-track__cover-img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
}

.wave-chart-track__cover {
    border: 2px solid var(--text-primary, #000) !important;
    box-shadow: 3px 3px 0 var(--color-primary, #f00) !important;
}

/* Altura mínima do container para acomodar a capa ampliada */
.wave-chart-track,
.wave-chart-track__row {
    min-height: 80px !important;
    align-items: center !important;
}

/* Redução para mobile conforme solicitado (56px) */
@media (max-width: 768px) {
    .wave-chart-track__cover,
    .wave-chart-track__cover img,
    .wave-chart-track__cover-img {
        width: 56px !important;
        height: 56px !important;
    }
    
    .wave-chart-track,
    .wave-chart-track__row {
        min-height: 64px !important;
    }
}

/* ============================================================================
 * WAVE BRUTALISM — MOBILE OVERRIDES (BORDER RADIUS & ESPAÇAMENTO)
 * ============================================================================ */
@media (max-width: 768px) {
    /* 1. Zerar vazamento de cantos arredondados dentro dos cards */
    
    /* Containers primários */
    .wave-promo-card, .wave-podcast-card, .wave-event-card, .wave-team-card, .team-card, .wave-news-card-item {
        border-radius: 0 !important;
    }

    /* Imagens e Envoltórios com overflow que forçam curvatura */
    .wave-promo-card__img, .wave-promo-card__img img,
    .wave-event-card__img, .wave-event-card__img img, .wave-event-card__img-ph,
    .wave-podcast-card__cover, .wave-podcast-card__cover img, .wave-podcast-card__play, .wave-podcast-card__play-circle,
    .wave-team-card__avatar-wrap, .wave-team-card__avatar, .team-avatar-wrapper, .team-avatar-img, .wave-team-card__avatar-initials {
        border-radius: 0 !important;
        object-fit: cover !important;
    }

    /* Badges e Tags */
    .wave-promo-badge, 
    .wave-event-card__date-badge {
        border-radius: 0 !important;
    }

    /* 2. Nossa Equipe - Ajustes e Efeito Peek */
    /* Proteger os dots do carrossel da regra global de botão brutalista */
    .team-carousel-dots button {
        border-radius: 50% !important;
        background: var(--text-primary) !important;
        opacity: 0.5 !important;
    }
    
    .team-carousel-dots button:hover, .team-carousel-dots button[style*="scale(1.2)"] {
        opacity: 1 !important;
        background: var(--color-primary) !important;
    }

    /* Transformar o slider da Equipe e forçar Peek mantendo o Slider JS ativo */
    .wave-team-section .team-carousel-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        
        /* Limitamos a largura lida pelo JS a 72vw (idêntico a Promoções) */
        width: 72vw !important;
        overflow: visible !important;
        
        /* Garantir que o scroll native fique desligado para o JS agir livremente */
        overflow-x: visible !important;
    }

    /* Manter a lacuna (gap) idêntica à das Promoções (12px) */
    .wave-team-section .team-carousel-inner {
        gap: 12px !important;
    }

    /* O JS injetará o flex baseado nos 72vw, mas garantimos esse fallback caso não pegue de primeira */
    .wave-team-section .wave-team-card {
        flex: 0 0 72vw !important;
        min-width: 72vw !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 11: PAGE HEADER GLOBAL (partials/page-header.php)
 * Aplica-se a todas as listing pages e páginas internas
 * ============================================================================ */

.page-header,
.pd-page-hero {
    border: 4px solid #000 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    padding: 2.5rem 1.5rem !important;
    margin-bottom: 32px !important;
}

.page-header h1,
.page-header .page-header__title,
.pd-page-hero__title,
.pd-page-hero h1 {
    text-transform: uppercase !important;
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    letter-spacing: -0.02em !important;
    border-radius: 0 !important;
    color: var(--bg-primary, #fff) !important;
}

.page-header p,
.page-header .page-header__subtitle,
.pd-page-hero__desc {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--bg-primary, #fff) !important;
    opacity: 0.85;
}

/* Page body spacing */
.page-body {
    padding-bottom: 60px;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 12: LISTING PAGES (nl-*, el-*, pl-*, pod-l-*)
 * Brutalist override dos cards e hero das páginas de listagem
 * ============================================================================ */

/* ── Filtros de categoria ── */
.nl-chip,
.nl-filter-chip {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-family: var(--nav-font-family) !important;
    font-weight: var(--nav-font-weight, bold) !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.nl-chip:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    border-color: #000 !important;
}

.nl-chip--active {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border-color: #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
}

/* ── Hero card de notícia ── */
.nl-hero {
    border: 4px solid #000 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.nl-hero:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 8px 8px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

.nl-hero__img {
    border-radius: 0 !important;
    border-bottom: 3px solid #000 !important;
}

.nl-hero__img-wrap {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.nl-hero__overlay {
    background: none !important;
}

.nl-hero__title {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
}

.nl-hero:hover .nl-hero__title {
    color: var(--color-primary) !important;
}

.nl-hero__excerpt {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--text-secondary) !important;
}

/* ── Grid de cards de notícia ── */
.nl-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.nl-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.nl-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

.nl-card__img-wrap {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.nl-card__img {
    border-radius: 0 !important;
    border-bottom: 3px solid #000 !important;
}

.nl-card:hover .nl-card__img {
    transform: none !important;
}

.nl-card__title {
    font-family: var(--card-title-font-family) !important;
    font-size: var(--card-title-font-size) !important;
    font-weight: var(--card-title-font-weight, bold) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
}

.nl-card:hover .nl-card__title {
    color: var(--color-primary) !important;
}

.nl-card__excerpt {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--text-secondary) !important;
}

.nl-card__date {
    border-top: 2px solid #000 !important;
    font-family: var(--body-font-family) !important;
    color: var(--text-muted) !important;
}

.nl-card__date i {
    color: var(--color-primary) !important;
}

/* ── Badge de categoria ── */
.nl-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* ── Load more button ── */
#loadMoreBtn {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#loadMoreBtn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

/* ── Responsive grid ── */
@media (max-width: 1024px) {
    .nl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .nl-grid {
        grid-template-columns: 1fr !important;
    }
    .nl-hero {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }
    .nl-card {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }
    .nl-card:hover {
        box-shadow: 5px 5px 0 var(--color-secondary) !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 13: SINGLE PAGES (ns-*, ev-*, pr-*, ep-*)
 * ============================================================================ */

/* ── Hero da single page (notícia, evento, promoção, podcast) ── */
.ns-hero,
.ev-hero,
.pr-hero,
.ep-hero,
.on-air-hero {
    border: 4px solid #000 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    margin-bottom: 32px !important;
}

/* ── Imagem de destaque da single ── */
.ns-hero img,
.ev-hero img,
.pr-hero img,
.ep-hero img {
    width: 100% !important;
    border-radius: 0 !important;
    border-bottom: 4px solid #000 !important;
    display: block !important;
    object-fit: cover !important;
}

/* ── Título principal da single ── */
.ns-title,
.ev-title,
.pr-title,
.ep-title,
.on-air-title {
    text-transform: uppercase !important;
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    border-radius: 0 !important;
}

/* ── Meta (data, categoria, autor) ── */
.ns-meta,
.ev-meta,
.pr-meta,
.ep-meta,
.ns-meta-row,
.ev-meta-row {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
}

/* ── Badge de categoria na single ── */
.ns-badge,
.ev-badge,
.pr-badge,
.ep-badge,
.ns-category-badge,
.news-category-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* ── Container do corpo de conteúdo ── */
.ns-body,
.ev-body,
.pr-body,
.ep-body,
.ns-content,
.ns-body-content,
.ev-description,
.pr-description,
.ep-desc-content {
    border: 3px solid #000 !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    margin-bottom: 24px !important;
}

/* ── Texto do corpo ── */
.ns-body-content p,
.ev-description p,
.pr-description p,
.ep-desc-content p,
.pr-rules-body p,
.ns-lead {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
}

/* ── Headings internos do corpo ── */
.ns-body-content h2,
.ns-body-content h3,
.ev-description h2,
.ev-description h3,
.pr-description h2,
.pr-description h3,
.ep-desc-content h2,
.ep-desc-content h3 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
}

/* ── Blockquote ── */
.ns-body-content blockquote,
.ev-description blockquote,
.pr-description blockquote {
    border-left: 6px solid var(--color-primary) !important;
    background: var(--bg-card) !important;
    border-radius: 0 !important;
    padding: 1rem 1.5rem !important;
    margin: 1.5rem 0 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* ── Links inline ── */
.ns-body-content a,
.ev-description a,
.pr-description a,
.ep-desc-content a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.ns-body-content a:hover,
.ev-description a:hover,
.pr-description a:hover,
.ep-desc-content a:hover {
    color: var(--color-secondary) !important;
}

/* ── Sidebar / Relacionados ── */
.ns-sidebar,
.ev-sidebar,
.ep-sidebar {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

.ns-sidebar-title,
.ev-sidebar-title,
.ep-sidebar-title,
.ns-sidebar-heading {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid #000 !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
}

.ns-sidebar-card,
.ns-sidebar-card-item {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ns-sidebar-card:hover,
.ns-sidebar-card-item:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
}

.ns-sidebar-card-title {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, bold) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
}

/* ── Botões de ação da single ── */
.ns-share-btn,
.ev-share-btn,
.pr-share-btn,
.ep-share-btn,
.ns-back-btn,
.ev-back-btn,
.pr-back-btn,
.ep-back-btn {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ns-share-btn:hover,
.ev-share-btn:hover,
.pr-share-btn:hover,
.ep-share-btn:hover,
.ns-back-btn:hover,
.ev-back-btn:hover,
.pr-back-btn:hover,
.ep-back-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

/* ── Mobile single ── */
@media (max-width: 768px) {
    .ns-body,
    .ns-body-content,
    .ev-description,
    .pr-description,
    .ep-desc-content {
        padding: 1rem !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 14: PÁGINA EQUIPE (pages/team.php)
 * ============================================================================ */

/* Cards de membro (version páginas globais) */
.team-card,
.team-member-card,
.team-grid-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.team-card:hover,
.team-member-card:hover,
.team-grid-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
}

/* Avatar quadrado */
.team-avatar,
.team-avatar-img,
.team-avatar-wrapper img,
.team-member-photo,
.team-member-photo img {
    border-radius: 0 !important;
    border: 4px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    object-fit: cover !important;
}

/* Nome do membro */
.team-name,
.team-member-name,
.team-card__name {
    text-transform: uppercase !important;
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, bold) !important;
    color: var(--card-title-color, var(--text-primary)) !important;
}

/* Cargo */
.team-role,
.team-member-role,
.team-card__role {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    color: var(--body-font-color, var(--text-secondary)) !important;
    text-transform: uppercase !important;
}

/* Bio */
.team-bio,
.team-member-bio,
.team-card__bio {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-secondary)) !important;
}

/* Ícones de social */
.team-social-btn,
.team-social-icon,
.team-social a {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.team-social-btn:hover,
.team-social-icon:hover,
.team-social a:hover {
    background: var(--color-secondary) !important;
    color: #000 !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* Modal de equipe */
.team-modal,
.team-modal-backdrop {
    border-radius: 0 !important;
}

.team-modal-inner,
.team-modal-content {
    border: 4px solid #000 !important;
    box-shadow: 8px 8px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
}

.team-modal__close {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 15: PROGRAMAÇÃO (pages/programacao.php)
 * ============================================================================ */

/* Tabs de dia da semana */
.prog-tabs,
.schedule-tabs,
.prog-tab-list {
    border-radius: 0 !important;
    border-bottom: 3px solid #000 !important;
    gap: 4px !important;
}

.prog-tab,
.schedule-tab,
.prog-tab-btn {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-family: var(--nav-font-family) !important;
    font-size: var(--nav-font-size) !important;
    font-weight: var(--nav-font-weight, bold) !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transition: transform 0.1s ease, background 0.1s ease !important;
    cursor: pointer !important;
}

.prog-tab:hover,
.schedule-tab:hover,
.prog-tab-btn:hover {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    box-shadow: 3px 3px 0 #000 !important;
    transform: translate(-1px, -1px) !important;
}

.prog-tab--active,
.schedule-tab--active,
.prog-tab-btn.active,
.prog-tab.active,
.schedule-tab.active {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border-color: #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
}

/* Linhas de programação */
.prog-item,
.schedule-item,
.prog-row,
.schedule-row {
    border-bottom: 2px solid #000 !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    transition: background 0.1s ease !important;
}

.prog-item:hover,
.schedule-item:hover,
.prog-row:hover,
.schedule-row:hover {
    background: rgba(var(--primary-rgb, 0,0,0), 0.08) !important;
}

/* Horário */
.prog-time,
.schedule-time {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
}

/* Nome do programa */
.prog-name,
.schedule-name,
.prog-show-name {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, bold) !important;
    color: var(--card-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
}

/* Descrição do programa */
.prog-desc,
.schedule-desc,
.prog-show-desc {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-secondary)) !important;
}

/* Tabs scroll no mobile */
@media (max-width: 768px) {
    .prog-tabs,
    .schedule-tabs,
    .prog-tab-list {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 16: CONTATO (pages/contact.php)
 * ============================================================================ */

/* Container do formulário */
.contact-form,
.contact-container,
.contact-section {
    border: 3px solid #000 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 2rem !important;
}

/* Labels */
.contact-form label,
.contact-label {
    text-transform: uppercase !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    color: var(--text-primary) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* Inputs, textareas, selects — já cobertos pela regra global, reforçar aqui */
.contact-form input,
.contact-form textarea,
.contact-form select {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    width: 100% !important;
    padding: 12px 14px !important;
    transition: box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-color: #000 !important;
}

/* Botão de envio */
.contact-submit,
.contact-form [type="submit"] {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.contact-submit:hover,
.contact-form [type="submit"]:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

/* Info de contato lateral */
.contact-info,
.contact-info-block {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

.contact-info-label {
    text-transform: uppercase !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    color: var(--color-primary) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100% !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 17: PÁGINAS DINÂMICAS / SOBRE / PAGE-DEFAULT
 * ============================================================================ */

/* Blocos de texto */
.bloco-texto,
.pd-compat-text,
.pd-compat-rich,
.pd-page-content,
.about-content,
.sobre-content {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
    margin-bottom: 24px !important;
}

/* Imagens institucionais */
.about-image,
.sobre-image,
.institutional-img,
.pd-page-image {
    border: 4px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    display: block !important;
    max-width: 100% !important;
    object-fit: cover !important;
}

/* Paginação global — para todas as listing pages */
.pagination,
.paginacao {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 40px !important;
}

.pagination a,
.pagination button,
.paginacao a,
.paginacao button {
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-family: var(--nav-font-family) !important;
    font-weight: var(--nav-font-weight, bold) !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pagination a:hover,
.pagination button:hover,
.paginacao a:hover,
.paginacao button:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

.pagination .active,
.pagination .current,
.paginacao .active,
.paginacao .current {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border-color: #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 18: PAGE BUILDER — PÁGINAS DINÂMICAS
 * Seletores confirmados contra pages/page-default.php
 * Classes reais: .pd-cover-image, .pd-page-section, .pd-page-content,
 *                .pd-blocos-wrapper, .bloco, .bloco-{tipo},
 *                .pd-compat-text, .pd-compat-rich, .pd-back-btn
 * ============================================================================ */


/* ── 18A: Imagem de capa (.pd-cover-image) ── */

.pd-cover-image {
    border: 4px solid #000 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

.pd-cover-image img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}


/* ── 18B: Estrutura da seção e conteúdo ── */

.pd-page-section {
    padding: 0 0 3rem 0 !important;
}

.pd-page-content {
    padding: 0 !important;
}

.pd-blocos-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}


/* ── 18C: Wrapper externo de cada bloco (.bloco) ──
   Estrutura de page-default.php linha 198:
   <div class="bloco bloco-{tipo}">…conteúdo…</div>
   Sem borda no .bloco wrapper — a borda vai no conteúdo interno
   para evitar dupla moldura ── */

.bloco {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ── 18D: Bloco de texto (.bloco-texto) ──
   Uma única moldura no container, sem bordas nos elementos internos ── */

.bloco-texto {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

/* Remover bordas residuais em qualquer elemento filho direto */
.bloco-texto > * {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Parágrafos */
.bloco-texto p {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-texto p:last-child {
    margin-bottom: 0 !important;
}

/* Headings internos */
.bloco-texto h2,
.bloco-texto h3 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-texto h4,
.bloco-texto h5,
.bloco-texto h6 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0.75rem !important;
}

/* Links dentro do texto */
.bloco-texto a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-texto a:hover {
    color: var(--color-secondary) !important;
}

/* Listas */
.bloco-texto ul,
.bloco-texto ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-texto li {
    font-family: var(--body-font-family) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    margin-bottom: 0.4rem !important;
    border: none !important;
    box-shadow: none !important;
}

/* Blockquote */
.bloco-texto blockquote {
    border-left: 6px solid var(--color-primary) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.25rem !important;
    margin: 1rem 0 !important;
}

/* Código inline */
.bloco-texto code {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: var(--bg-secondary, var(--bg-card)) !important;
    padding: 0.15em 0.4em !important;
}

/* Bloco de código */
.bloco-texto pre {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-secondary, var(--bg-card)) !important;
    padding: 1rem !important;
    overflow-x: auto !important;
}


/* ── 18E: Bloco de imagem (.bloco-imagem) ── */

.bloco-imagem {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.bloco-imagem-full {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.bloco-imagem img,
.bloco-imagem-full img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

.bloco-imagem figcaption,
.bloco-imagem-full figcaption {
    padding: 0.5rem 0.75rem !important;
    border-top: 2px solid #000 !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    color: var(--text-secondary) !important;
    background: var(--bg-card) !important;
}


/* ── 18F: Bloco de vídeo (.bloco-video) ── */

.bloco-video {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
}

.bloco-video iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
}


/* ── 18G: Bloco CTA (.bloco-cta) ── */

.bloco-cta {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    text-align: center !important;
}

.bloco-cta h2 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    margin-bottom: 0.75rem !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-cta p {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    color: var(--body-font-color, var(--text-secondary)) !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-cta-btn {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1.5rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-cta-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}


/* ── 18H: Bloco botão (.bloco-botao / .bloco-botao-link) ── */

.bloco-botao {
    border: none !important;
    box-shadow: none !important;
}

.bloco-botao-link {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.75rem 2rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-botao-link.botao-secundario {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.bloco-botao-link:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}

.bloco-botao.align-left  { text-align: left !important; }
.bloco-botao.align-right { text-align: right !important; }
.bloco-botao.align-center { text-align: center !important; }


/* ── 18I: Bloco formulário (.bloco-formulario) ── */

.bloco-formulario {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

.bloco-formulario .form-titulo {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid #000 !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-formulario .form-field-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-formulario label {
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-formulario .req-star {
    color: var(--color-primary) !important;
}

.bloco-formulario input,
.bloco-formulario textarea,
.bloco-formulario select {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    padding: 10px 14px !important;
    width: 100% !important;
    transition: box-shadow 0.15s ease !important;
}

.bloco-formulario input:focus,
.bloco-formulario textarea:focus,
.bloco-formulario select:focus {
    outline: none !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

.bloco-formulario .form-submit-btn {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1.75rem !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    margin-top: 0.5rem !important;
}

.bloco-formulario .form-submit-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

.bloco-formulario .form-msg.error {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    padding: 0.75rem 1rem !important;
    margin-top: 0.75rem !important;
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}

.bloco-formulario .form-success {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--color-secondary) !important;
    padding: 1rem !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}


/* ── 18J: Divisor (.bloco-divisor) ── */

.bloco-divisor {
    border: none !important;
    border-top: 3px solid #000 !important;
    box-shadow: none !important;
    margin: 0 !important;
}


/* ── 18K: Compatibilidade retroativa (.pd-compat-text / .pd-compat-rich) ── */

.pd-compat-text {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    margin-bottom: 1.5rem !important;
}

.pd-compat-rich {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Elementos internos do rich sem bordas adicionais */
.pd-compat-rich p,
.pd-compat-rich li,
.pd-compat-rich a {
    border: none !important;
    box-shadow: none !important;
}

.pd-compat-rich a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.pd-compat-rich a:hover {
    color: var(--color-secondary) !important;
}

.pd-compat-rich h2,
.pd-compat-rich h3 {
    text-transform: uppercase !important;
    border-bottom: 2px solid #000 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
}


/* ── 18L: Botão Voltar (.pd-back-btn) ── */

.pd-back-btn {
    margin-top: 2.5rem !important;
    border-top: 2px solid #000 !important;
    padding-top: 1.5rem !important;
}

.pd-back-btn .btn {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    text-decoration: none !important;
}

.pd-back-btn .btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

.pd-empty {
    font-family: var(--body-font-family) !important;
    color: var(--text-muted) !important;
    font-style: italic !important;
    padding: 2rem 0 !important;
}


/* ── 18M: Mobile ── */

@media (max-width: 768px) {
    .pd-blocos-wrapper {
        gap: 1.5rem !important;
    }

    .pd-cover-image {
        margin-bottom: 1.5rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .bloco-texto {
        padding: 1rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .bloco-imagem,
    .bloco-imagem-full {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .bloco-video {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .bloco-cta {
        padding: 1.25rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .bloco-formulario {
        padding: 1rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .pd-compat-text,
    .pd-compat-rich {
        padding: 1rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    /* Garantir que NÃO há override de font-size no mobile */
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 19: REFINAMENTO MINIMALISTA — PAGE BUILDER (revisão 2)
 * Sobrescreve pontos específicos da Seção 18.
 * Hierarquia visual: imagem=pesado / botão=médio / texto=leve / form=leve
 * Classes reais confirmadas via pages/page-default.php:
 *   .pd-cover-image, .pd-blocos-wrapper, .bloco, .bloco-{tipo},
 *   .bloco-texto, .bloco-imagem, .bloco-imagem-full, .bloco-video,
 *   .bloco-cta, .bloco-cta-btn, .bloco-botao, .bloco-botao-link,
 *   .bloco-formulario, .pd-compat-text, .pd-compat-rich
 * ============================================================================ */


/* ── 19A: Gap entre blocos — espaço como separador principal ── */

.pd-blocos-wrapper {
    gap: 2rem !important;
}


/* ── 19B: Wrapper .bloco — sem qualquer marca visual ── */

.bloco {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ── 19C: Imagem de capa (.pd-cover-image) — âncora visual máxima ──
   Mantém peso total: 4px + sombra 6px — sem alteração da Seção 18 ── */

.pd-cover-image {
    border: 4px solid #000 !important;
    box-shadow: 6px 6px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

.pd-cover-image img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}


/* ── 19D: Bloco de texto (.bloco-texto) — caixa sutil, sem sombra ──
   Sobrescreve: border 3px→1px, remove box-shadow, fundo transparente ── */

.bloco-texto {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
}

/* Filhos diretos do bloco de texto: sem nenhuma moldura própria */
.bloco-texto > * {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Parágrafos */
.bloco-texto p {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-texto p:last-child {
    margin-bottom: 0 !important;
}

/* Headings: única exceção — borda inferior como separador */
.bloco-texto h2,
.bloco-texto h3 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;    /* única borda intencional */
    box-shadow: none !important;
    background: transparent !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
}

.bloco-texto h4,
.bloco-texto h5,
.bloco-texto h6 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0.75rem !important;
}

/* Links dentro do texto */
.bloco-texto a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-texto a:hover {
    color: var(--color-secondary) !important;
}

/* Listas */
.bloco-texto ul,
.bloco-texto ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-texto li {
    font-family: var(--body-font-family) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    margin-bottom: 0.4rem !important;
    border: none !important;
    box-shadow: none !important;
}

/* Blockquote: apenas borda esquerda como acento */
.bloco-texto blockquote {
    border-left: 4px solid var(--color-primary) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.25rem !important;
    margin: 1rem 0 !important;
}

/* Código inline */
.bloco-texto code {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.15em 0.4em !important;
}

/* Bloco de código */
.bloco-texto pre {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 1rem !important;
    overflow-x: auto !important;
}


/* ── 19E: Bloco de imagem interna (.bloco-imagem / .bloco-imagem-full) ──
   Peso intermediário — mantido da Seção 18 ── */

.bloco-imagem,
.bloco-imagem-full {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.bloco-imagem img,
.bloco-imagem-full img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

.bloco-imagem figcaption,
.bloco-imagem-full figcaption {
    border-top: 2px solid #000 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--body-font-family) !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
}


/* ── 19F: Bloco de vídeo (.bloco-video) — peso intermediário ── */

.bloco-video {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
}

.bloco-video iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ── 19G: Bloco CTA (.bloco-cta / .bloco-cta-btn) ── */

.bloco-cta {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    background: transparent !important;
    text-align: center !important;
}

.bloco-cta h2 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    margin-bottom: 0.75rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-cta p {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    color: var(--body-font-color, var(--text-secondary)) !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Botão CTA: peso médio */
.bloco-cta-btn {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.5rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-cta-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}


/* ── 19H: Bloco de botão (.bloco-botao / .bloco-botao-link) — peso médio ── */

.bloco-botao {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-botao-link {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 2rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-botao-link.botao-secundario {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: #000 !important;
}

.bloco-botao-link:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}


/* ── 19I: Formulário (.bloco-formulario) — moldura sutil + inputs com borda ──
   Sobrescreve: border 3px→1px, remove box-shadow do bloco ── */

.bloco-formulario {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 1.5rem !important;
}

.bloco-formulario .form-titulo {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

.bloco-formulario .form-field-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-formulario label {
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-formulario .req-star {
    color: var(--color-primary) !important;
}

/* Inputs: 2px (vs 3px da Seção 18) — peso leve */
.bloco-formulario input,
.bloco-formulario textarea,
.bloco-formulario select {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    padding: 0.6rem 0.8rem !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    transition: box-shadow 0.15s ease !important;
}

.bloco-formulario input:focus,
.bloco-formulario textarea:focus,
.bloco-formulario select:focus {
    outline: none !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-color: #000 !important;
}

/* Botão submit: peso médio */
.bloco-formulario .form-submit-btn {
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.5rem !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    margin-top: 0.5rem !important;
}

.bloco-formulario .form-submit-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}

.bloco-formulario .form-msg.error {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
    margin-top: 0.75rem !important;
    background: transparent !important;
}

.bloco-formulario .form-success {
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-secondary) !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    background: transparent !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}


/* ── 19J: Divisor (.bloco-divisor) ── */

.bloco-divisor {
    border: none !important;
    border-top: 2px solid #000 !important;
    box-shadow: none !important;
    margin: 0 !important;
}


/* ── 19K: Compatibilidade retroativa (.pd-compat-text / .pd-compat-rich) ──
   Mesma lógica: bordas sutis, sem sombra ── */

.pd-compat-text {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 1.5rem !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    margin-bottom: 1.5rem !important;
}

.pd-compat-rich {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.pd-compat-rich > * {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pd-compat-rich a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.pd-compat-rich a:hover {
    color: var(--color-secondary) !important;
}

.pd-compat-rich h2,
.pd-compat-rich h3 {
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
}


/* ── 19L: Mobile — apenas layout, sem font-size ── */

@media (max-width: 768px) {
    .pd-blocos-wrapper {
        gap: 1.5rem !important;
    }

    .pd-cover-image {
        margin-bottom: 1.5rem !important;
    }

    /* Reduzir padding nos blocos leves */
    .bloco-texto,
    .bloco-formulario,
    .bloco-cta,
    .pd-compat-text,
    .pd-compat-rich {
        padding: 1rem !important;
    }

    /* Manter sombras menores nos blocos pesados */
    .bloco-imagem,
    .bloco-imagem-full,
    .bloco-video {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    /* NÃO sobrescrever font-size */
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 20: FIX — LINHAS DUPLAS + RESTAURAÇÃO DO VÍDEO
 * Diagnóstico:
 *  - Linhas duplas: .bloco-texto e .bloco-formulario com border:1px solid #000
 *    (Seções 18-19) geram borda visível nos dois lados adjacentes.
 *    Fix: remover todas as bordas desses blocos — separação fica só pelo gap.
 *  - Vídeo sumido: aspect-ratio:16/9 + position:relative + overflow:hidden
 *    + iframe position:absolute quebrando o embed em alguns navegadores.
 *    Fix: usar padding-bottom:56.25% + height:0 (método clássico, cross-browser).
 * ============================================================================ */


/* ── 20A: Eliminar linhas duplas — blocos de texto sem borda ──
   Sobrescreve Seções 18D e 19D completamente ── */

.bloco-texto {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Headings dentro do texto: só borda inferior (separador intencional) */
.bloco-texto h2,
.bloco-texto h3 {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
}

.bloco-texto h4,
.bloco-texto h5,
.bloco-texto h6 {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Todos os outros filhos: nenhuma borda própria */
.bloco-texto p,
.bloco-texto ul,
.bloco-texto ol,
.bloco-texto li,
.bloco-texto a {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-texto blockquote {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 4px solid var(--color-primary) !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ── 20B: Eliminar linhas duplas — formulários sem borda ──
   Sobrescreve Seções 18I e 19I — a moldura some, inputs mantêm borda ── */

.bloco-formulario {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Título do formulário: só borda inferior */
.bloco-formulario .form-titulo {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

/* Inputs mantêm borda própria (2px) — são os elementos âncora do form */
.bloco-formulario input,
.bloco-formulario textarea,
.bloco-formulario select {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    padding: 0.6rem 0.8rem !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    transition: box-shadow 0.15s ease !important;
}

.bloco-formulario input:focus,
.bloco-formulario textarea:focus,
.bloco-formulario select:focus {
    outline: none !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-color: #000 !important;
}

/* Submit: moldura pesada mantida — é o CTA do form */
.bloco-formulario .form-submit-btn {
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-formulario .form-submit-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}


/* ── 20C: CTA sem borda — separação só por gap ── */

.bloco-cta {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Botão CTA: mantém bordas fortes — é o elemento âncora */
.bloco-cta-btn {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.5rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-cta-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}

.bloco-cta h2,
.bloco-cta p {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ── 20D: Restauração do bloco de vídeo (.bloco-video) ──
   Problema: aspect-ratio:16/9 + overflow:hidden + iframe position:absolute
   quebravam o embed. Solução: método clássico padding-bottom:56.25% + height:0
   que é cross-browser e garante o iframe visível. ── */

.bloco-video {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    /* Método clássico de aspect-ratio 16:9 cross-browser */
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    /* Remover aspect-ratio que causava o problema */
    aspect-ratio: unset !important;
}

.bloco-video iframe {
    /* Preenche absolutamente o container .bloco-video */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
}


/* ── 20E: Gap entre blocos — único separador visual ── */

.pd-blocos-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;   /* aumentado para compensar ausência de bordas */
}


/* ── 20F: Mobile ── */

@media (max-width: 768px) {
    .pd-blocos-wrapper {
        gap: 2rem !important;
    }

    .pd-cover-image {
        margin-bottom: 2rem !important;
    }

    /* NÃO sobrescrever font-size */
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 21: PAGE BUILDER — PADRÃO VISUAL DA SINGLE
 * Replica exatamente o padrão da single de notícias (.ns-body-content):
 *   border: 3px solid #000  +  box-shadow: 4px 4px 0 var(--color-primary)
 *   margin-bottom em cada bloco (não gap no pai) → zero linhas duplas
 *
 * Sobrescreve as Seções 18-20 inteiramente para os blocos do page builder.
 * Classes reais confirmadas via pages/page-default.php:
 *   .pd-blocos-wrapper, .bloco, .bloco-{tipo}
 * ============================================================================ */


/* ── 21A: Neutralizar o gap do pai — espaçamento migra para margin-bottom
   de cada .bloco, que é o modelo da single ── */

.pd-blocos-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;           /* gap zerado — margin-bottom de cada bloco faz o trabalho */
}


/* ── 21B: Wrapper .bloco — sem visual próprio, apenas margin-bottom ──
   A borda vai no elemento interno (.bloco-texto, .bloco-imagem, etc.) ── */

.bloco {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;    /* espaço logo abaixo de cada bloco */
}

.bloco:last-child {
    margin-bottom: 0 !important;
}


/* ── 21C: Bloco de texto (.bloco-texto) ── padrão caixa da single ──
   Mesma lógica de .ns-body-content: borda 3px + sombra offset + padding interno ── */

.bloco-texto {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

/* Filhos sem borda própria — conteúdo limpo dentro da caixa */
.bloco-texto p,
.bloco-texto ul,
.bloco-texto ol,
.bloco-texto li,
.bloco-texto a {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-texto p {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
}

.bloco-texto p:last-child {
    margin-bottom: 0 !important;
}

/* Headings internos: borda inferior como separador de seção */
.bloco-texto h2,
.bloco-texto h3 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
}

.bloco-texto h4,
.bloco-texto h5,
.bloco-texto h6 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    color: var(--page-title-color, var(--text-primary)) !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0.75rem !important;
}

.bloco-texto a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.bloco-texto a:hover {
    color: var(--color-secondary) !important;
}

.bloco-texto ul,
.bloco-texto ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.bloco-texto li {
    margin-bottom: 0.4rem !important;
}

/* Blockquote: acento lateral */
.bloco-texto blockquote {
    border-left: 6px solid var(--color-primary) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.25rem !important;
    margin: 1rem 0 !important;
}

/* Código */
.bloco-texto code {
    border: 1px solid rgba(0,0,0,0.2) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.15em 0.4em !important;
}

.bloco-texto pre {
    border: 1px solid #000 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    overflow-x: auto !important;
    box-shadow: none !important;
}


/* ── 21D: Imagem (.bloco-imagem / .bloco-imagem-full) — caixa mais pesada ── */

.bloco-imagem,
.bloco-imagem-full {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

.bloco-imagem img,
.bloco-imagem-full img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-imagem figcaption,
.bloco-imagem-full figcaption {
    border-top: 2px solid #000 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--body-font-family) !important;
    color: var(--text-secondary) !important;
}


/* ── 21E: Vídeo (.bloco-video) — método padding-bottom cross-browser ── */

.bloco-video {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    /* Aspect-ratio 16:9 pelo método clássico, compatível com todos os browsers */
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    aspect-ratio: unset !important;   /* cancela qualquer aspect-ratio anterior */
    background: #000 !important;
}

.bloco-video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}


/* ── 21F: CTA (.bloco-cta) — caixa leve, botão pesado ── */

.bloco-cta {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 2rem !important;
    text-align: center !important;
}

.bloco-cta h2 {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0.75rem !important;
}

.bloco-cta p {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 1.25rem !important;
}

.bloco-cta-btn {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-secondary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.5rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-cta-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}


/* ── 21G: Botão avulso (.bloco-botao / .bloco-botao-link) ── */

.bloco-botao {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-botao-link {
    display: inline-block !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 2rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bloco-botao-link.botao-secundario {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.bloco-botao-link:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
    text-decoration: none !important;
}

.bloco-botao.align-left  { text-align: left !important; }
.bloco-botao.align-center { text-align: center !important; }
.bloco-botao.align-right { text-align: right !important; }


/* ── 21H: Formulário (.bloco-formulario) — caixa padrão + inputs com borda ── */

.bloco-formulario {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

.bloco-formulario .form-titulo {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

.bloco-formulario .form-field-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 1rem !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.bloco-formulario label {
    font-family: var(--body-font-family) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.bloco-formulario input,
.bloco-formulario textarea,
.bloco-formulario select {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-primary, #fff) !important;
    color: var(--body-font-color, var(--text-primary)) !important;
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    padding: 0.6rem 0.8rem !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    transition: box-shadow 0.15s ease !important;
}

.bloco-formulario input:focus,
.bloco-formulario textarea:focus,
.bloco-formulario select:focus {
    outline: none !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-color: #000 !important;
}

.bloco-formulario .form-submit-btn {
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.75rem !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    margin-top: 0.5rem !important;
}

.bloco-formulario .form-submit-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}


/* ── 21I: Divisor (.bloco-divisor) ── */

.bloco-divisor {
    border: none !important;
    border-top: 3px solid #000 !important;
    box-shadow: none !important;
    margin: 0 !important;
}


/* ── 21J: Compabilidade retroativa (.pd-compat-text / .pd-compat-rich) ──
   Mesmo padrão de caixa da single ── */

.pd-compat-text,
.pd-compat-rich {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.pd-compat-rich > *:not(h2):not(h3):not(h4):not(h5):not(h6):not(blockquote) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pd-compat-rich h2,
.pd-compat-rich h3 {
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: none !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 1rem !important;
    background: transparent !important;
}

.pd-compat-rich a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.pd-compat-rich a:hover {
    color: var(--color-secondary) !important;
}


/* ── 21K: Botão Voltar (.pd-back-btn) ── */

.pd-back-btn {
    margin-top: 2rem !important;
    border-top: 2px solid #000 !important;
    padding-top: 1.5rem !important;
}

.pd-back-btn .btn {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    text-decoration: none !important;
}

.pd-back-btn .btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #000 !important;
}


/* ── 21L: Mobile ── */

@media (max-width: 768px) {
    .bloco {
        margin-bottom: 1.25rem !important;
    }

    .bloco-texto,
    .bloco-formulario,
    .bloco-cta {
        padding: 1rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .bloco-imagem,
    .bloco-imagem-full,
    .bloco-video {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    .pd-compat-text,
    .pd-compat-rich {
        padding: 1rem !important;
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }

    /* NÃO sobrescrever font-size */
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 22: SINGLE DE NOT�CIAS � ZERO border-radius
 * Os estilos abaixo residem no <style> interno do news-single.php com a
 * mesma especificidade, mas por vir depois no CSS cascade (brutalism_override
 * � carregado ap�s) + !important, sobrescrevem corretamente.
 *
 * Elementos corrigidos (confirmados via news-single.php):
 *  .ns-main              border-radius: var(--ns-radius-card) = 8px ? 0
 *  .ns-category-pill     border-radius: 100px ? 0  (pill ? ret�ngulo)
 *  .ns-cover-fig         border-radius: var(--ns-radius-card) ? 0
 *  .ns-cover-img         border-radius: var(--ns-radius-card) ? 0
 *  .ns-author-bio-card   border-radius: 10px ? 0
 *  .ns-author-bio-avatar border-radius: 50% ? 0  (c�rculo ? quadrado)
 *  .ns-social-icon       border-radius: 50% ? 0
 *  .ns-sidebar-inner     border-radius: var(--ns-radius-card) ? 0
 *  .ns-sidebar-accent    border-radius: 2px ? 0
 *  .ns-btn-outline       border-radius: 4px ? 0
 *  .ns-share-btn         border-radius: 50% ? 0
 * ============================================================================ */


/* -- 22A: Wrapper principal � caixa brutalista -- */

.ns-main {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}


/* -- 22B: Pill de categoria � ret�ngulo brutalista -- */

.ns-category-pill {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
}


/* -- 22C: Imagem de capa -- */

.ns-cover-fig {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    overflow: hidden !important;
}

.ns-cover-img {
    border-radius: 0 !important;
    transition: none !important;
}

.ns-cover-fig:hover .ns-cover-img {
    transform: none !important;
}


/* -- 22D: Card de autor din�mico -- */

.ns-author-bio-card {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
}

.ns-author-bio-avatar {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

.ns-author-bio-avatar img {
    border-radius: 0 !important;
}


/* -- 22E: �cones sociais � quadrado -- */

.ns-social-icon {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    color: var(--text-primary) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ns-social-icon:hover {
    border-color: #000 !important;
    color: var(--color-primary) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--color-secondary) !important;
}


/* -- 22F: Bot�es de compartilhar � quadrado -- */

.ns-share-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ns-share-btn:hover {
    color: var(--color-primary) !important;
    border-color: #000 !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--color-secondary) !important;
}


/* -- 22G: Sidebar interna -- */

.ns-sidebar-inner {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

.ns-sidebar-accent {
    border-radius: 0 !important;
    height: 3px !important;
    background: #000 !important;
}


/* -- 22H: Bot�o Fonte e links de rodap� -- */

.ns-btn-outline {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ns-btn-outline:hover {
    border-color: #000 !important;
    color: var(--color-primary) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--color-secondary) !important;
}


/* -- 22I: Avatar fallback (gen�rico, sem autor vinculado) -- */

.ns-author-avatar {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
}


/* -- 22J: Imagens inline no corpo do artigo -- */

.ns-body-content img {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 23: SIDEBAR � ELIMINAR BORDA DUPLA
 * Problema: .ns-sidebar (Se��o 13) + .ns-sidebar-inner (Se��o 22G) ambos
 * com border:3px solid #000 criam duas caixas aninhadas = linha dupla vis�vel.
 * Solu��o: .ns-sidebar � apenas container de layout (sem visual pr�prio).
 *          Toda a apar�ncia fica em .ns-sidebar-inner.
 * ============================================================================ */

/* Container externo: apenas posicionamento, sem visual */
.ns-sidebar {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Container interno sticky: �nica caixa visual da sidebar */
.ns-sidebar-inner {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 1.5rem !important;
}

/* Cards da sidebar: mant�m borda pr�pria como itens independentes */
.ns-sidebar-card,
.ns-sidebar-card-item {
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 0.75rem !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ns-sidebar-card:hover,
.ns-sidebar-card-item:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--color-secondary) !important;
}

/* T�tulo da sidebar: borda inferior como separador */
.ns-sidebar-title,
.ns-sidebar-heading {
    font-family: var(--page-title-font-family) !important;
    font-weight: var(--page-title-font-weight, 900) !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Accent bar: barra horizontal s�lida brutalista */
.ns-sidebar-accent {
    border-radius: 0 !important;
    width: 40px !important;
    height: 3px !important;
    background: var(--color-primary) !important;
    margin-bottom: 1.25rem !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 24: LISTAGENS � OCULTAR HERO + CARD TOTALMENTE CLIC�VEL
 *
 * Implementado 100% via CSS � nenhum PHP global modificado.
 *
 * Elementos:
 *  .nl-hero / .ev-hero ? display:none (hero fullwidth removido visualmente)
 *  .nl-card            ? link posicionado sobre o card inteiro (not�cias)
 *  .ev-card            ? link posicionado sobre o card inteiro (eventos)
 * ============================================================================ */


/* -- Remover hero card fullwidth das listagens -- */

.nl-hero,
.ev-hero {
    display: none !important;
}


/* -- Not�cias: card totalmente clic�vel -- */



/* -- Eventos: card totalmente clic�vel -- */

.ev-card {
    position: relative !important;
    cursor: pointer !important;
}

/* O card de evento usa onclick e <a> interno � tornar o article inteiro responsivo ao hover */
.ev-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
}

/* Garantir que bot�es/links internos sejam clic�veis (z-index acima do hover zone) */
.ev-card__img-wrap,
.ev-card__body,
.ev-card__footer,
.ev-card__body > *,
.ev-card__footer > *,
.ev-cta,
.ev-ticket-badge,
.ev-free-badge {
    position: relative !important;
    z-index: 2 !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 25: PROMO��ES � BORDAS BRUTALISTAS
 *
 * Arquivo refer�ncia: themes/wave/pages/promocoes.php
 * Classes: .wave-promo-card, .wave-promo-card__img, .wave-promo-card__body
 * ============================================================================ */


/* -- Card de promo��o: caixa brutalista -- */

.wave-promo-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wave-promo-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
}

/* Imagem do card: borda inferior separa do body */
.wave-promo-card__img {
    border-radius: 0 !important;
    border-bottom: 3px solid #000 !important;
    overflow: hidden !important;
}

.wave-promo-card__img img {
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Body do card */
.wave-promo-card__body {
    border-radius: 0 !important;
}

/* T�tulo */
.wave-promo-card__title {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
}

/* Divider: linha brutalista s�lida */
.wave-promo-card__divider {
    border: none !important;
    border-top: 2px solid #000 !important;
    margin: 0.75rem 0 !important;
}

/* CTA prim�rio: bot�o brutalista */
.wave-promo-card__cta--primary {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wave-promo-card__cta--primary:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
}

/* CTA encerrado */
.wave-promo-card__cta--ended {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    color: var(--text-muted) !important;
}

/* Badge da promo��o */
.wave-promo-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 26: PROGRAMA��O � TABS BRUTALISTAS + SEM GLOW
 *
 * Arquivo refer�ncia: pages/programacao.php
 * Classes: .pg-day-btn, .pg-day-btn--active, .pg-item, .pg-item--live,
 *          .pg-featured__card, .pg-featured__card:hover
 * ============================================================================ */


/* -- Tabs de dias da semana: zero glow, estilo brutalista -- */

.pg-day-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pg-day-btn:hover {
    background: var(--bg-card) !important;
    border-color: #000 !important;
    color: var(--color-primary) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}

/* Tab ativo: preenchido brutalista � SEM glow/blur */
.pg-day-btn--active {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border: 2px solid #000 !important;
    /* Remove o box-shadow tipo glow: "0 4px 16px rgba(var(--primary-rgb), 0.35)" */
    box-shadow: 3px 3px 0 #000 !important;
}

.pg-day-btn--active:hover {
    color: var(--bg-primary, #fff) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 #000 !important;
}

/* Badge "Hoje" do tab ativo */
.pg-day-btn__today {
    border-radius: 0 !important;
    background: #000 !important;
    color: var(--color-primary) !important;
}

.pg-day-btn--active .pg-day-btn__today {
    background: var(--bg-primary, #fff) !important;
    color: #000 !important;
}


/* -- Itens da programa��o semanal (.pg-item) -- */

.pg-item {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pg-item:hover {
    /* Remove translateY e box-shadow blur � substitui por offset brutalista */
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

/* Item ao vivo: destaque brutalista sem glow */
.pg-item--live {
    background: var(--bg-card) !important;
    border: 3px solid var(--color-primary) !important;
    /* Remove: box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2) */
    box-shadow: 4px 4px 0 #000 !important;
}

.pg-item--live:hover {
    box-shadow: 6px 6px 0 #000 !important;
}


/* -- Cards de programas em destaque (.pg-featured__card) -- */

.pg-featured__card {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pg-featured__card:hover {
    /* Remove translateY e box-shadow blur */
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

/* Pills de hor�rio dentro dos cards de destaque */
.pg-time-pill {
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Toggle dos itens da schedule */
.pg-item__toggle {
    border-radius: 0 !important;
}

/* Avatar do host no hero da programa��o */
.pg-hero__circle {
    border-radius: 0 !important;
}

.pg-hero__avatar {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
}

.pg-hero__avatar-placeholder {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
}

/* Remove pulse rings circulares � brutalismo n�o usa anima��es circulares */
.pg-hero__pulse {
    display: none !important;
}

/* Badge "No Ar" brutalista */
.pg-hero__badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--color-primary) !important;
}

/* Bot�o podcast dentro do hero */
.pg-hero__podcast-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

/* Empty state icon */
.pg-empty__icon {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 27: PODCASTS � BORDAS BRUTALISTAS
 *
 * Cobre dois contextos:
 *  A) Home (wave-podcast-card): themes/wave/pages/podcasts.php
 *  B) P�gina /podcasts (pc-series-card, pc-card): pages/podcasts.php
 * ============================================================================ */


/* -- A) Card da home: .wave-podcast-card -- */

.wave-podcast-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wave-podcast-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
}

.wave-podcast-card__cover {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.wave-podcast-card__cover img {
    border-radius: 0 !important;
    display: block !important;
}

/* Play circle � quadrado brutalista */
.wave-podcast-card__play-circle {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
}


/* -- B-1) Cards de s�ries: .pc-series-card -- */

.pc-series-card {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pc-series-card:hover {
    /* Remove translateY e blur box-shadow ? offset brutalista */
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

.pc-series-card--active {
    border-color: var(--color-primary) !important;
    box-shadow: 4px 4px 0 #000 !important;
}

.pc-series-card__cover {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.pc-series-card__cover img {
    border-radius: 0 !important;
}

/* Play button da s�rie � quadrado */
.pc-series-card__play {
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

/* Contador de epis�dios */
.pc-series-card__count {
    border-radius: 0 !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}


/* -- B-2) Cards de epis�dios: .pc-card -- */

.pc-card {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pc-card:hover {
    /* Remove translateY e blur box-shadow ? offset brutalista */
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

.pc-card__cover {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.pc-card__img {
    border-radius: 0 !important;
}

/* Badge de categoria do epis�dio */
.pc-card__badge {
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* N�mero do epis�dio */
.pc-card__ep-num {
    border-radius: 0 !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Dura��o */
.pc-card__duration {
    border-radius: 0 !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Bot�o de play overlay */
.pc-card__play {
    border-radius: 0 !important;
    border: 2px solid #fff !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* Bot�o Ouvir agora */
.pc-card__listen-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.pc-card__listen-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
}

/* Bot�o de detalhes */
.pc-card__details-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

/* Filtros / Pills */
.pc-pill {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pc-pill:hover {
    border-color: #000 !important;
    color: var(--color-primary) !important;
    background: var(--bg-card) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

.pc-pill--active {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* Select de s�ries */
.pc-select {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
}

/* Bot�o CTA */
.pc-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

/* Empty state icon */
.pc-empty__icon {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 28: CORRE��O DE FALLBACK DE COR
 *
 * Problema: o <style> inline do news-single.php usa var(--primary-color, #e65100)
 * com fallback laranja hardcoded (#e65100). Se --primary-color n�o estiver
 * definida para o WAVE, o laranja aparece.
 *
 * Solu��o: remapear todos os usos inline de var(--primary-color) para
 * var(--color-primary) que � garantidamente gerado pelo sistema WAVE.
 * Tamb�m garantir que var(--primary-rgb) usada em alguns contextos fique
 * consistente com o sistema de cores do WAVE.
 *
 * Arquivos com ocorr�ncias:
 *  - pages/news-single.php (inline style, n�o modific�vel)
 *  - pages/podcasts.php (inline style)
 *  - pages/programacao.php (inline style)
 * ============================================================================ */

/* Remapear elementos que usam var(--primary-color) com fallback laranja
   para garantir que usem a cor prim�ria do WAVE via var(--color-primary) */

/* Single de not�cia */
.ns-share-btn:hover { color: var(--color-primary) !important; }
.ns-body-content a { color: var(--color-primary) !important; }
.ns-sidebar-title { color: var(--color-primary) !important; }
.ns-back-link:hover { color: var(--color-primary) !important; }
.ns-btn-outline:hover { color: var(--color-primary) !important; }
.ns-lead { border-left-color: var(--color-primary) !important; }
.ns-sidebar-card:hover .ns-sidebar-card-title { color: var(--color-primary) !important; }

/* Programa��o */
.pg-hero__time i,
.pg-hero__host i { color: var(--color-primary) !important; }
.pg-item__hour { color: var(--color-primary) !important; }
.pg-section-title i { color: var(--color-primary) !important; }

/* Podcasts */
.pc-card__badge { background: var(--color-primary) !important; }
.pc-card__series { color: var(--color-primary) !important; }
.pc-section-title i { color: var(--color-primary) !important; }
.pc-series-card__cat { color: var(--color-primary) !important; }


/* ============================================================================
 * WAVE BRUTALISM � SE��O 29: CORRE��O COMPLETA DE BORDAS
 *                             /eventos e /promocoes
 *
 * Espelha exatamente o padr�o visual de /noticias:
 *  - border: 3px solid #000 + box-shadow: 4px 4px 0 var(--color-primary)
 *  - Filtros/chips: ret�ngulos com borda + ativo preenchido
 *  - Badge: fundo prim�rio + borda preta
 *  - Separadores: border-top: 2px solid #000
 *
 * Causa raiz: regras da Se��o 24 adicionaram position/hover mas esqueceram
 * o border e box-shadow base. O <style> inline do PHP (que vem ap�s o CSS
 * externo no cascade) sobrescrevia com border-radius e box-shadow sem borda.
 * ============================================================================ */


/* --------------------------------------------------------
   /EVENTOS � FILTROS (ev-chip)
   Refer�ncia visual: tabs de /noticias com borda preta s�lida
   -------------------------------------------------------- */

.ev-chip {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    padding: 8px 18px !important;
}

.ev-chip:hover {
    background: var(--bg-card) !important;
    border-color: #000 !important;
    color: var(--color-primary) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}

/* Chip ativo: preenchido com cor prim�ria, sem glow */
.ev-chip--active,
.ev-chip.ev-chip--active {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
    transform: none !important;
}

.ev-chip--active:hover,
.ev-chip.ev-chip--active:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 #000 !important;
}


/* --------------------------------------------------------
   /EVENTOS � CARDS (ev-card)
   Borda: 3px solid #000 + shadow 4px offset
   -------------------------------------------------------- */

/* Card base: borda e shadow brutalistas (complementa Se��o 24) */
.ev-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    overflow: visible !important;   /* garantir que shadow n�o seja cortada */
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ev-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

/* Imagem do card: borda inferior separa da �rea de texto */
.ev-card__img-wrap {
    border-radius: 0 !important;
    overflow: hidden !important;
    border-bottom: 3px solid #000 !important;
}

.ev-card__img {
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Placeholder (sem imagem) */
.ev-card__placeholder {
    border-radius: 0 !important;
    background: var(--bg-tertiary) !important;
}

/* Gradient overlay: sutileza mantida */
.ev-card__gradient {
    border-radius: 0 !important;
}

/* Body do card */
.ev-card__body {
    padding: 1rem !important;
}

/* T�tulo */
.ev-card__title {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
}

/* Badge de categoria/status */
.ev-badge,
.ev-card .ev-badge,
.ev-card__badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 2px 2px 0 #000 !important;
    padding: 3px 10px !important;
}

/* Badges de ticket e gratuito */
.ev-ticket-badge,
.ev-free-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 1px 1px 0 #000 !important;
}

/* Meta (data, hora, local) */
.ev-card__meta {
    border-top: 2px solid #000 !important;
    padding-top: 0.75rem !important;
    margin-top: 0.75rem !important;
}

.ev-meta-item {
    color: var(--text-secondary) !important;
}

/* Footer / CTA */
.ev-card__footer {
    border-top: 2px solid #000 !important;
    padding-top: 0.75rem !important;
    margin-top: 0.75rem !important;
}

/* CTA link */
.ev-cta {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ev-cta:hover {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
}

/* Countdown no card de evento */
.ev-countdown {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Location tag */
.ev-card__location {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
}


/* --------------------------------------------------------
   /PROMOCOES � CARDS � REFOR�O COMPLETO (wave-promo-card)
   Complementa Se��o 25 garantindo que inline style seja
   sobrescrito em todos os sub-elementos
   -------------------------------------------------------- */

/* Grid: 3 colunas uniforme */
.wave-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Card: borda brutalista completa */
.wave-promo-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    overflow: visible !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.wave-promo-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

/* Imagem */
.wave-promo-card__img {
    border-radius: 0 !important;
    border-bottom: 3px solid #000 !important;
    overflow: hidden !important;
    background: var(--bg-tertiary) !important;
}

.wave-promo-card__img img {
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Placeholder da imagem */
.wave-promo-card__img-ph {
    border-radius: 0 !important;
}

/* Body */
.wave-promo-card__body {
    border-radius: 0 !important;
    padding: 1rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* T�tulo */
.wave-promo-card__title {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
    margin-bottom: 0.5rem !important;
}

/* Descri��o */
.wave-promo-card__desc {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    flex: 1 !important;
}

/* Separador interno */
.wave-promo-card__divider {
    border: none !important;
    border-top: 2px solid #000 !important;
    margin: 0.75rem 0 !important;
}

/* Footer */
.wave-promo-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
}

/* CTA prim�rio */
.wave-promo-card__cta--primary {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wave-promo-card__cta--primary:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}

/* CTA encerrado */
.wave-promo-card__cta--ended {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    color: var(--text-muted) !important;
    background: var(--bg-card) !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Badge da promo��o */
.wave-promo-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .wave-promo-grid {
        grid-template-columns: 1fr !important;
    }
    .ev-card {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }
    .wave-promo-card {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 30: P�GINA /promocoes � BORDAS BRUTALISTAS COMPLETAS
 *
 * Arquivo refer�ncia: pages/promotions.php
 * Prefixo de classes: pm- (PageManager promo)
 *
 * Problema: Se��es 25 e 29 visavam .wave-promo-card (m�dulo da HOME),
 * mas a URL /promocoes usa pages/promotions.php com classes .pm-*.
 *
 * Replicar exatamente o padr�o visual de /noticias:
 *  - border: 3px solid #000 + box-shadow: 4px 4px 0 var(--color-primary)
 *  - Badge: fundo prim�rio + 2px solid #000
 *  - Countdown: 2px solid #000
 *  - Separadores internos: border-top: 2px solid #000
 *  - Hover: translate(-2px, -2px) + shadow secund�ria
 * ============================================================================ */


/* -- Grid: 3 colunas uniforme -- */

.pm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .pm-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .pm-grid { grid-template-columns: 1fr !important; }
}


/* -- Card principal: borda + shadow brutalistas -- */

.pm-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    overflow: visible !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.pm-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}


/* -- Link que cobre o card (clicabilidade total) -- */

.pm-card__link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.pm-card__img-wrap,
.pm-card__body,
.pm-card__body > *,
.pm-card__footer,
.pm-badge,
.pm-countdown,
.pm-cta {
    position: relative !important;
    z-index: 2 !important;
}


/* -- Imagem: borda inferior separa do texto -- */

.pm-card__img-wrap {
    border-radius: 0 !important;
    overflow: hidden !important;
    border-bottom: 3px solid #000 !important;
}

.pm-card__img {
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
}

.pm-card__placeholder {
    border-radius: 0 !important;
    background: var(--bg-tertiary) !important;
}

.pm-card__gradient {
    border-radius: 0 !important;
}


/* -- Badge "PROMO��O": fundo prim�rio + borda preta -- */

.pm-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 2px 2px 0 #000 !important;
    padding: 4px 10px !important;
}


/* -- Countdown "Faltam X dias": borda preta -- */

.pm-countdown {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Countdown urgente (<= 3 dias) */
.pm-countdown--urgent {
    border-color: #000 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    box-shadow: 2px 2px 0 #000 !important;
}


/* -- Body e texto -- */

.pm-card__body {
    border-radius: 0 !important;
    padding: 1rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.pm-card__title {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
    margin: 0 !important;
}

.pm-card__excerpt {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

/* Meta (data de expira��o) */
.pm-card__meta,
.pm-card__expiry {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

.pm-card__expiry {
    color: var(--color-primary) !important;
}


/* -- Separador interno + footer -- */

.pm-card__footer {
    border-top: 2px solid #000 !important;
    padding-top: 0.75rem !important;
    margin-top: auto !important;
    padding-bottom: 0 !important;
}


/* -- CTA "Participar ?": bot�o brutalista -- */

.pm-cta {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pm-cta:hover,
.pm-cta--sm:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}

.pm-cta--sm {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}


/* -- Empty state -- */

.pm-empty__icon {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 31: HOTFIX � REVERTER DANOS DA SE��O 30
 *                             + BORDAS CORRETAS PARA /promocoes
 *
 * PROBLEMA DA SE��O 30:
 *   .pm-card__link tem position: absolute + text-indent: -9999px
 *   ERRADO � pm-card__link � o container principal (envolve todo o conte�do)
 *   Resultado: todo o texto ficou invis�vel, layout colapsou
 *
 * CORRE��O:
 *   Remover position/text-indent do link
 *   Restaurar overflow: hidden no card (para conter as imagens)
 *   Manter apenas o visual brutalista (border, shadow, border-radius: 0)
 * ============================================================================ */


/* -- REVERTER erros da Se��o 30 -- */

/* Link � container normal � NOT an overlay */
.pm-card__link {
    position: static !important;
    inset: auto !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    z-index: auto !important;
}

/* Restaurar overflow para conter as imagens dentro do card */
.pm-card {
    overflow: hidden !important;
}

/* Restaurar posi��o est�tica dos elementos internos */
.pm-card__img-wrap,
.pm-card__body,
.pm-card__body > *,
.pm-card__footer,
.pm-badge,
.pm-countdown,
.pm-cta {
    position: static !important;
    z-index: auto !important;
}


/* -- VISUAL CORRETO: replicar /noticias -- */

/* Card: border + shadow offset brutalista */
.pm-card {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pm-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--color-secondary) !important;
    border-color: #000 !important;
}

/* Imagem: borda inferior separa visualmente do texto */
.pm-card__img-wrap {
    border-radius: 0 !important;
    overflow: hidden !important;
    border-bottom: 3px solid #000 !important;
}

.pm-card__img {
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Badge "PROMO��O": fundo prim�rio + borda preta */
.pm-badge {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* Countdown "Faltam X dias" */
.pm-countdown {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.pm-countdown--urgent {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    border-color: #000 !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* T�tulo */
.pm-card__title {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
}

/* Separador + footer */
.pm-card__footer {
    border-top: 2px solid #000 !important;
    padding-top: 0.75rem !important;
}

/* CTA "Participar ?" */
.pm-cta {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pm-cta:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}

.pm-cta--sm {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 32: SINGLES DE EVENTO e PROMO��O
 *                             Zero border-radius + bordas brutalistas
 *
 * Arquivos refer�ncia:
 *   pages/event-single.php      ? prefixo ev-
 *   pages/promotion-single.php  ? prefixo pr-
 * ============================================================================ */


/* --------------------------------------------------------
   /evento/[slug] � EVENT SINGLE
   -------------------------------------------------------- */

/* Imagem de capa */
.ev-cover-img {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    display: block !important;
    width: 100% !important;
}

/* Badges (status + categoria) */
.ev-badge,
.ev-badge--live,
.ev-badge--closed,
.ev-badge--upcoming,
.ev-badge--cat {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 2px 2px 0 #000 !important;
}

.ev-badge--live {
    background: var(--danger, #ef4444) !important;
    color: #fff !important;
    box-shadow: 2px 2px 0 #000 !important;
}

.ev-badge--upcoming {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
}

.ev-badge--closed {
    background: var(--text-muted) !important;
    color: #fff !important;
}

.ev-badge--cat {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Bloco de metadados (data, local, pre�o) */
.ev-meta-block {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
}

/* Divider */
.ev-divider {
    border: none !important;
    border-top: 2px solid #000 !important;
}

/* Descri��o */
.ev-description {
    border-radius: 0 !important;
}

/* Bot�o de a��o principal (comprar ingresso, inscrever, etc.) */
.ev-cta-btn {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ev-cta-btn:hover:not(.ev-cta-btn--disabled) {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}

.ev-cta-btn--disabled {
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--text-muted) !important;
    border-radius: 0 !important;
    opacity: 0.6 !important;
}

/* Bot�es de compartilhamento (redes sociais) */
.ev-share-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ev-share-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--color-primary) !important;
    border-color: #000 !important;
}

/* Se��o de mapa */
.ev-map-wrap {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    overflow: hidden !important;
}

.ev-map-info {
    border-radius: 0 !important;
    border-bottom: 3px solid #000 !important;
}

.ev-map-btn {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

.ev-map-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
}

.ev-map-iframe {
    border-radius: 0 !important;
    border: none !important;
    display: block !important;
}

/* Link voltar */
.ev-back-link {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ev-back-link:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--color-primary) !important;
}


/* --------------------------------------------------------
   /promocao/[slug] � PROMOTION SINGLE
   -------------------------------------------------------- */

/* Imagem de capa */
.pr-cover-img {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    display: block !important;
    width: 100% !important;
}

/* Badge de status */
.pr-status-badge,
.pr-status-badge--active,
.pr-status-badge--closed {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: 2px 2px 0 #000 !important;
}

.pr-status-badge--active {
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
}

.pr-status-badge--closed {
    background: var(--text-muted) !important;
    color: #fff !important;
}

/* Validade */
.pr-validity {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
}

/* Divider */
.pr-divider {
    border: none !important;
    border-top: 2px solid #000 !important;
}

/* Caixa do regulamento */
.pr-rules-summary {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    padding: 16px 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.pr-rules-body {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    border-top: none !important;
    background: var(--bg-card) !important;
    padding: 16px 20px !important;
}

.pr-rules-details {
    border-radius: 0 !important;
}

/* Caixa do formul�rio de participa��o */
.pr-form-wrap {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
}

/* Inputs / Selects / Textarea */
.pr-form-control {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.pr-form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    outline: none !important;
}

/* Radio options */
.pr-radio-option {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-card) !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.pr-radio-option:has(input:checked) {
    border-color: var(--color-primary) !important;
    background: rgba(var(--primary-rgb), 0.06) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

/* Bot�o submit do formul�rio */
.pr-form-btn {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pr-form-btn:hover:not(:disabled) {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}

.pr-form-btn:disabled {
    opacity: 0.6 !important;
    border: 3px solid #000 !important;
}

/* Caixa de protocolo / sucesso */
.pr-protocol-box {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
}

.pr-success {
    border-radius: 0 !important;
}

.pr-success-icon {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
}

/* Nota de privacidade */
.pr-privacy-note {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-card) !important;
}

/* Aviso de promo expirada */
.pr-expired-notice {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--text-muted) !important;
}

/* Link voltar */
.pr-back-link {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pr-back-link:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 33: PAGE BUILDER � REDESIGN COMPLETO DOS BLOCOS
 *
 * Arquivo refer�ncia: pages/page-default.php
 * Refer�ncia visual: single page /promocao/ � espa�amento, tipografia, bordas
 *
 * Estrutura de wrapper:
 *   <div class="pd-blocos-wrapper">
 *     <div class="bloco bloco-[tipo]">
 *       conte�do interno�
 *     </div>
 *   </div>
 *
 * Tipos de bloco:
 *   bloco-texto        ? texto rico do editor
 *   bloco-imagem       ? figura com imagem
 *   bloco-imagem-full  ? imagem fullwidth
 *   bloco-video        ? iframe YouTube embed
 *   bloco-cta          ? call to action (t�tulo + texto + bot�o)
 *   bloco-botao        ? bot�o isolado (prim�rio ou secund�rio)
 *   bloco-divisor      ? <hr> separador
 *   bloco-formulario   ? formul�rio de contato com campos din�micos
 *
 * Sobrescreve se��es anteriores (3, 14, 15, 16, 17) via cascade late-loading.
 * ============================================================================ */


/* --------------------------------------------------------
   WRAPPER GERAL + LAYOUT
   -------------------------------------------------------- */

.pd-page-section {
    padding: 0 !important;
    background: transparent !important;
}

.pd-page-content {
    padding: 0 !important;
    background: transparent !important;
}

.pd-blocos-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 860px !important;
    margin: 32px auto !important;
    padding: 0 24px !important;
}

/* Cada bloco: margem inferior como �nico separador */
.bloco {
    margin-bottom: 28px !important;
    border-radius: 0 !important;
}

.bloco:last-child {
    margin-bottom: 0 !important;
}


/* --------------------------------------------------------
   BLOCO DE TEXTO RICO (.bloco-texto)
   Refer�ncia: caixa de descri��o da /promocao/
   -------------------------------------------------------- */

.bloco-texto {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 24px 28px !important;
}

.bloco-texto p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin-bottom: 14px !important;
}

.bloco-texto p:last-child {
    margin-bottom: 0 !important;
}

.bloco-texto h2,
.bloco-texto h3,
.bloco-texto h4 {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 6px !important;
}

.bloco-texto a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.bloco-texto ul,
.bloco-texto ol {
    padding-left: 20px !important;
    margin-bottom: 14px !important;
    color: var(--text-secondary) !important;
}

.bloco-texto li {
    margin-bottom: 6px !important;
    line-height: 1.6 !important;
}

.bloco-texto blockquote {
    border-left: 4px solid var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-primary) !important;
    margin: 16px 0 !important;
    padding: 12px 18px !important;
    color: var(--text-secondary) !important;
    font-style: italic !important;
}

/* Texto livre (.pd-compat-text) � mesmo padr�o */
.pd-compat-text,
.pd-compat-rich {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 24px 28px !important;
    color: var(--text-secondary) !important;
    line-height: 1.7 !important;
}


/* --------------------------------------------------------
   BLOCO DE IMAGEM (.bloco-imagem / .bloco-imagem-full)
   Refer�ncia: capa da /promocao/ � borda 3px + shadow
   -------------------------------------------------------- */

.bloco-imagem,
.bloco-imagem-full {
    border-radius: 0 !important;
    overflow: visible !important;
    margin-bottom: 0 !important;    /* usa s� o margin do .bloco pai */
}

.bloco-imagem img,
.bloco-imagem-full img {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

.bloco-imagem figcaption,
.bloco-imagem-full figcaption {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    margin-top: 8px !important;
    padding-left: 4px !important;
    border-left: 3px solid var(--color-primary) !important;
}


/* --------------------------------------------------------
   BLOCO DE V�DEO (.bloco-video)
   Refer�ncia: embed 16:9 sem cantos arredondados
   -------------------------------------------------------- */

.bloco-video {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;  /* 16:9 cross-browser */
    height: 0 !important;
    background: #000 !important;
}

.bloco-video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
}


/* --------------------------------------------------------
   BLOCO CTA (.bloco-cta)
   Refer�ncia: caixa de formul�rio da /promocao/ �
               border 3px, shadow, fundo card, t�tulo uppercase
   -------------------------------------------------------- */

.bloco-cta {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 32px 28px !important;
    text-align: center !important;
}

.bloco-cta h2 {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 12px !important;
}

.bloco-cta p {
    font-size: 0.95rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Bot�o do CTA */
.bloco-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    letter-spacing: 0.04em !important;
}

.bloco-cta-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}


/* --------------------------------------------------------
   BLOCO BOT�O (.bloco-botao)
   Refer�ncia: bot�o "? Voltar para Promo��es"
               + bot�o "Participar" brutalista
   -------------------------------------------------------- */

.bloco-botao {
    display: flex !important;
    justify-content: center !important;
}

.bloco-botao.align-left  { justify-content: flex-start !important; }
.bloco-botao.align-right { justify-content: flex-end !important; }

/* Bot�o prim�rio (padr�o) */
.bloco-botao-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    letter-spacing: 0.04em !important;
}

.bloco-botao-link:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 #000 !important;
    color: var(--bg-primary, #fff) !important;
}

/* Bot�o secund�rio (outline brutalista) */
.bloco-botao-link.botao-secundario {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}

.bloco-botao-link.botao-secundario:hover {
    background: var(--bg-card) !important;
    color: var(--color-primary) !important;
    box-shadow: 5px 5px 0 #000 !important;
}


/* --------------------------------------------------------
   BLOCO DIVISOR (.bloco-divisor)
   Refer�ncia: linha hr entre se��es da /promocao/
   -------------------------------------------------------- */

.bloco-divisor {
    border: none !important;
    border-top: 2px solid #000 !important;
    box-shadow: 0 2px 0 var(--color-primary) !important;
    margin: 4px 0 !important;
    background: none !important;
}


/* --------------------------------------------------------
   BLOCO FORMUL�RIO (.bloco-formulario)
   Refer�ncia: formul�rio de participa��o da /promocao/
   Todos os elementos replicam o padr�o brutalista
   -------------------------------------------------------- */

.bloco-formulario {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 28px !important;
}

/* T�tulo do formul�rio */
.form-titulo {
    font-family: var(--card-title-font-family) !important;
    font-weight: var(--card-title-font-weight, 800) !important;
    font-size: 1.15rem !important;
    text-transform: uppercase !important;
    color: var(--card-title-color, var(--text-primary)) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #000 !important;
}

/* Grupo de campo */
.form-field-wrap {
    margin-bottom: 16px !important;
}

.form-field-wrap label {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.req-star {
    color: var(--color-primary) !important;
    font-weight: 900 !important;
}

/* Inputs, textarea, select */
.form-bloco input[type="text"],
.form-bloco input[type="email"],
.form-bloco input[type="tel"],
.form-bloco input[type="number"],
.form-bloco input[type="file"],
.form-bloco select,
.form-bloco textarea {
    width: 100% !important;
    display: block !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-size: 0.92rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-sizing: border-box !important;
}

.form-bloco input:focus,
.form-bloco select:focus,
.form-bloco textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

.form-bloco textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

/* Checkbox */
.checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    accent-color: var(--color-primary) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Bot�o submit */
.form-submit-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    margin-top: 8px !important;
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--bg-primary, #fff) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.form-submit-btn:hover:not(:disabled) {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 #000 !important;
}

.form-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Mensagem de erro inline */
.form-msg {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    margin-top: 12px !important;
    background: var(--bg-card) !important;
}

.form-msg.error {
    border-color: var(--danger, #ef4444) !important;
    color: var(--danger, #ef4444) !important;
    box-shadow: 2px 2px 0 var(--danger, #ef4444) !important;
}

.form-msg.success {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

/* Sucesso completo (formul�rio enviado) */
.form-success {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    padding: 28px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--color-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.form-success i {
    font-size: 1.5rem !important;
    color: var(--color-primary) !important;
}


/* --------------------------------------------------------
   BOT�O VOLTAR (.pd-back-btn)
   Refer�ncia: "? Voltar para Promo��es" no rodap� da single
   -------------------------------------------------------- */

.pd-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    margin-top: 12px !important;
}

.pd-back-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--color-primary) !important;
}


/* --------------------------------------------------------
   IMAGEM DE CAPA DA P�GINA (.pd-cover-image)
   -------------------------------------------------------- */

.pd-cover-image {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 28px !important;
}


/* --------------------------------------------------------
   RESPONSIVE � Mobile
   -------------------------------------------------------- */

@media (max-width: 768px) {
    .pd-blocos-wrapper {
        padding: 0 16px !important;
        margin: 20px auto !important;
    }

    .bloco {
        margin-bottom: 20px !important;
    }

    .bloco-texto,
    .pd-compat-text,
    .pd-compat-rich,
    .bloco-cta,
    .bloco-formulario {
        padding: 18px 16px !important;
    }

    .bloco-cta-btn,
    .bloco-botao-link,
    .form-submit-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .bloco-video {
        box-shadow: 2px 2px 0 var(--color-primary) !important;
    }

    .bloco-imagem img,
    .bloco-imagem-full img {
        box-shadow: 3px 3px 0 var(--color-primary) !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 34: HOTFIX PAGE BUILDER � ELIMINAR BORDAS DUPLAS
 *
 * Problema: Se��o 3 (linha ~1942) adicionou .pd-page-content no mesmo
 * seletor de .bloco-texto com border: 3px solid #000, gerando uma borda
 * EXTERNA que envolve todos os blocos � efeito "caixa dentro de caixa".
 *
 * Regra: UM bloco = UMA borda. O container NUNCA tem borda pr�pria.
 * Bordas ficam exclusivamente nos elementos internos (bloco-texto, etc.).
 * ============================================================================ */


/* -- Containers de p�gina: SEM borda, SEM shadow -- */

.pd-page-section,
.pd-page-content,
.pd-blocos-wrapper,
.pd-page-wrap,
.pd-empty {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Wrapper brutalista correto: s� espa�amento */
.pd-blocos-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;          /* ESPA�O entre blocos como separador */
    max-width: 860px !important;
    margin: 40px auto !important;
    padding: 0 24px !important;
}

/* Cada bloco: SEM borda pr�pria no wrapper */
.bloco {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;   /* usa o gap do flex-parent */
    padding: 0 !important;
}

/* Garantir que .about-content e .sobre-content n�o herdem a borda de p�gina */
.about-content,
.sobre-content {
    border: none !important;
    box-shadow: none !important;
}


/* -- Reafirmar: bordas apenas nos elementos internos -- */
/* (j� definidas na Se��o 33 � repetidas aqui com + especificidade) */

.pd-blocos-wrapper .bloco-texto {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 24px 28px !important;
}

.pd-blocos-wrapper .bloco-cta {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 32px 28px !important;
}

.pd-blocos-wrapper .bloco-formulario {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 28px !important;
}

.pd-blocos-wrapper .bloco-video {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}

.pd-blocos-wrapper .bloco-imagem img,
.pd-blocos-wrapper .bloco-imagem-full img {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}

/* .bloco-botao e .bloco-divisor: sem caixa, borda s� no elemento filho */
.pd-blocos-wrapper .bloco-botao {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pd-blocos-wrapper .bloco-divisor {
    border: none !important;
    border-top: 2px solid #000 !important;
    box-shadow: 0 2px 0 var(--color-primary) !important;
    background: none !important;
    height: 0 !important;
}

/* -- Mobile -- */
@media (max-width: 768px) {
    .pd-blocos-wrapper {
        gap: 20px !important;
        padding: 0 16px !important;
        margin: 24px auto !important;
    }
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 35: HOTFIX CR�TICO � DUPLA BORDA NO PAGE BUILDER
 *
 * CAUSA RAIZ DEFINITIVA:
 *   PHP gera: <div class="bloco bloco-texto"> <div class="bloco-texto">�</div> </div>
 *   O wrapper externo TAMB�M tem classe "bloco-texto" ? recebe a borda � 2
 *
 * SOLU��O: seletor filho direto (>)
 *   .bloco.bloco-texto       ? SEM borda (� o wrapper)
 *   .bloco.bloco-texto > div ? COM borda (� o conte�do real)
 *
 * Mesma l�gica para: cta, formulario, video, imagem, botao, divisor
 * ============================================================================ */


/* -- 1. ZERAR BORDER em todos os wrappers externos (.bloco.bloco-*) -- */

.bloco.bloco-texto,
.bloco.bloco-cta,
.bloco.bloco-formulario,
.bloco.bloco-video,
.bloco.bloco-imagem,
.bloco.bloco-imagem-full,
.bloco.bloco-botao,
.bloco.bloco-divisor {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}


/* -- 2. BORDA apenas no filho direto (conte�do real) -- */

/* Texto rico */
.bloco.bloco-texto > .bloco-texto,
.bloco.bloco-texto > div {
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 24px 28px !important;
}

/* CTA */
.bloco.bloco-cta > .bloco-cta,
.bloco.bloco-cta > div {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 32px 28px !important;
    text-align: center !important;
}

/* Formul�rio */
.bloco.bloco-formulario > .bloco-formulario,
.bloco.bloco-formulario > div {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    background: var(--bg-card) !important;
    padding: 28px !important;
}

/* V�deo � mant�m aspecto 16:9 */
.bloco.bloco-video > .bloco-video,
.bloco.bloco-video > div {
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    background: #000 !important;
}

/* Imagem: borda na <img>, n�o na <figure> */
.bloco.bloco-imagem > figure,
.bloco.bloco-imagem-full > figure {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Bot�o: sem caixa no wrapper */
.bloco.bloco-botao > .bloco-botao,
.bloco.bloco-botao > div {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Divisor: apenas linha */
.bloco.bloco-divisor > .bloco-divisor,
.bloco.bloco-divisor > hr {
    border: none !important;
    border-top: 2px solid #000 !important;
    box-shadow: 0 2px 0 var(--color-primary) !important;
    background: none !important;
    height: 0 !important;
    margin: 0 !important;
    display: block !important;
}


/* -- 3. Bot�o "Voltar ao In�cio" (.pd-back-btn) -----------------
   S� o link/bot�o recebe borda � sem wrapper externo
   --------------------------------------------------------------- */

.pd-back-btn {
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.pd-back-btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 #000 !important;
    color: var(--color-primary) !important;
}

/* Wrapper do bot�o voltar: SEM borda */
.pd-back-wrap {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-top: 8px !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 36: HOTFIX BLOCO DE V�DEO
 *
 * PROBLEMA:
 *   Se��o 33 aplicou height: 0 no seletor .bloco-video (sem especificidade)
 *   ? atinge o wrapper externo .bloco.bloco-video
 *   Se��o 34 sobrescreveu padding: 0 no wrapper
 *   ? padre tem height:0 + padding:0, overflow:hidden ? v�deo desaparece
 *
 * SOLU��O:
 *   Wrapper externo: height: auto + overflow: visible (n�o recortar)
 *   Filho interno: ratio 16:9 com position: relative + height: 0 + padding-bottom
 *   iframe: position: absolute preenchendo o filho
 * ============================================================================ */


/* Wrapper externo: altura autom�tica, sem corte */
.bloco.bloco-video {
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Selector gen�rico legado: tamb�m for�ar auto no wrapper */
.bloco-video {
    height: auto !important;
    overflow: visible !important;
}

/* Apenas o FILHO DIRETO recebe o ratio 16:9 e a borda */
.bloco.bloco-video > .bloco-video {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;  /* ratio 16:9 */
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;        /* cortar apenas dentro do filho */
    background: #000 !important;
}

/* iframe: preenche o filho absolutamente */
.bloco.bloco-video > .bloco-video iframe,
.bloco-video > iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
}


/* ============================================================================
 * WAVE BRUTALISM � SE��O 37: DARK MODE � BORDAS E SOMBRAS COM CONTRASTE
 *
 * Seletor correto do WAVE: body:not(.theme-light)
 * (confirmado em themes/wave/style.css linha ~191037)
 *
 * Problema: no Light, border: X solid #000 tem contraste perfeito.
 * No Dark, #000 se perde no fundo escuro ? cards sem defini��o visual.
 *
 * Estrat�gia: Vari�veis CSS de borda/sombra definidas para dark,
 * depois sobrescrever border-color e box-shadow em todos os elementos
 * brutalistas via seletor de alta especificidade.
 *
 * Paleta dark:
 *   Borda principal: #aaaaaa  (cinza claro, contraste sobre fundo escuro)
 *   Sombra offset:   #666666  (cinza m�dio, sombra vis�vel sem brutalizar)
 *   Borda leve:      #888888  (inputs, elementos secund�rios)
 *   Sombra hover:    #888888  (hover mais suave que o light #000)
 * ============================================================================ */


/* --------------------------------------------------------
   VARI�VEIS DARK � dispon�veis para qualquer uso interno
   -------------------------------------------------------- */

body:not(.theme-light) {
    --brut-border:       #aaa;
    --brut-border-light: #888;
    --brut-shadow:       #555;
    --brut-shadow-hover: #777;
}


/* --------------------------------------------------------
   CARDS � LISTAGENS
   -------------------------------------------------------- */

/* Not�cias */
body:not(.theme-light) .nl-card {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body:not(.theme-light) .nl-card:hover {
    box-shadow: 6px 6px 0 var(--brut-shadow-hover) !important;
}

/* Eventos */
body:not(.theme-light) .ev-card {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body:not(.theme-light) .ev-card:hover {
    box-shadow: 6px 6px 0 var(--brut-shadow-hover) !important;
}

/* Promo��es (pm-card) */
body:not(.theme-light) .pm-card {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body:not(.theme-light) .pm-card:hover {
    box-shadow: 6px 6px 0 var(--brut-shadow-hover) !important;
}

/* Separadores internos dos cards */
body:not(.theme-light) .nl-card__footer,
body:not(.theme-light) .ev-card__footer,
body:not(.theme-light) .ev-card__meta,
body:not(.theme-light) .pm-card__footer {
    border-top-color: var(--brut-border) !important;
}

/* Imagens nos cards */
body:not(.theme-light) .nl-card__img-wrap,
body:not(.theme-light) .ev-card__img-wrap,
body:not(.theme-light) .pm-card__img-wrap {
    border-bottom-color: var(--brut-border) !important;
}


/* --------------------------------------------------------
   BADGES E CHIPS
   -------------------------------------------------------- */

body:not(.theme-light) .nl-tag,
body:not(.theme-light) .ev-badge,
body:not(.theme-light) .ev-badge--cat,
body:not(.theme-light) .ev-badge--upcoming,
body:not(.theme-light) .ev-badge--closed,
body:not(.theme-light) .pm-badge,
body:not(.theme-light) .pm-countdown,
body:not(.theme-light) .pc-badge,
body:not(.theme-light) .pg-badge {
    border-color: var(--brut-border) !important;
    box-shadow: 2px 2px 0 var(--brut-shadow) !important;
}

/* Chips de filtro (eventos) */
body:not(.theme-light) .ev-chip {
    border-color: var(--brut-border) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}
body:not(.theme-light) .ev-chip--active {
    border-color: var(--brut-border) !important;
    box-shadow: 3px 3px 0 var(--brut-shadow) !important;
}
body:not(.theme-light) .ev-chip:hover {
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}


/* --------------------------------------------------------
   BOT�ES CTA
   -------------------------------------------------------- */

body:not(.theme-light) .bloco-cta-btn,
body:not(.theme-light) .bloco-botao-link,
body:not(.theme-light) .form-submit-btn,
body:not(.theme-light) .pr-form-btn,
body:not(.theme-light) .ev-cta-btn,
body:not(.theme-light) .pm-cta,
body:not(.theme-light) .pm-cta--sm,
body:not(.theme-light) .wave-promo-card__cta--primary {
    border-color: var(--brut-border) !important;
    box-shadow: 3px 3px 0 var(--brut-shadow) !important;
}

body:not(.theme-light) .bloco-cta-btn:hover,
body:not(.theme-light) .bloco-botao-link:hover,
body:not(.theme-light) .form-submit-btn:hover,
body:not(.theme-light) .pr-form-btn:hover,
body:not(.theme-light) .ev-cta-btn:hover,
body:not(.theme-light) .pm-cta:hover {
    box-shadow: 5px 5px 0 var(--brut-shadow-hover) !important;
}

/* Bot�o secund�rio outline */
body:not(.theme-light) .bloco-botao-link.botao-secundario {
    border-color: var(--brut-border) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}

/* Bot�o voltar */
body:not(.theme-light) .pd-back-btn,
body:not(.theme-light) .pr-back-link,
body:not(.theme-light) .ev-back-link {
    border-color: var(--brut-border) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

body:not(.theme-light) .pd-back-btn:hover,
body:not(.theme-light) .pr-back-link:hover,
body:not(.theme-light) .ev-back-link:hover {
    box-shadow: 3px 3px 0 var(--brut-shadow-hover) !important;
}


/* --------------------------------------------------------
   INPUTS E FORMUL�RIOS
   -------------------------------------------------------- */

body:not(.theme-light) .form-bloco input,
body:not(.theme-light) .form-bloco select,
body:not(.theme-light) .form-bloco textarea,
body:not(.theme-light) .pr-form-control,
body:not(.theme-light) .pr-radio-option {
    border-color: var(--brut-border-light) !important;
}

body:not(.theme-light) .form-bloco input:focus,
body:not(.theme-light) .form-bloco select:focus,
body:not(.theme-light) .form-bloco textarea:focus,
body:not(.theme-light) .pr-form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

body:not(.theme-light) .checkbox-label input[type="checkbox"] {
    border-color: var(--brut-border-light) !important;
}


/* --------------------------------------------------------
   PAGE BUILDER � BLOCOS
   -------------------------------------------------------- */

body:not(.theme-light) .pd-blocos-wrapper .bloco-texto,
body:not(.theme-light) .bloco.bloco-texto > div {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .pd-blocos-wrapper .bloco-cta,
body:not(.theme-light) .bloco.bloco-cta > div,
body:not(.theme-light) .pd-blocos-wrapper .bloco-formulario,
body:not(.theme-light) .bloco.bloco-formulario > div,
body:not(.theme-light) .bloco.bloco-video > .bloco-video {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .pd-blocos-wrapper .bloco-imagem img,
body:not(.theme-light) .pd-blocos-wrapper .bloco-imagem-full img {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .bloco-divisor,
body:not(.theme-light) .pd-blocos-wrapper .bloco-divisor {
    border-top-color: var(--brut-border) !important;
    box-shadow: 0 2px 0 var(--color-primary) !important;
}

body:not(.theme-light) .form-titulo {
    border-bottom-color: var(--brut-border) !important;
}

body:not(.theme-light) .form-success {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}


/* --------------------------------------------------------
   SINGLES � /evento/, /promocao/, /noticia/
   -------------------------------------------------------- */

/* Imagens de capa */
body:not(.theme-light) .ev-cover-img,
body:not(.theme-light) .pr-cover-img,
body:not(.theme-light) .ns-cover {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

/* Bloco de metadados */
body:not(.theme-light) .ev-meta-block {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .ev-divider,
body:not(.theme-light) .pr-divider {
    border-top-color: var(--brut-border) !important;
}

/* Badges das singles */
body:not(.theme-light) .ev-badge,
body:not(.theme-light) .pr-status-badge {
    border-color: var(--brut-border) !important;
    box-shadow: 2px 2px 0 var(--brut-shadow) !important;
}

/* Mapa */
body:not(.theme-light) .ev-map-wrap {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .ev-map-info {
    border-bottom-color: var(--brut-border) !important;
}

/* Formul�rio de promo��o */
body:not(.theme-light) .pr-form-wrap {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .pr-rules-summary {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body:not(.theme-light) .pr-rules-body {
    border-color: var(--brut-border) !important;
}

body:not(.theme-light) .pr-protocol-box {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

/* Bot�o share */
body:not(.theme-light) .ev-share-btn {
    border-color: var(--brut-border) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}


/* --------------------------------------------------------
   PODCASTS
   -------------------------------------------------------- */

body:not(.theme-light) .pc-series-card,
body:not(.theme-light) .pc-card,
body:not(.theme-light) .wave-podcast-card {
    border-color: var(--brut-border) !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body:not(.theme-light) .pc-series-card:hover,
body:not(.theme-light) .pc-card:hover,
body:not(.theme-light) .wave-podcast-card:hover {
    box-shadow: 6px 6px 0 var(--brut-shadow-hover) !important;
}


/* --------------------------------------------------------
   PROGRAMA��O
   -------------------------------------------------------- */

body:not(.theme-light) .pg-day-btn {
    border-color: var(--brut-border) !important;
}
body:not(.theme-light) .pg-day-btn--active {
    border-color: var(--brut-border) !important;
    box-shadow: 3px 3px 0 var(--brut-shadow) !important;
}
body:not(.theme-light) .pg-item {
    border-color: var(--brut-border) !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}
body:not(.theme-light) .pg-item:hover {
    box-shadow: 5px 5px 0 var(--brut-shadow-hover) !important;
}


/* --------------------------------------------------------
   SEPARADORES E DIVISORES GLOBAIS
   -------------------------------------------------------- */

body:not(.theme-light) .nl-card__footer,
body:not(.theme-light) .ns-divider,
body:not(.theme-light) .pc-card__footer {
    border-top-color: var(--brut-border) !important;
}


/* ============================================================================


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 38 (REESCRITA): DARK MODE — BORDAS ADAPTATIVAS
 *
 * CAUSA DO PROBLEMA ANTERIOR:
 *   rgba(var(--var-a), 0.85) onde --var-a contém outro var() é descartado
 *   silenciosamente pelo browser — toda regra que dependia disso ficou inativa.
 *
 * SOLUÇÃO DEFINITIVA:
 *   Settings.php agora injeta variáveis simples (sem cadeia de var()) em :root:
 *   Light: --brut-border-color: #000000  --brut-shadow-color: #000000
 *   Dark:  --brut-border-color: #aaaaaa  --brut-shadow-color: #555555
 *
 *   Aqui usamos border: Xpx solid var(--brut-border-color) (shorthand completo)
 *   para garantir override robusto sobre qualquer border: solid #000 anterior.
 * ============================================================================ */


/* Fallback para quando nenhum tema está selecionado */
:root {
    --brut-border-color: #000000;
    --brut-border-light: #333333;
    --brut-shadow-color: #000000;
    --brut-shadow-hover: #000000;
}



/* ════════════════════════════════════════════════════════
   SEÇÃO 38 — PARTE 2: DARK MODE VIA body.theme-dark
   (seletor confirmado: index.php linha 213 gera body com
    class="theme-dark" quando o admin seleciona Dark mode)
   Especificidade: body.theme-dark .X = (0,2,1) > .X = (0,1,0)
   Garante override sobre todas as regras #000 anteriores.
   ════════════════════════════════════════════════════════ */

/* ── Cards de listagem ── */

body.theme-dark .nl-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body.theme-dark .nl-card:hover {
    box-shadow: 6px 6px 0 #777777 !important;
}

body.theme-dark .ev-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body.theme-dark .ev-card:hover {
    box-shadow: 6px 6px 0 #777777 !important;
}

body.theme-dark .pm-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body.theme-dark .pm-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}

body.theme-dark .pc-card,
body.theme-dark .pc-series-card,
body.theme-dark .wave-podcast-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body.theme-dark .pc-card:hover,
body.theme-dark .pc-series-card:hover,
body.theme-dark .wave-podcast-card:hover {
    box-shadow: 6px 6px 0 #777777 !important;
}

body.theme-dark .pg-item {
    border: 2px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
}
body.theme-dark .pg-item:hover {
    box-shadow: 5px 5px 0 #777777 !important;
}

/* ── Separadores ── */

body.theme-dark .nl-card__footer,
body.theme-dark .ev-card__footer,
body.theme-dark .ev-card__meta,
body.theme-dark .pm-card__footer,
body.theme-dark .pc-card__footer {
    border-top: 1px solid #888888 !important;
}

body.theme-dark .ns-divider,
body.theme-dark .ev-divider,
body.theme-dark .pr-divider {
    border-top: 2px solid #aaaaaa !important;
}

body.theme-dark .bloco-divisor {
    border-top: 2px solid #aaaaaa !important;
    box-shadow: 0 2px 0 var(--color-primary) !important;
}

/* ── Imagens ── */

body.theme-dark .ev-cover-img,
body.theme-dark .pr-cover-img,
body.theme-dark .ns-cover {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-dark .pd-cover-image,
body.theme-dark .bloco-imagem img,
body.theme-dark .bloco-imagem-full img,
body.theme-dark .pd-blocos-wrapper .bloco-imagem img,
body.theme-dark .pd-blocos-wrapper .bloco-imagem-full img {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

/* ── Badges e chips ── */

body.theme-dark .nl-tag,
body.theme-dark .ev-badge,
body.theme-dark .ev-badge--cat,
body.theme-dark .ev-badge--upcoming,
body.theme-dark .ev-badge--live,
body.theme-dark .ev-badge--closed,
body.theme-dark .pm-badge,
body.theme-dark .pm-countdown,
body.theme-dark .pc-badge,
body.theme-dark .pg-badge,
body.theme-dark .pr-status-badge {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 #555555 !important;
}

body.theme-dark .ev-chip {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}
body.theme-dark .ev-chip:hover,
body.theme-dark .ev-chip--active {
    box-shadow: 3px 3px 0 #555555 !important;
}

body.theme-dark .pg-day-btn {
    border: 2px solid #aaaaaa !important;
}
body.theme-dark .pg-day-btn--active {
    box-shadow: 3px 3px 0 #555555 !important;
}

/* ── Botões CTA ── */

body.theme-dark .bloco-cta-btn,
body.theme-dark .bloco-botao-link,
body.theme-dark .form-submit-btn,
body.theme-dark .pr-form-btn,
body.theme-dark .ev-cta-btn,
body.theme-dark .pm-cta,
body.theme-dark .pm-cta--sm,
body.theme-dark .wave-promo-card__cta--primary {
    border: 3px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 #555555 !important;
}

body.theme-dark .bloco-cta-btn:hover,
body.theme-dark .bloco-botao-link:hover,
body.theme-dark .form-submit-btn:hover:not(:disabled),
body.theme-dark .pr-form-btn:hover,
body.theme-dark .ev-cta-btn:hover,
body.theme-dark .pm-cta:hover {
    box-shadow: 5px 5px 0 #777777 !important;
}

body.theme-dark .bloco-botao-link.botao-secundario {
    border: 3px solid #aaaaaa !important;
}

body.theme-dark .ev-share-btn {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

body.theme-dark .pd-back-btn,
body.theme-dark .pr-back-link,
body.theme-dark .ev-back-link {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}
body.theme-dark .pd-back-btn:hover,
body.theme-dark .pr-back-link:hover,
body.theme-dark .ev-back-link:hover {
    box-shadow: 3px 3px 0 #777777 !important;
}

/* ── Inputs e formulários ── */

body.theme-dark .form-bloco input,
body.theme-dark .form-bloco select,
body.theme-dark .form-bloco textarea,
body.theme-dark .pr-form-control,
body.theme-dark .pr-radio-option,
body.theme-dark .checkbox-label input[type="checkbox"] {
    border: 2px solid #888888 !important;
}

body.theme-dark .form-bloco input:focus,
body.theme-dark .form-bloco select:focus,
body.theme-dark .form-bloco textarea:focus,
body.theme-dark .pr-form-control:focus {
    border: 2px solid var(--color-primary) !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}

body.theme-dark .form-titulo {
    border-bottom: 2px solid #aaaaaa !important;
}

body.theme-dark .form-success {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

/* ── Page Builder ── */

body.theme-dark .bloco.bloco-texto > div,
body.theme-dark .pd-blocos-wrapper .bloco-texto {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-dark .bloco.bloco-cta > div,
body.theme-dark .pd-blocos-wrapper .bloco-cta {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-dark .bloco.bloco-formulario > div,
body.theme-dark .pd-blocos-wrapper .bloco-formulario {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-dark .bloco.bloco-video > .bloco-video {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

/* ── Singles ── */

body.theme-dark .ev-meta-block {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-dark .ev-map-wrap {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body.theme-dark .ev-map-info {
    border-bottom: 2px solid #aaaaaa !important;
}

body.theme-dark .pr-form-wrap {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}

body.theme-dark .pr-rules-summary {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}
body.theme-dark .pr-rules-body {
    border: 2px solid #aaaaaa !important;
}

body.theme-dark .pr-protocol-box {
    border: 3px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 39: DARK MODE — CARDS DA HOME (classes s-*)
 *
 * A home.php usa classes diferentes das listagens dedicadas:
 *   .s-promo-card    → Promoções (home)
 *   .s-event-card    → Eventos (home)
 *   .s-news-card     → Notícias (home)
 *   .chart-track     → Top Músicas / Paradas
 *   .team-card-inner → Equipe (carousel)
 *   .s-show-card     → Programação (home)
 *
 * Seletor: body.theme-dark (confirmado index.php L213)
 * Especificidade: (0,2,1) > (0,1,0) — garante override sobre todas as regras
 * ============================================================================ */

/* ── Promoções da home (s-promo-card) ── */

body.theme-dark .s-promo-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .s-promo-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .s-promo-card__img {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── Eventos da home (s-event-card) ── */

body.theme-dark .s-event-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .s-event-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .s-event-card__img-wrap {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── Notícias da home (s-news-card) ── */

body.theme-dark .s-news-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .s-news-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .s-news-card__img-wrap {
    border-bottom: 2px solid #aaaaaa !important;
}
body.theme-dark .s-news-card__meta {
    border-top: 1px solid #888888 !important;
}

/* ── Top Músicas / Paradas (chart-track) ── */

body.theme-dark .chart-track {
    border: 2px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .chart-track:hover {
    border-color: #aaaaaa !important;
    box-shadow: 5px 5px 0 #777777 !important;
}
body.theme-dark .chart-track-cover {
    border-right: 2px solid #aaaaaa !important;
}

/* ── Equipe — carousel (team-card-inner) ── */

body.theme-dark .team-card-inner {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .team-card-inner:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .team-avatar-wrapper {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── Programação (s-show-card) ── */

body.theme-dark .s-show-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .s-show-card__photo {
    border-right: 2px solid #aaaaaa !important;
}

/* ── Botão "Ver Todas" / CTA das seções ── */

body.theme-dark .s-section-cta {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}
body.theme-dark .s-section-cta:hover {
    box-shadow: 4px 4px 0 #777777 !important;
}

/* ── Badges (s-category-pill, s-event-date-badge, s-live-badge) ── */

body.theme-dark .s-category-pill {
    border: 1px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 #555555 !important;
}
body.theme-dark .s-event-date-badge {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 #555555 !important;
}

/* ── Botões internos das cards ── */

body.theme-dark .s-btn-primary {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 #555555 !important;
    border-radius: 0 !important;
}
body.theme-dark .s-btn-primary:hover {
    box-shadow: 4px 4px 0 #777777 !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 40: DARK MODE — CLASSES REAIS (wave-* prefix)
 *
 * Mapeamento confirmado inspecionando os arquivos PHP de cada módulo:
 *   themes/wave/pages/promocoes.php   → .wave-promo-card
 *   themes/wave/pages/noticias.php    → .wave-promo-card.wave-news-card-item
 *   themes/wave/pages/eventos.php     → .wave-event-card
 *   themes/wave/modules/home_chart.php → .wave-chart-track
 *   themes/wave/pages/equipe.php      → .wave-team-card
 *
 * As Seções 38 e 39 falharam porque usavam classes .s-* e .pm-card
 * que NÃO existem nos módulos reais do tema WAVE.
 * ============================================================================ */

/* ── Promoções E Notícias (ambas usam .wave-promo-card) ── */

body.theme-dark .wave-promo-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-promo-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .wave-promo-card__img {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── Eventos (wave-event-card) ── */

body.theme-dark .wave-event-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-event-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .wave-event-card__img {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── Top Músicas / Chart (wave-chart-track) ── */

body.theme-dark .wave-chart-track {
    border: 2px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-chart-track:hover {
    border-color: #aaaaaa !important;
    box-shadow: 5px 5px 0 #777777 !important;
}
body.theme-dark .wave-chart-track__cover {
    border-right: 2px solid #aaaaaa !important;
}

/* ── Equipe (wave-team-card) ── */

body.theme-dark .wave-team-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-team-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .wave-team-card__avatar-wrap {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── Podcasts (wave-podcast-card — já coberto na Seção 38 mas reforçando) ── */

body.theme-dark .wave-podcast-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-podcast-card:hover {
    border-color: #aaaaaa !important;
    box-shadow: 6px 6px 0 #777777 !important;
}

/* ── Badges e elementos internos ── */

body.theme-dark .wave-promo-badge {
    border: 1px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 #555555 !important;
}
body.theme-dark .wave-event-card__date-badge {
    border: 2px solid #aaaaaa !important;
}

/* ── Botões CTA primários nas seções wave ── */

body.theme-dark .wave-promo-card__cta,
body.theme-dark .wave-promo-card .cta-btn,
body.theme-dark .wave-event-card .btn,
body.theme-dark .wave-event-card .cta-btn {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 #555555 !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-promo-card__cta:hover,
body.theme-dark .wave-event-card .cta-btn:hover {
    box-shadow: 4px 4px 0 #777777 !important;
}

/* ── CTA de seção (wave-chart-header__cta, etc.) ── */

body.theme-dark .wave-chart-header__cta {
    border: 2px solid #aaaaaa !important;
    box-shadow: 2px 2px 0 var(--color-primary) !important;
}
body.theme-dark .wave-chart-header__cta:hover {
    box-shadow: 4px 4px 0 #777777 !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 41: DARK MODE — PÁGINAS INTERNAS E SINGLES
 *
 * Cobertura:
 *   /equipe              → .wave-team-card
 *   /noticia/{slug}      → .ns-sidebar-card, .ns-main, artigo
 *   /promocao/{slug}     → .pr-container, .pr-form-wrap, .pr-rules-details
 *   /programacao         → .pg-day-btn--active .pg-day-btn__today (tipografia HOJE)
 *   Home NO AR AGORA     → .wave-onair-card
 * ============================================================================ */

/* ── /equipe — wave-team-card ── */

body.theme-dark .wave-team-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary, #e87722) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-team-card:hover {
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .wave-team-card__avatar-wrap {
    border-bottom: 2px solid #aaaaaa !important;
}

/* ── HOME — "No Ar Agora" (wave-onair-card) ── */

body.theme-dark .wave-onair-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary, #e87722) !important;
    border-radius: 0 !important;
}
body.theme-dark .wave-onair-card:hover {
    box-shadow: 6px 6px 0 #777777 !important;
}
body.theme-dark .wave-onair-card__photo-wrap {
    border-right: 2px solid #aaaaaa !important;
}

/* ── /noticia/{slug} — sidebar e artigo ── */

body.theme-dark .ns-sidebar-card {
    border: 2px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 var(--color-primary, #e87722) !important;
    border-radius: 0 !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}
body.theme-dark .ns-sidebar-card:hover {
    box-shadow: 5px 5px 0 #777777 !important;
}
body.theme-dark .ns-sidebar-card-title a {
    color: #eeeeee !important;
}
body.theme-dark .ns-sidebar-card-title a:hover {
    color: var(--color-primary, #e87722) !important;
}

/* Barra de destaque lateral */
body.theme-dark .ns-sidebar-accent {
    background: var(--color-primary, #e87722) !important;
}

/* Título da sidebar */
body.theme-dark .ns-sidebar-title {
    color: #ffffff !important;
    border-bottom: 2px solid #aaaaaa !important;
    padding-bottom: 8px !important;
}

/* ── /promocao/{slug} — container e blocos ── */

body.theme-dark .pr-rules-details {
    border: 2px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 #555555 !important;
    border-radius: 0 !important;
}
body.theme-dark .pr-form-wrap {
    border: 2px solid #aaaaaa !important;
    box-shadow: 4px 4px 0 var(--color-primary, #e87722) !important;
    border-radius: 0 !important;
}
body.theme-dark .pr-form-control {
    border: 1.5px solid #888888 !important;
    border-radius: 0 !important;
}
body.theme-dark .pr-form-control:focus {
    border-color: var(--color-primary, #e87722) !important;
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.2) !important;
}
body.theme-dark .pr-radio-option {
    border: 1.5px solid #888888 !important;
    border-radius: 0 !important;
}
body.theme-dark .pr-radio-option:has(input:checked) {
    border-color: var(--color-primary, #e87722) !important;
}
body.theme-dark .pr-form-btn {
    border: 2px solid #aaaaaa !important;
    border-radius: 0 !important;
}
body.theme-dark .pr-divider {
    border-top-color: #555555 !important;
}

/* ── /promocao/{slug} — light mode: neutraliza brutalismo nos campos ── */
body.theme-light .pr-form-wrap {
    border        : 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius : 12px !important;
    box-shadow    : none !important;
    background    : rgba(255, 255, 255, 0.95) !important;
    color-scheme  : light;
}
body.theme-light .pr-form-control {
    border              : 0.5px solid var(--color-border-tertiary) !important;
    border-radius       : var(--border-radius-lg) !important;
    background          : var(--bg-primary) !important;
    color               : var(--color-text-primary) !important;
    box-shadow          : none !important;
    -webkit-appearance  : none !important;
    appearance          : none !important;
}
body.theme-light input[type="date"].pr-form-control {
    -webkit-appearance: auto !important;
    appearance        : auto !important;
}
body.theme-light .pr-form-control:focus {
    border-color  : var(--color-border-primary) !important;
    box-shadow    : 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
}
body.theme-light .pr-radio-option {
    border        : 0.5px solid var(--color-border-tertiary) !important;
    border-radius : var(--border-radius-lg) !important;
    background    : var(--color-background-secondary) !important;
    box-shadow    : none !important;
}
body.theme-light .pr-radio-option:has(input:checked) {
    border-color  : var(--color-border-primary) !important;
    box-shadow    : none !important;
}

/* Imagem de capa da promo single — borda no dark */
body.theme-dark .pr-cover-img {
    border: 2px solid #aaaaaa !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #555555 !important;
}

/* ── /programacao — Tab "HOJE" tipografia ── */
/*
 * No dark, o tab ativo tem fundo laranja (--color-primary).
 * O texto "HOJE" (.pg-day-btn__today) tem cor escura ideal para o Light
 * mas no Dark queremos que contraste bem mesmo sobre o fundo laranja.
 * Deixamos #111 que já contrasta bem sobre laranja — mas o subtítulo
 * "Terça-feira" estava em cinza suave invisível no laranja. Corrigimos:
 */
body.theme-dark .pg-day-btn--active .pg-day-btn__today {
    color: #111111 !important;
    font-weight: 700 !important;
}
body.theme-dark .pg-day-btn--active .pg-day-btn__full {
    color: #111111 !important;
    font-weight: 600 !important;
}
body.theme-dark .pg-day-btn--active .pg-day-btn__short {
    color: #111111 !important;
}

/* Tabs dos outros dias no dark — texto legível */
body.theme-dark .pg-day-btn:not(.pg-day-btn--active) {
    border: 1px solid #aaaaaa !important;
    color: #cccccc !important;
}
body.theme-dark .pg-day-btn:not(.pg-day-btn--active):hover {
    border-color: var(--color-primary, #e87722) !important;
    color: var(--color-primary, #e87722) !important;
}

/* ── Itens da programação — pg-item no dark ── */
body.theme-dark .pg-item {
    border: 2px solid #aaaaaa !important;
    box-shadow: 3px 3px 0 #555555 !important;
    border-radius: 0 !important;
}
body.theme-dark .pg-item--live {
    border-color: var(--color-primary, #e87722) !important;
    box-shadow: 3px 3px 0 var(--color-primary, #e87722) !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 42: TABS DE PROGRAMAÇÃO — HOVER DO DIA "HOJE"
 *
 * O tab ativo (dia atual) recebe .pg-day-btn--active.
 * O span interno .pg-day-btn__today exibe o rótulo "Hoje".
 * O hover padrão (.pg-day-btn--active:hover) não tem destaque visual.
 * Esta seção adiciona efeito de destaque brutalista: sombra offset
 * + scale + brilho no label "Hoje" para ambos Light e Dark.
 * ============================================================================ */

/* ── Hover no tab HOJE — efeito brutalista (ambos os temas) ── */

.pg-day-btn--active:hover {
    transform   : translate(-2px, -2px) !important;
    box-shadow  : 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
    filter      : brightness(1.12) !important;
    outline     : none !important;
    transition  : transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

/* Label "Hoje" pulsa levemente ao hover */
.pg-day-btn--active:hover .pg-day-btn__today {
    background   : #fff !important;
    color        : var(--primary-color) !important;
    box-shadow   : 2px 2px 0 rgba(0, 0, 0, 0.35) !important;
    transform    : scale(1.08) !important;
    transition   : transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Subtítulo do dia (ex: "Terça-feira") fica visível no hover */
.pg-day-btn--active:hover .pg-day-btn__full {
    display : block !important;
    color   : rgba(255, 255, 255, 0.9) !important;
    font-size: 0.68rem !important;
}

/* ── Dark mode: hover com sombra mais clara ── */

body.theme-dark .pg-day-btn--active:hover {
    box-shadow  : 4px 4px 0 #aaaaaa !important;
    filter      : brightness(1.08) !important;
    transform   : translate(-2px, -2px) !important;
}

body.theme-dark .pg-day-btn--active:hover .pg-day-btn__today {
    background: #111111 !important;
    color     : var(--color-primary, #e87722) !important;
    box-shadow: 2px 2px 0 #555555 !important;
}

/* ── Idle state — deixa o tab HOJE levemente pulsando no idle ── */
/* animação sutil de glow no tab ativo para chamar atenção antes do hover */

@keyframes pg-today-pulse {
    0%   { box-shadow: 0 4px 16px rgba(var(--primary-rgb, 232,119,34), 0.35); }
    50%  { box-shadow: 0 4px 24px rgba(var(--primary-rgb, 232,119,34), 0.65); }
    100% { box-shadow: 0 4px 16px rgba(var(--primary-rgb, 232,119,34), 0.35); }
}

.pg-day-btn--active {
    animation: pg-today-pulse 2.5s ease-in-out infinite !important;
}

/* Para a animação ao hover para não conflitar */
.pg-day-btn--active:hover {
    animation: none !important;
}


/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 43: CORREÇÃO FUNDO LARANJA TAB HOJE (DARK MODE)
 *
 * No dark mode, o background do tab ativo perdia a cor laranja.
 * O dark theme do CMS sobrescreve o var(--primary-color) no background
 * de botões. Forçamos o fundo laranja explicitamente para garantir
 * que o dia HOJE sempre apareça laranja em qualquer tema.
 * ============================================================================ */

/* ── Tab HOJE: mantém fundo laranja mesmo no dark ── */

body.theme-dark .pg-day-btn--active {
    background   : var(--primary-color, #e87722) !important;
    background-color: var(--primary-color, #e87722) !important;
    border-color : var(--primary-color, #e87722) !important;
    color        : #111111 !important;
}

/* Textos dentro do tab ativo — preto para contrastar sobre laranja */
body.theme-dark .pg-day-btn--active .pg-day-btn__short {
    color: #111111 !important;
    font-weight: 800 !important;
}
body.theme-dark .pg-day-btn--active .pg-day-btn__full {
    color: rgba(0, 0, 0, 0.75) !important;
    font-weight: 600 !important;
}

/* Badge "HOJE" no canto — mantém contraste: fundo branco / texto laranja */
body.theme-dark .pg-day-btn--active .pg-day-btn__today {
    background: #111111 !important;
    color     : #ffffff !important;
    font-weight: 800 !important;
}

/* ── Hover: levanta e adiciona sombra offset brutalista ── */
body.theme-dark .pg-day-btn--active:hover {
    background   : var(--primary-color, #e87722) !important;
    transform    : translate(-2px, -2px) !important;
    box-shadow   : 4px 4px 0 #aaaaaa !important;
    filter       : brightness(1.1) !important;
    animation    : none !important;
}
body.theme-dark .pg-day-btn--active:hover .pg-day-btn__today {
    background  : #ffffff !important;
    color       : var(--primary-color, #e87722) !important;
    transform   : scale(1.1) !important;
    box-shadow  : 1px 1px 0 #555555 !important;
}

/* ============================================================================
 * WAVE BRUTALISM — SEÇÃO 44: TOP TRACKS
 * ============================================================================ */
/* === TOP TRACKS === */

/* 0. Wrapper Card */
.wave-chart-section .wave-chart-track {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    padding: 12px 14px !important;
    border-radius: 0 !important;
    border: 2px solid var(--text-primary, #ffffff) !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: 4px 4px 0 var(--color-primary, #FF6B00) !important;
}

/* 1. Container do card */
.wave-chart-section .wave-chart-track__row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 2. Coluna do número (rank) */
.wave-chart-section .wave-chart-track__rank {
    width: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    border-radius: 0 !important;
    font-size: 1.25rem !important;
}

/* 3. Thumbnail (imagem do álbum) */
.wave-chart-section .wave-chart-track__cover {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: 2px solid var(--text-primary, #ffffff) !important;
}
.wave-chart-section .wave-chart-track__cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* 4. Coluna de texto */
.wave-chart-section .wave-chart-track__info {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 5. Título e artista dentro da coluna de texto */
.wave-chart-section .wave-chart-track__title,
.wave-chart-section .wave-chart-track__artist {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    width: 100% !important;
}
.wave-chart-section .wave-chart-track__title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #ffffff) !important;
    margin-bottom: 2px !important;
}
.wave-chart-section .wave-chart-track__artist {
    font-size: 0.75rem !important;
    color: var(--color-secondary, #cccccc) !important;
    margin-bottom: 0 !important;
}

/* 6. Coluna de votos */
.wave-chart-section .wave-chart-track__votes {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
}

/* Category text color fix */
.wave-promo-badge span { color: #000000 !important; }

/* ── Tabs de categorias — Notícias Home (WAVE) ── */
.wave-news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.wave-news-tab {
    padding: 6px 16px;
    border: 3px solid #000;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--color-primary);
    transition: background 0.1s, color 0.1s, box-shadow 0.1s;
    line-height: 1.3;
}

.wave-news-tab:hover {
    background: var(--color-secondary);
    color: #fff;
    box-shadow: 3px 3px 0 #000;
}

.wave-news-tab.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 3px 3px 0 #000;
}

.wave-news-grid--loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s;
}

.wave-news-empty {
    padding: 24px 0;
    color: var(--text-secondary);
    font-style: italic;
    grid-column: 1 / -1;
}

/* ── Botão "Ver outras notícias" (WAVE) ── */
.wave-news-more {
    text-align: center;
    margin-top: 40px;
    width: 100%;
}

.wave-news-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 3px solid #000;
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--color-primary);
    transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}

.wave-news-more__btn:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 4px 4px 0 #000;
}

@media (max-width: 768px) {
    .wave-news-tabs { gap: 6px; margin-bottom: 16px; }
    .wave-news-tab { font-size: 0.75rem; padding: 5px 12px; }
}