/* ============================================
   SISTEMA DE PROPORÇÕES HARMONIOSAS
   Baseado em escala tipográfica 1.25 e grid de 8px
   ============================================ */

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Arial', 'Helvetica', sans-serif;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: #000;
    color: #fff;
}

.container-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* ============================================
   ÁREA PRINCIPAL - Layout balanceado
   ============================================ */
.noticia-fullscreen {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    gap: 0;
    isolation: isolate;
}

    .noticia-display {
        width: 100%;
        height: 65%;
        max-width: 100%;
        max-height: 65%;
    display: flex;
    flex-direction: row;
    animation: fadeInContent 0.6s ease-out;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    isolation: isolate;
}

.noticia-display.hidden {
    display: none;
}

@keyframes fadeInContent {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Seção da imagem */
.imagem-section {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 0;
    isolation: isolate;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: opacity 0.4s ease-out;
    transform: scale(1);
    transform-origin: center center;
}

.background-image.fade-in {
    animation: fadeInBackground 0.6s ease-out;
}

@keyframes fadeInBackground {
    from { opacity: 0; }
    to { opacity: 1; }
}

.overlay-imagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradê: muito escuro no topo, clareando gradualmente até transparente embaixo */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.85) 15%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 45%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.15) 75%,
        rgba(0, 0, 0, 0.05) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
}

.noticia-conteudo-imagem {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 5;
    padding: clamp(12px, 2.5vw + 2.5vh, 35px);
    padding-top: clamp(20px, 4vw + 4vh, 50px);
    padding-bottom: clamp(20px, 4vw + 4vh, 50px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: clamp(6px, 1vh, 12px);
    height: 50%;
    max-height: 50%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
    /* Garantir que o conteúdo fique sempre visível sobre a imagem */
    background: transparent;
}

.noticia-conteudo-imagem * {
    pointer-events: auto;
}

.noticia-conteudo-imagem .noticia-data-container {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    margin-bottom: 2px;
    padding-bottom: 0;
    overflow: hidden;
}

.noticia-conteudo-imagem .noticia-data {
    font-size: clamp(10px, 1.5vw + 1.2vh, 18px);
    font-weight: 600;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 
        0 0 6px rgba(0, 0, 0, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.95),
        1px 1px 4px rgba(0, 0, 0, 1);
    margin: 0;
    padding: 0 clamp(4px, 0.8vw, 8px);
    padding-bottom: clamp(2px, 0.4vh, 4px);
    display: block;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    background: transparent !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
    position: relative;
    z-index: 6;
}

.noticia-conteudo-imagem .noticia-titulo {
    font-size: clamp(14px, 4vw + 2.5vh, 42px);
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff !important;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.95),
        2px 2px 8px rgba(0, 0, 0, 1),
        0 4px 12px rgba(0, 0, 0, 0.8);
    margin: 0;
    padding: clamp(4px, 0.8vh, 8px) clamp(4px, 0.8vw, 8px);
    padding-bottom: clamp(2px, 0.5vh, 4px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    text-transform: none;
    font-variant: normal;
    text-decoration: none;
    box-sizing: border-box;
    background: transparent;
    position: relative;
    z-index: 6;
}

/* Seção do texto */
.texto-section {
    width: 0;
    height: 0;
    position: absolute;
    display: none;
    visibility: hidden;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.overlay-texto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.85) 100%
    );
    z-index: 2;
}

.noticia-conteudo-container {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: clamp(8px, 1.5vw + 1vh, 16px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    row-gap: 0;
    overflow: hidden;
    min-height: 0;
}

.noticia-data-container {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    margin-bottom: 2px;
    padding-bottom: 0;
    overflow: hidden;
}

.noticia-data {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    margin: 0;
    padding: 0;
    display: block;
}


/* Footer integrado na área de texto - escondido */
.footer-integrado {
    display: none;
}

/* Footer fixo na parte inferior (30% da tela) */
.footer-fixed-bottom {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 30%;
    max-height: 30%;
    z-index: 5;
    padding-top: clamp(2px, 0.5vh, 6px);
    padding-bottom: clamp(2px, 0.5vh, 6px);
    padding-left: clamp(4px, 1vh, 12px);
    padding-right: clamp(4px, 1vh, 12px);
    margin: 0;
    background: rgba(0, 0, 0, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}

.footer-content-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vh, 16px);
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    flex-wrap: nowrap;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

/* Em telas bem pequenas, usar layout horizontal para evitar QR code ocupar todo espaço */
@media (max-width: 600px) {
    .footer-content-bottom {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .footer-left-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1px, 0.3vh, 3px);
        flex-shrink: 0;
    }
    
    .qrcode-container {
        flex-shrink: 0 !important;
        display: flex !important;
        margin-left: auto;
    }
}

.footer-left-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vh, 16px);
    max-width: 100%;
    overflow: visible;
}

/* Footer integrado - estilos */
.footer-texto {
    font-size: clamp(9.6px, 1.44vw + 0.6vh, 24px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    text-align: center;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.3px;
    order: 1;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.qrcode-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
    order: 2;
    max-width: none;
    overflow: visible;
}

.qrcode-image {
    width: clamp(64px, 9.6vw + 2.4vh, 180px);
    height: clamp(64px, 9.6vw + 2.4vh, 180px);
    /* max-width e max-height removidos - serão definidos apenas nas media queries específicas */
    background: white;
    padding: clamp(2.4px, 0.48vh, 8px);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    display: block;
    border-radius: clamp(4.8px, 0.96vw, 10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    object-fit: contain;
    flex-shrink: 0;
}

/* Para telas bem pequenas, aplicar max-width/max-height apenas nelas */
@media (max-width: 600px) {
    .qrcode-image {
        max-width: 100%;
        max-height: 100%;
    }
}

.qrcode-image[src=""],
.qrcode-image:not([src]) {
    display: none !important;
}

.footer-logo {
    height: clamp(28px, 3.6vw + 1.8vh, 80px);
    width: auto;
    max-width: clamp(120px, 24vw + 3.6vh, 380px);
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
    order: 2;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer-logo[src=""],
.footer-logo:not([src]),
.footer-logo[src="#"] {
    display: none !important;
}

/* Footer fixo antigo - escondido */
.footer-fixed {
    display: none;
}

/* Estilos compartilhados para footer */
/* Herda estilos do footer integrado - regras aplicadas diretamente nos seletores */


/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 20;
    background: #000;
}

.loading-screen.hidden {
    display: none;
}

.spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-screen p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

/* ============================================
   RESPONSIVIDADE - Proporções mantidas
   ============================================ */

/* Telas bem pequenas - Layout vertical */
@media (max-width: 600px) {
    .noticia-fullscreen {
        flex-direction: column;
        padding: 0;
    }
    
    .noticia-display {
        flex-direction: column;
        height: 70%;
        max-height: 70%;
    }
    
    .imagem-section {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    .overlay-imagem {
        height: 100%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.85) 15%,
            rgba(0, 0, 0, 0.7) 30%,
            rgba(0, 0, 0, 0.5) 45%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.05) 85%,
            rgba(0, 0, 0, 0) 100%
        );
    }
    
    .texto-section {
        display: none;
        width: 0;
        height: 0;
    }
    
    .noticia-conteudo-container {
        padding: 12px;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(10px, 2vw + 2vh, 28px);
        padding-top: clamp(18px, 3.5vw + 3.5vh, 45px);
        padding-bottom: clamp(18px, 3.5vw + 3.5vh, 45px);
        gap: clamp(5px, 0.9vh, 10px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(9px, 1.2vw + 1vh, 16px);
        text-shadow: 
            0 0 6px rgba(0, 0, 0, 0.9),
            0 1px 2px rgba(0, 0, 0, 0.95),
            1px 1px 4px rgba(0, 0, 0, 1);
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(12px, 3.5vw + 2vh, 32px);
        line-height: 1.25;
        text-shadow: 
            0 0 10px rgba(0, 0, 0, 0.9),
            0 2px 4px rgba(0, 0, 0, 0.95),
            2px 2px 8px rgba(0, 0, 0, 1),
            0 4px 12px rgba(0, 0, 0, 0.8);
        padding: clamp(4px, 0.8vh, 8px) clamp(4px, 0.8vw, 8px);
        background: transparent;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(1.5px, 0.4vh, 5px);
        padding-bottom: clamp(1.5px, 0.4vh, 5px);
        padding-left: clamp(3px, 0.8vh, 10px);
        padding-right: clamp(3px, 0.8vh, 10px);
    }
    
    .footer-content-bottom {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(4px, 1vw, 8px) !important;
    }
    
    .footer-left-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1px, 0.3vh, 3px);
        flex-shrink: 0;
        max-width: calc(100% - 100px);
    }
    
    .footer-texto {
        font-size: clamp(8.4px, 1.2vw + 0.48vh, 14.4px);
        white-space: nowrap;
        text-align: left;
    }
    
    .footer-logo {
        height: clamp(19.2px, 3vw + 1.2vh, 43.2px);
        max-width: clamp(108px, 21.6vw + 2.4vh, 252px);
        flex-shrink: 0;
    }
    
    .qrcode-container {
        flex-shrink: 0 !important;
        display: flex !important;
        margin-left: auto;
    }
    
    .qrcode-image {
        width: clamp(38px, 6.5vw + 1.6vh, 85px) !important;
        height: clamp(38px, 6.5vw + 1.6vh, 85px) !important;
        max-width: 85px !important;
        max-height: 85px !important;
    }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
    .noticia-fullscreen {
        padding: 0;
    }
    
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .noticia-conteudo-container {
        padding: 10px;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(6px, 1.5vw + 1.5vh, 20px);
        padding-top: clamp(14px, 2.5vw + 2.5vh, 35px);
        padding-bottom: clamp(14px, 2.5vw + 2.5vh, 35px);
        gap: clamp(3px, 0.6vh, 7px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(8px, 1.1vw + 0.9vh, 15px);
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(11px, 3vw + 1.8vh, 28px);
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(1.5px, 0.35vh, 4px);
        padding-bottom: clamp(1.5px, 0.35vh, 4px);
        padding-left: clamp(3px, 0.7vh, 8px);
        padding-right: clamp(3px, 0.7vh, 8px);
    }
    
    .footer-content-bottom {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(4px, 1vw, 8px) !important;
    }
    
    .footer-left-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1px, 0.25vh, 2px);
        flex-shrink: 0;
        max-width: calc(100% - 70px);
    }
    
    .footer-texto {
        font-size: clamp(7.2px, 1.08vw + 0.36vh, 13.2px);
        white-space: nowrap;
        text-align: left;
    }
    
    .footer-logo {
        height: clamp(16.8px, 2.4vw + 0.96vh, 36px);
        max-width: clamp(96px, 19.2vw + 1.8vh, 216px);
        flex-shrink: 0;
    }
    
    .qrcode-container {
        flex-shrink: 0 !important;
        display: flex !important;
        margin-left: auto;
    }
    
    .qrcode-image {
        width: clamp(32px, 5.5vw + 1.1vh, 65px) !important;
        height: clamp(32px, 5.5vw + 1.1vh, 65px) !important;
        max-width: 65px !important;
        max-height: 65px !important;
    }
}

/* Painéis LED pequenos (396x192, 240x480) */
@media (max-width: 400px) and (max-height: 200px) {
    .noticia-fullscreen {
        padding: 0;
    }
    
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .noticia-conteudo-container {
        padding: 6px;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(4px, 0.8vw + 0.6vh, 10px);
        padding-top: clamp(12px, 2vw + 2vh, 30px);
        padding-bottom: clamp(12px, 2vw + 2vh, 30px);
        gap: clamp(1px, 0.3vh, 3px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(6px, 0.8vw + 0.5vh, 10px);
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(9px, 2vw + 1vh, 16px);
        line-height: 1.1;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(1px, 0.3vh, 3px);
        padding-bottom: clamp(1px, 0.3vh, 3px);
        padding-left: clamp(2px, 0.6vh, 6px);
        padding-right: clamp(2px, 0.6vh, 6px);
    }
    
    .footer-content-bottom {
        gap: clamp(1px, 0.3vh, 3px);
    }

    .footer-texto {
        font-size: clamp(6px, 0.84vw + 0.24vh, 10.8px);
    }

    .footer-logo {
        height: clamp(14.4px, 1.8vw + 0.72vh, 28.8px);
        max-width: clamp(84px, 16.8vw + 1.2vh, 156px);
    }
    
    .qrcode-image {
        width: clamp(30px, 4.8vw + 0.96vh, 60px);
        height: clamp(30px, 4.8vw + 0.96vh, 60px);
    }
    
    .qrcode-container {
        padding: 0;
    }
}

/* Telas muito pequenas (128x192px, 160x240px) */
@media (max-width: 180px) {
    .noticia-fullscreen {
        padding: 0;
    }
    
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(3px, 0.6vw + 0.5vh, 6px) !important;
        padding-top: clamp(10px, 1.5vw + 1.5vh, 25px) !important;
        padding-bottom: clamp(10px, 1.5vw + 1.5vh, 25px) !important;
        gap: clamp(1px, 0.2vh, 2px) !important;
        height: 50% !important;
        max-height: 50% !important;
        bottom: 0 !important;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(5px, 0.7vw + 0.4vh, 8px) !important;
        line-height: 1.05 !important;
        margin-bottom: 1px !important;
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(7px, 1.2vw + 0.7vh, 12px) !important;
        line-height: 1.1 !important;
        max-height: 100% !important;
    }
    
    .footer-fixed-bottom {
        height: 30% !important;
        max-height: 30% !important;
        padding-top: clamp(1px, 0.25vh, 2px) !important;
        padding-bottom: clamp(1px, 0.25vh, 2px) !important;
        padding-left: clamp(1.5px, 0.4vh, 3px) !important;
        padding-right: clamp(1.5px, 0.4vh, 3px) !important;
    }
    
    .footer-content-bottom {
        gap: clamp(1.3px, 0.26vh, 2.6px) !important;
        height: 100%;
        max-height: 100%;
    }
    
    .footer-texto {
        font-size: clamp(5.85px, 0.845vw + 0.234vh, 9.1px) !important;
        line-height: 1.2 !important;
    }
    
    .footer-logo {
        height: clamp(11.7px, 1.69vw + 0.455vh, 19.5px) !important;
        max-width: clamp(58.5px, 10.4vw + 0.91vh, 97.5px) !important;
    }
    
    .qrcode-image {
        width: clamp(26px, 4.16vw + 0.78vh, 45.5px) !important;
        height: clamp(26px, 4.16vw + 0.78vh, 45.5px) !important;
        padding: clamp(1.3px, 0.195vh, 2.6px) !important;
    }
    
    .qrcode-container {
        padding: 0 !important;
    }
}

/* Modo paisagem - telas pequenas */
@media (max-width: 500px) and (orientation: landscape) {
    .noticia-fullscreen {
        flex-direction: column;
        padding: 0;
    }
    
    .noticia-display {
        flex-direction: row;
        height: 70%;
        max-height: 70%;
    }
    
    .imagem-section {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    .texto-section {
        display: none;
        width: 0;
        height: 0;
    }

    .noticia-conteudo-container {
        padding: 8px;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(4px, 0.8vw + 0.6vh, 10px);
        padding-top: clamp(12px, 2vw + 2vh, 30px);
        padding-bottom: clamp(12px, 2vw + 2vh, 30px);
        gap: clamp(2px, 0.4vh, 3px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(6px, 0.8vw + 0.5vh, 10px);
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(9px, 2vw + 1vh, 16px);
        line-height: 1.15;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(1.5px, 0.35vh, 3.5px);
        padding-bottom: clamp(1.5px, 0.35vh, 3.5px);
        padding-left: clamp(3px, 0.7vh, 7px);
        padding-right: clamp(3px, 0.7vh, 7px);
    }
    
    .imagem-section {
        align-items: flex-start;
    }
    
    .background-image {
        background-position: center top;
        transform-origin: center top;
    }
    
    .footer-content-bottom {
        flex-direction: row;
        gap: clamp(4px, 1vw + 0.5vh, 8px);
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding-left: clamp(3px, 0.7vh, 7px);
        padding-right: clamp(3px, 0.7vh, 7px);
    }
    
    .footer-left-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1px, 0.25vh, 2px);
        flex-shrink: 0;
        max-width: calc(100% - 80px);
    }
    
    .qrcode-container {
        padding: 0;
        flex-shrink: 0;
        display: flex !important;
        margin-left: auto;
    }
    
    .footer-texto {
        font-size: clamp(7.2px, 1.44vw + 0.36vh, 14.4px);
        white-space: nowrap;
        flex-shrink: 0;
        text-align: left;
    }
    
    .footer-logo {
        height: clamp(16.8px, 2.64vw + 0.96vh, 36px);
        max-width: clamp(96px, 21.6vw + 1.8vh, 192px);
        flex-shrink: 0;
    }
    
    .qrcode-image {
        width: clamp(33.6px, 6vw + 1.2vh, 72px);
        height: clamp(33.6px, 6vw + 1.2vh, 72px);
        flex-shrink: 0;
    }
}

/* Telas horizontais muito pequenas (384x192, 240x480 landscape) */
@media (orientation: landscape) and (max-height: 250px) {
    .noticia-fullscreen {
        flex-direction: column;
        padding: 0;
    }
    
    .noticia-display {
        height: 70%;
        max-height: 70%;
        flex-direction: row;
    }
    
    .imagem-section {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    .texto-section {
        display: none;
        width: 0;
        height: 0;
    }
    
    .noticia-conteudo-container {
        padding: 6px;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(3px, 0.6vw + 0.5vh, 8px);
        padding-top: clamp(10px, 1.5vw + 1.5vh, 25px);
        padding-bottom: clamp(10px, 1.5vw + 1.5vh, 25px);
        gap: clamp(1px, 0.3vh, 3px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(5px, 0.7vw + 0.4vh, 9px);
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(8px, 1.5vw + 0.8vh, 14px);
        line-height: 1.1;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(1px, 0.25vh, 2.5px);
        padding-bottom: clamp(1px, 0.25vh, 2.5px);
        padding-left: clamp(2px, 0.5vh, 5px);
        padding-right: clamp(2px, 0.5vh, 5px);
    }
    
    .imagem-section {
        align-items: flex-start;
    }
    
    .background-image {
        background-position: center top;
        transform-origin: center top;
    }
    
    .footer-content-bottom {
        flex-direction: row;
        gap: clamp(4px, 1vw + 0.5vh, 8px);
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding-left: clamp(2px, 0.5vh, 5px);
        padding-right: clamp(2px, 0.5vh, 5px);
    }
    
    .footer-left-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1px, 0.25vh, 2px);
        flex-shrink: 0;
        max-width: calc(100% - 70px);
    }
    
    .footer-texto {
        font-size: clamp(6px, 1.2vw + 0.24vh, 13.2px);
        white-space: nowrap;
        flex-shrink: 0;
        text-align: left;
    }
    
    .footer-logo {
        height: clamp(14.4px, 2.16vw + 0.72vh, 28.8px);
        max-width: clamp(84px, 19.2vw + 1.2vh, 156px);
        flex-shrink: 0;
    }
    
    .qrcode-image {
        width: clamp(26.4px, 4.8vw + 0.84vh, 54px);
        height: clamp(26.4px, 4.8vw + 0.84vh, 54px);
        flex-shrink: 0;
    }
    
    .qrcode-container {
        padding: 0;
        flex-shrink: 0;
        display: flex !important;
        margin-left: auto;
    }
}

/* Media queries específicas para telas Novastar */
/* LED_Casarão: 240×480 (vertical) */
@media (width: 240px) and (height: 480px) {
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(14px, 5.8vw + 2.9vh, 28px);
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(10px, 4.2vw + 2.1vh, 14px);
    }
    
    .footer-texto {
        font-size: clamp(8px, 3.3vw + 1.7vh, 14px);
    }
    
    .footer-logo {
        height: clamp(18px, 7.5vw + 3.8vh, 35px);
        max-width: clamp(100px, 41.7vw + 20.8vh, 200px);
    }
    
    .qrcode-image {
        width: clamp(40px, 16.7vw + 8.3vh, 80px);
        height: clamp(40px, 16.7vw + 8.3vh, 80px);
    }
}

/* LED_Rodoviária: 384×192 (horizontal) */
@media (width: 384px) and (height: 192px) {
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
    }
    
    /* Aumenta área de texto e reduz padding para caber 3-4 linhas de título */
    .noticia-conteudo-imagem {
        height: 65% !important;
        max-height: 65% !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-left: clamp(4px, 0.8vw, 8px) !important;
        padding-right: clamp(4px, 0.8vw, 8px) !important;
        gap: 1px !important;
    }
    
    /* SEM !important: deixa o JS ajustar a fonte livremente se necessário.
       Resolve para ~13px: 2.6*3.84 + 2.6*1.92 = 9.98 + 4.99 = 14.97 → max 13px */
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(10px, 2.6vw + 2.6vh, 13px);
        line-height: 1.15;
    }
    
    /* Resolve para ~10px: 1.5*3.84 + 2.5*1.92 = 5.76 + 4.8 = 10.56 → max 10px */
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(8px, 1.5vw + 2.5vh, 10px);
    }
    
    .footer-texto {
        font-size: clamp(7px, 1.8vw + 3.6vh, 12px);
    }
    
    .footer-logo {
        height: clamp(14px, 3.6vw + 7.3vh, 28px);
        max-width: clamp(80px, 20.8vw + 41.7vh, 160px);
    }
    
    .qrcode-image {
        width: clamp(30px, 7.8vw + 15.6vh, 60px);
        height: clamp(30px, 7.8vw + 15.6vh, 60px);
    }
}

/* LED_Esquina_Sousa, LED_TenisClube_Crato, LED_Pombal: 288×192 (horizontal) */
@media (width: 288px) and (height: 192px) {
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
    }
    
    /* Aumenta área de texto e reduz padding para caber 3-4 linhas de título */
    .noticia-conteudo-imagem {
        height: 65% !important;
        max-height: 65% !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-left: clamp(4px, 0.8vw, 8px) !important;
        padding-right: clamp(4px, 0.8vw, 8px) !important;
        gap: 1px !important;
    }
    
    /* SEM !important: deixa o JS ajustar a fonte livremente se necessário.
       Resolve para ~12px: 3.2*2.88 + 2.5*1.92 = 9.2 + 4.8 = 14 → max 12px */
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(9px, 3.2vw + 2.5vh, 12px);
        line-height: 1.15;
    }
    
    /* Resolve para ~9px: 1.8*2.88 + 2.2*1.92 = 5.18 + 4.22 = 9.4 → max 9px */
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(7px, 1.8vw + 2.2vh, 9px);
    }
    
    .footer-texto {
        font-size: clamp(6px, 2.1vw + 3.1vh, 11px);
    }
    
    .footer-logo {
        height: clamp(13px, 4.5vw + 6.8vh, 26px);
        max-width: clamp(75px, 26vw + 39vh, 150px);
    }
    
    .qrcode-image {
        width: clamp(28px, 9.7vw + 14.6vh, 56px);
        height: clamp(28px, 9.7vw + 14.6vh, 56px);
    }
}

/* LED_SJP: 160×240 (vertical) */
@media (width: 160px) and (height: 240px) {
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(10px, 6.3vw + 4.2vh, 20px);
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(7px, 4.4vw + 2.9vh, 12px);
    }
    
    .footer-texto {
        font-size: clamp(6px, 3.8vw + 2.5vh, 11px);
    }
    
    .footer-logo {
        height: clamp(12px, 7.5vw + 5vh, 24px);
        max-width: clamp(70px, 43.8vw + 29.2vh, 140px);
    }
    
    .qrcode-image {
        width: clamp(25px, 15.6vw + 10.4vh, 50px);
        height: clamp(25px, 15.6vw + 10.4vh, 50px);
    }
}

/* Tela 256×384 (vertical) - Otimização específica */
@media (width: 256px) and (height: 384px) {
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .overlay-imagem {
        height: 100%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.85) 15%,
            rgba(0, 0, 0, 0.7) 30%,
            rgba(0, 0, 0, 0.5) 45%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.05) 85%,
            rgba(0, 0, 0, 0) 100%
        );
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(2px, 0.5vh, 4px);
        padding-bottom: clamp(2px, 0.5vh, 4px);
        padding-left: clamp(4px, 1.5vw, 8px);
        padding-right: clamp(4px, 1.5vw, 8px);
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(10px, 2.5vw + 2vh, 20px);
        padding-top: clamp(16px, 3vw + 3vh, 40px);
        padding-bottom: clamp(16px, 3vw + 3vh, 40px);
        gap: clamp(4px, 0.9vh, 8px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(12px, 4.7vw + 3.1vh, 24px);
        line-height: 1.25;
        text-shadow: 
            0 0 8px rgba(0, 0, 0, 0.95),
            0 2px 4px rgba(0, 0, 0, 0.98),
            2px 2px 6px rgba(0, 0, 0, 1),
            0 3px 10px rgba(0, 0, 0, 0.85);
        padding: clamp(4px, 0.8vh, 8px) clamp(4px, 0.8vw, 8px);
        padding-bottom: clamp(3px, 0.6vh, 6px);
        background: transparent;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(9px, 3.5vw + 2.3vh, 14px);
        line-height: 1.1;
        text-shadow: 
            0 0 6px rgba(0, 0, 0, 0.95),
            0 1px 2px rgba(0, 0, 0, 0.98),
            1px 1px 4px rgba(0, 0, 0, 1);
        padding: 0 clamp(4px, 0.8vw, 8px);
        padding-bottom: clamp(2px, 0.4vh, 4px);
    }
    
    .footer-content-bottom {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(4px, 1.5vw, 8px) !important;
        padding-left: clamp(2px, 0.8vw, 4px);
        padding-right: clamp(2px, 0.8vw, 4px);
    }
    
    .footer-left-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1px, 0.3vh, 2px);
        flex-shrink: 0;
        max-width: calc(100% - 80px);
    }
    
    .footer-texto {
        font-size: clamp(8px, 3.1vw + 2.1vh, 13px);
        white-space: nowrap;
        text-align: left;
    }
    
    .footer-logo {
        height: clamp(14px, 5.5vw + 3.6vh, 28px);
        max-width: clamp(80px, 31.3vw + 20.8vh, 160px);
        flex-shrink: 0;
    }
    
    .qrcode-container {
        flex-shrink: 0 !important;
        display: flex !important;
        margin-left: auto;
        padding: 0;
    }
    
    .qrcode-image {
        width: clamp(28px, 10.9vw + 7.3vh, 56px) !important;
        height: clamp(28px, 10.9vw + 7.3vh, 56px) !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }
}

/* Telas muito baixas */
@media (max-height: 500px) {
    .noticia-fullscreen {
        padding: 0;
    }
    
    .noticia-display {
        height: 70%;
        max-height: 70%;
    }
    
    .noticia-conteudo-container {
        padding: 12px;
    }
    
    .noticia-conteudo-imagem {
        padding: clamp(6px, 1.2vw + 1vh, 16px);
        padding-top: clamp(14px, 2.5vw + 2.5vh, 35px);
        padding-bottom: clamp(14px, 2.5vw + 2.5vh, 35px);
        gap: clamp(2px, 0.4vh, 5px);
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(12px, 2.8vw + 1.2vh, 24px);
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        padding-top: clamp(2px, 0.5vh, 5px);
        padding-bottom: clamp(2px, 0.5vh, 5px);
        padding-left: clamp(4px, 1vh, 10px);
        padding-right: clamp(4px, 1vh, 10px);
    }
    
    .footer-content-bottom {
        gap: clamp(2px, 0.6vw + 0.4vh, 5px);
    }
    
    .footer-texto {
        font-size: clamp(8.4px, 1.44vw + 0.6vh, 16.8px);
    }
    
    .footer-logo {
        height: clamp(21.6px, 3.36vw + 1.44vh, 45.6px);
        max-width: clamp(120px, 24vw + 2.4vh, 228px);
    }
    
    .qrcode-image {
        width: clamp(48px, 8.4vw + 1.8vh, 96px);
        height: clamp(48px, 8.4vw + 1.8vh, 96px);
    }
}

/* ============================================
   Telas HD e Full HD (desktop)
   Aumenta proporcionalmente logo, texto e QR
   sem afetar telas pequenas
   ============================================ */
@media (min-width: 1280px) and (min-height: 720px) {
    .noticia-display {
        height: 68% !important;
        max-height: 68% !important;
    }

    .footer-fixed-bottom {
        height: 32% !important;
        max-height: 32% !important;
        padding-top: 1.5vh !important;
        padding-bottom: 1.5vh !important;
        padding-left: 2vw !important;
        padding-right: 2vw !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .footer-content-bottom {
        flex-direction: row !important;
        gap: clamp(20px, 2.5vw, 40px) !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: fit-content !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        padding: 0.5vh 1vw !important;
        box-sizing: border-box !important;
    }

    .footer-left-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(10px, 1.2vw, 20px) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: calc(50% - 20px) !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
    }

    .footer-texto {
        font-size: clamp(18px, 1.3vw, 26px) !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .footer-logo {
        height: clamp(45px, 3.5vw, 70px) !important;
        max-width: clamp(220px, 20vw, 340px) !important;
        flex-shrink: 1 !important;
        min-width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .qrcode-container {
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        max-width: calc(50% - 20px) !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex-basis: auto !important;
    }

    .qrcode-image {
        width: clamp(120px, 9vw, 200px) !important;
        height: clamp(120px, 9vw, 200px) !important;
        max-width: clamp(120px, 9vw, 200px) !important;
        max-height: clamp(120px, 9vw, 200px) !important;
        min-width: clamp(120px, 9vw, 200px) !important;
        min-height: clamp(120px, 9vw, 200px) !important;
        padding: clamp(5px, 0.7vw, 10px) !important;
        border-radius: clamp(5px, 0.5vw, 10px) !important;
        flex-shrink: 0 !important;
        box-sizing: content-box !important;
        margin: 0 !important;
        overflow: visible !important;
        object-fit: contain !important;
    }
}

/* Telas Full HD+ (painéis grandes ou 4K reduzido) */
@media (min-width: 1920px) and (min-height: 1080px) {
    .noticia-display {
        height: 68% !important;
        max-height: 68% !important;
    }

    .footer-fixed-bottom {
        height: 32% !important;
        max-height: 32% !important;
        padding-top: 1.8vh !important;
        padding-bottom: 1.8vh !important;
        padding-left: 2.5vw !important;
        padding-right: 2.5vw !important;
        overflow: visible !important;
    }

    .footer-content-bottom {
        flex-direction: row !important;
        gap: clamp(20px, 2.5vw, 40px) !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: fit-content !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
    }

    .footer-left-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(14px, 1.8vw, 28px) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }

    .footer-texto {
        font-size: clamp(24px, 1.6vw, 36px) !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .footer-logo {
        height: clamp(60px, 4.5vw, 95px) !important;
        max-width: clamp(300px, 24vw, 450px) !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-content-bottom {
        flex-wrap: wrap !important;
        padding: 0.6vh 1.2vw !important;
        box-sizing: border-box !important;
    }

    .footer-left-group {
        max-width: calc(50% - 24px) !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
    }

    .footer-texto {
        font-size: clamp(22px, 1.5vw, 32px) !important;
    }

    .footer-logo {
        height: clamp(55px, 4vw, 85px) !important;
        max-width: clamp(270px, 22vw, 400px) !important;
        flex-shrink: 1 !important;
    }

    .qrcode-container {
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        max-width: calc(50% - 24px) !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex-basis: auto !important;
    }

    .qrcode-image {
        width: clamp(150px, 8.5vw, 260px) !important;
        height: clamp(150px, 8.5vw, 260px) !important;
        max-width: clamp(150px, 8.5vw, 260px) !important;
        max-height: clamp(150px, 8.5vw, 260px) !important;
        min-width: clamp(150px, 8.5vw, 260px) !important;
        min-height: clamp(150px, 8.5vw, 260px) !important;
        padding: clamp(7px, 0.9vw, 14px) !important;
        border-radius: clamp(7px, 0.6vw, 12px) !important;
        flex-shrink: 0 !important;
        box-sizing: content-box !important;
        margin: 0 !important;
        overflow: visible !important;
        object-fit: contain !important;
    }
}

/* Telas HD Verticais (Portrait) - Aumentar itens do QR code */
@media (min-width: 1280px) and (min-height: 720px) and (orientation: portrait) {
    .footer-fixed-bottom {
        height: 35% !important;
        max-height: 35% !important;
        padding-top: 2vh !important;
        padding-bottom: 2vh !important;
        padding-left: 2vw !important;
        padding-right: 2vw !important;
        overflow: visible !important;
    }

    .footer-content-bottom {
        flex-direction: row !important;
        gap: clamp(20px, 2.5vw, 40px) !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-left-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(14px, 1.8vw, 28px) !important;
        flex-shrink: 0 !important;
    }

    .footer-texto {
        font-size: clamp(24px, 2vh, 36px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .footer-logo {
        height: clamp(65px, 5vh, 100px) !important;
        max-width: clamp(320px, 28vw, 480px) !important;
    }

    .qrcode-container {
        overflow: visible !important;
    }

    .qrcode-image {
        width: clamp(180px, 12vh, 300px) !important;
        height: clamp(180px, 12vh, 300px) !important;
        max-width: clamp(180px, 12vh, 300px) !important;
        max-height: clamp(180px, 12vh, 300px) !important;
        min-width: clamp(180px, 12vh, 300px) !important;
        min-height: clamp(180px, 12vh, 300px) !important;
        padding: clamp(10px, 1.2vh, 18px) !important;
        overflow: visible !important;
        object-fit: contain !important;
    }
}

/* Telas Full HD Verticais (Portrait) - Aumentar itens do QR code */
@media (min-width: 1920px) and (min-height: 1080px) and (orientation: portrait) {
    .footer-fixed-bottom {
        height: 35% !important;
        max-height: 35% !important;
        padding-top: 2.5vh !important;
        padding-bottom: 2.5vh !important;
        padding-left: 2.5vw !important;
        padding-right: 2.5vw !important;
        overflow: visible !important;
    }

    .footer-content-bottom {
        flex-direction: row !important;
        gap: clamp(24px, 3vw, 48px) !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-left-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(16px, 2vw, 32px) !important;
        flex-shrink: 0 !important;
    }

    .footer-texto {
        font-size: clamp(28px, 2.2vh, 42px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .footer-logo {
        height: clamp(75px, 5.5vh, 115px) !important;
        max-width: clamp(380px, 30vw, 550px) !important;
    }

    .qrcode-container {
        overflow: visible !important;
    }

    .qrcode-image {
        width: clamp(220px, 13vh, 360px) !important;
        height: clamp(220px, 13vh, 360px) !important;
        max-width: clamp(220px, 13vh, 360px) !important;
        max-height: clamp(220px, 13vh, 360px) !important;
        min-width: clamp(220px, 13vh, 360px) !important;
        min-height: clamp(220px, 13vh, 360px) !important;
        padding: clamp(12px, 1.5vh, 22px) !important;
        overflow: visible !important;
        object-fit: contain !important;
    }
}

/* Telas com 720px de largura - Aumentar itens do QR code */
@media (width: 720px) {
    .footer-fixed-bottom {
        height: 35% !important;
        max-height: 35% !important;
        padding-top: 2vh !important;
        padding-bottom: 2vh !important;
        padding-left: 2vw !important;
        padding-right: 2vw !important;
        overflow: visible !important;
    }

    .footer-content-bottom {
        flex-direction: row !important;
        gap: clamp(20px, 2.5vw, 40px) !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-left-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(14px, 1.8vw, 28px) !important;
        flex-shrink: 0 !important;
    }

    .footer-texto {
        font-size: clamp(24px, 2vh, 36px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .footer-logo {
        height: clamp(65px, 5vh, 100px) !important;
        max-width: clamp(320px, 28vw, 480px) !important;
    }

    .qrcode-container {
        overflow: visible !important;
    }

    .qrcode-image {
        width: clamp(180px, 12vh, 300px) !important;
        height: clamp(180px, 12vh, 300px) !important;
        max-width: clamp(180px, 12vh, 300px) !important;
        max-height: clamp(180px, 12vh, 300px) !important;
        min-width: clamp(180px, 12vh, 300px) !important;
        min-height: clamp(180px, 12vh, 300px) !important;
        padding: clamp(10px, 1.2vh, 18px) !important;
        overflow: visible !important;
        object-fit: contain !important;
    }
}

/* Telas com 1080px de largura - Aumentar itens do QR code */
@media (width: 1080px) {
    .footer-fixed-bottom {
        height: 35% !important;
        max-height: 35% !important;
        padding-top: 2.5vh !important;
        padding-bottom: 2.5vh !important;
        padding-left: 2.5vw !important;
        padding-right: 2.5vw !important;
        overflow: visible !important;
    }

    .footer-content-bottom {
        flex-direction: row !important;
        gap: clamp(24px, 3vw, 48px) !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-left-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(16px, 2vw, 32px) !important;
        flex-shrink: 0 !important;
    }

    .footer-texto {
        font-size: clamp(28px, 2.2vh, 42px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .footer-logo {
        height: clamp(75px, 5.5vh, 115px) !important;
        max-width: clamp(380px, 30vw, 550px) !important;
    }

    .qrcode-container {
        overflow: visible !important;
    }

    .qrcode-image {
        width: clamp(220px, 13vh, 360px) !important;
        height: clamp(220px, 13vh, 360px) !important;
        max-width: clamp(220px, 13vh, 360px) !important;
        max-height: clamp(220px, 13vh, 360px) !important;
        min-width: clamp(220px, 13vh, 360px) !important;
        min-height: clamp(220px, 13vh, 360px) !important;
        padding: clamp(12px, 1.5vh, 22px) !important;
        overflow: visible !important;
        object-fit: contain !important;
    }
}

/* Telas verticais (altura maior que largura) - QR code na linha de baixo */
@media (orientation: portrait) and (min-width: 600px) {
    .footer-content-bottom {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(12px, 1.5vh, 20px) !important;
    }

    .footer-left-group {
        justify-content: center !important;
        margin-bottom: clamp(8px, 1vh, 16px) !important;
        max-width: 100% !important;
    }

    .qrcode-container {
        margin-top: clamp(4px, 0.8vh, 10px) !important;
    }
}

/* Garantir que todas as imagens sejam responsivas */
img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

/* Remover scrollbars */
.noticia-conteudo-container::-webkit-scrollbar,
.noticia-conteudo-imagem::-webkit-scrollbar,
.footer-content-bottom::-webkit-scrollbar {
    display: none;
}

.noticia-conteudo-container,
.noticia-conteudo-imagem,
.footer-content-bottom {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Prevenir overflow em todos os elementos */
* {
    max-width: 100%;
}

/* Garantir que elementos não ultrapassem a tela */
.noticia-fullscreen,
.noticia-display,
.imagem-section,
.footer-fixed-bottom,
.footer-content-bottom {
    overflow: hidden;
    box-sizing: border-box;
}

/* Prevenir sobreposição de elementos */
.noticia-conteudo-imagem,
.noticia-conteudo-imagem .noticia-titulo,
.noticia-conteudo-imagem .noticia-data {
    position: relative;
    /* Garantir que o texto fique sempre acima da imagem e do overlay,
       inclusive em telas maiores que 480px */
    z-index: 6;
}

/* Garantir que não haja elementos vermelhos ou de debug visíveis */
* {
    outline: none !important;
}

*:focus {
    outline: none !important;
}

/* Prevenir renderização incorreta de texto */
.noticia-titulo,
.noticia-data {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #fff !important;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Garantir que não haja elementos com cores vermelhas de erro */
.noticia-titulo::before,
.noticia-titulo::after,
.noticia-data::before,
.noticia-data::after {
    display: none !important;
    content: none !important;
}

/* Prevenir elementos de debug ou erro */
[style*="red"],
[style*="RED"],
[class*="error"],
[class*="debug"],
[id*="error"],
[id*="debug"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Garantir que o footer não sobreponha o conteúdo em telas pequenas */
@media (max-width: 480px) {
    .noticia-display {
        z-index: 2;
    }
    
    .footer-fixed-bottom {
        z-index: 3;
        position: relative;
    }
    
    .noticia-conteudo-imagem {
        z-index: 4;
        height: 50%;
        max-height: 50%;
        bottom: 0;
    }
}

/* Para telas muito pequenas */
@media (max-width: 180px) {
    .noticia-display {
        height: 70%;
        max-height: 70%;
        z-index: 2;
    }
    
    .footer-fixed-bottom {
        height: 30%;
        max-height: 30%;
        z-index: 3;
        position: relative;
    }
    
    .noticia-conteudo-imagem {
        z-index: 4;
        height: 50% !important;
        max-height: 50% !important;
        bottom: 0 !important;
        padding: clamp(3px, 0.6vw + 0.5vh, 6px) !important;
        padding-top: clamp(10px, 1.5vw + 1.5vh, 25px) !important;
        padding-bottom: clamp(10px, 1.5vw + 1.5vh, 25px) !important;
    }
    
    .noticia-conteudo-imagem .noticia-titulo {
        font-size: clamp(7px, 1.2vw + 0.7vh, 12px) !important;
        color: #fff !important;
        background: transparent !important;
    }
    
    .noticia-conteudo-imagem .noticia-data {
        font-size: clamp(5px, 0.7vw + 0.4vh, 8px) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
    }
}