.elementor-20 .elementor-element.elementor-element-8064dc4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-4d1c98d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0rem 0rem;--row-gap:0rem;--column-gap:0rem;--flex-wrap:wrap;--margin-top:07.5rem;--margin-bottom:7.5rem;--margin-left:0rem;--margin-right:0rem;}.elementor-20 .elementor-element.elementor-element-60ddc1f{width:100%;max-width:100%;}.elementor-20 .elementor-element.elementor-element-014ab43{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0rem 0rem;--row-gap:0rem;--column-gap:0rem;--flex-wrap:wrap;--margin-top:07.5rem;--margin-bottom:7.5rem;--margin-left:0rem;--margin-right:0rem;}:root{--page-title-display:none;}@media(max-width:1366px){.elementor-20 .elementor-element.elementor-element-4d1c98d{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:06.25rem;--margin-bottom:006.25rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:002.5rem;--padding-right:02.5rem;}.elementor-20 .elementor-element.elementor-element-014ab43{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:06.25rem;--margin-bottom:006.25rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:002.5rem;--padding-right:02.5rem;}}@media(max-width:1024px){.elementor-20 .elementor-element.elementor-element-4d1c98d{--justify-content:center;--margin-top:05rem;--margin-bottom:05rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:002.5rem;--padding-right:02.5rem;}.elementor-20 .elementor-element.elementor-element-014ab43{--justify-content:center;--margin-top:05rem;--margin-bottom:05rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:002.5rem;--padding-right:02.5rem;}}@media(max-width:767px){.elementor-20 .elementor-element.elementor-element-4d1c98d{--margin-top:003.75rem;--margin-bottom:03.75rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:01.25rem;--padding-right:01.25rem;}.elementor-20 .elementor-element.elementor-element-014ab43{--margin-top:003.75rem;--margin-bottom:03.75rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:01.25rem;--padding-right:01.25rem;}}/* Start custom CSS for html, class: .elementor-element-60ddc1f *//* =========================================================
   FILTRO DE DIAS
========================================================= */

.elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

/* Botões de dia */
.elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias .botao-dia{
    padding: 10px 40px;
    font-family: "Open Sans", Sans-Serif;
    font-size: 20px;
    color: #ED1D24;
    border: 1px solid #ED1D24;
    border-radius: 8px;
    text-align: center;
    transition: all .3s ease;
}

/* Hover, Focus e Ativo */
.elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias .botao-dia:hover,
.elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias .botao-dia:focus,
.elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias .botao-dia.ativo{
    border: 1px solid transparent;
    background-image: linear-gradient(to right, #ED1D24 0%, #FFC709 100%);
    background-clip: padding-box, border-box;
    color: #ffffff;
    cursor: pointer;
}


/* =========================================================
   GRID DE PROGRAMAÇÃO
========================================================= */

.grid-programacao{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap: 24px;
}


/* =========================================================
   CARD DO PROGRAMA
========================================================= */

.card-programa{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 180px;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    font-family: "Open Sans", Sans-Serif;
    transition: .3s ease;
}

/* Estado: Programa no ar */
.card-programa.no-ar{
    box-shadow:0 0 25px rgba(27, 211, 27, 0.2);
    border: 1px solid #1BD31B;
}

.card-programa.no-ar .bg{
    transform:scale(1.1);
}

/* Hover suave */
.card-programa:hover .bg{
    transform:scale(1.12);
}


/* =========================================================
   IMAGEM DE FUNDO + OVERLAY
========================================================= */

.card-programa .bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    z-index:1;
    transform:scale(1.05);
    transition:transform .4s ease;
}

.card-programa .overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.85)
    );
}


/* =========================================================
   CONTEÚDO INTERNO DO CARD
========================================================= */

.card-content{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap: 16px;
    padding: 16px;
}

/* Imagem lateral do programa */
.capa{
    width: 120px;
    height: 120px !important;
    max-height: 120px !important;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 8px !important;
}


/* =========================================================
   TEXTOS DO PROGRAMA
========================================================= */

.info h3{
    margin:0;
    font-family: "Open Sans", Sans-Serif;
    font-size: 18px;
    font-weight: 700;
}

.info p{
    margin: 4px 0;
    font-family: "Open Sans", Sans-Serif;
    font-size: 16px;
    font-weight: 400;
}

.horario{
    font-size: 16px;
    font-family: "Open Sans", Sans-Serif;
}


/* =========================================================
   BLOCO "AO VIVO"
========================================================= */

.elementor-20 .elementor-element.elementor-element-60ddc1f .infos-ao-vivo{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    opacity: 0;
    transition: all .3s ease-in-out;
}

/* Estado ativo do ao vivo */
.elementor-20 .elementor-element.elementor-element-60ddc1f .infos-ao-vivo.ao-vivo-agora{
    opacity: 1;
}

/* Ícone pulsante */
.elementor-20 .elementor-element.elementor-element-60ddc1f .infos-ao-vivo .blink{
    width: 18px;
    height: 18px;
    transition: all .3s ease-in-out;
}

/* Animação quando está ao vivo */
.elementor-20 .elementor-element.elementor-element-60ddc1f .infos-ao-vivo.ao-vivo-agora .blink{
    animation: blink 1s infinite;
}

@keyframes blink{
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.elementor-20 .elementor-element.elementor-element-60ddc1f .infos-ao-vivo .ao-vivo{
    font-weight: 700;
}

/* Badge legado (mantido) */
.badge-ao-vivo.ao-vivo-agora{
    display:block;
    margin-top:6px;
    color:#00ff66;
    font-weight:600;
}


/* =========================================================
   HORÁRIO
========================================================= */

.elementor-20 .elementor-element.elementor-element-60ddc1f .infos-horario{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.icone-relogio{
    width: 16px;
    height: 16px;
}


/* =========================================================
   ANIMAÇÕES DE TRANSIÇÃO
========================================================= */

.fade-out{
    opacity: 0;
    transition: all 1s ease;
}

.fade-in{
    opacity:1;
    transition: all 1s ease;
}

/* Efeito quando atualiza automaticamente */
.grid-programacao.pulse{
    animation: atualizou .4s ease;
}

@keyframes atualizou{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.01); }
    100%{ transform:scale(1); }
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media(max-width:1024px){
    .grid-programacao{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:640px){
    .grid-programacao{
        grid-template-columns:1fr;
    }
}

@media (max-width: 767px){

    /* Filtro ocupa largura total */
    .elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias{
        justify-content: stretch;
    }

    /* Botões menores */
    .elementor-20 .elementor-element.elementor-element-60ddc1f .filtro-dias .botao-dia{
        font-size: 1rem;
        padding: 10px 20px;
        width: 47.5% !important;
    }

    /* Ajustes de tipografia */
    .info h3{
        font-size: 18px;
    }

    .info p{
        font-size: 16px;
    }

    /* Ícone relógio maior no mobile */
    .elementor-20 .elementor-element.elementor-element-60ddc1f .icone-relogio{
        width: 19px;
        height: 17px;
    }
}/* End custom CSS */