body[data-view="about"] .container {
    width: 100%;
    height: 100vh;
    display: block;
    position: relative;
    background: #000000 !important;
    background-image: none !important;
    overflow: visible;
}

body[data-view="about"] .main-content {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Permite que elementos do header sobreponham sem aumentar altura */
/* Fundo preto atrás do logo e da seta */
body[data-view="about"] .header {
    overflow: visible;
    z-index: 10;
    position: relative;
    background: #000000;
}

/* Esconder logo e elementos de horário/tempo na view About */
body[data-view="about"] .header .logo,
body[data-view="about"] .header .logo img,
body[data-view="about"] .header .header-info,
body[data-view="about"] .header .header-info-simple,
body[data-view="about"] .header .date-weather,
body[data-view="about"] .header .date-text,
body[data-view="about"] .header .date-text-simple,
body[data-view="about"] .header .time,
body[data-view="about"] .header .time-simple {
    display: none !important;
}

/* Remover quaisquer sombras ou fundos herdados do header nessa view */
body[data-view="about"] .header,
body[data-view="about"] .header *,
body[data-view="about"] .logo-container,
body[data-view="about"] .logo,
body[data-view="about"] .logo img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
}

/* Garantir que pseudo-elementos não adicionem sombra */
body[data-view="about"] .header::before,
body[data-view="about"] .header::after {
    box-shadow: none !important;
    background: none !important;
}

/* Exibir o logo centralizado no topo usando pseudo-elemento ::after com a imagem desejada */
body[data-view="about"] .header::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 16px !important;
    width: 120px !important;
    height: 120px !important;
    margin-left: -60px !important;
    background-image: url('../../assets/icons/logo_infinitymedia_colors_branco.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    pointer-events: none !important;
    z-index: 1500 !important;
}

/* Ajustes para telas maiores */
@media (min-width: 1366px) and (max-width: 1919px) {
    body[data-view="about"] .header::after {
        top: 40px !important;
        width: 140px !important;
        height: 140px !important;
        margin-left: -70px !important;
    }
}

@media (min-width: 1920px) {
    body[data-view="about"] .header::after {
        top: 60px !important;
        width: 180px !important;
        height: 180px !important;
        margin-left: -90px !important;
    }
}

/* Esconde as informações do header (quarto, data, temperatura, hora) */
body[data-view="about"] .header .header-info {
    display: none;
}

/* Remove apenas pseudo-elementos desnecessários (::before) mas mantém ::after (logo inserido acima) */
body[data-view="about"] .header::before {
    content: none;
    display: none;
}

.about-container {
    position: relative;
    width: 1280px;
    height: 720px;
    margin: 0 auto;
    background: #000000 !important;
    border: none !important;
    box-sizing: border-box;
}

.about-backdrop {
    position: absolute;
    width: 1280px;
    height: 720px;
    left: 0px;
    top: 0px;
    display: none !important;
}

.about-content {
    position: absolute;
    width: 845px;
    height: 351px;
    left: 217px;
    top: 160px;
}

.about-header {
    display: block;
    position: absolute;
    width: 91px;
    height: 51px;
    left: 0px;
    top: 0px;
    padding: 0px 0px 12px;
}

.about-title {
    width: 91px;
    height: 39px;
    font-family: 'Inter', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 39px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    padding: 0;
}

.about-body {
    position: absolute;
    width: 845px;
    height: 270px;
    left: 0px;
    top: 60px;
    display: block;
}

.about-text {
    position: absolute;
    width: 558px;
    height: 270px;
    left: 0px;
    top: 0px;
    font-family: 'Inter', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    overflow: hidden;
}

.about-text p {
    margin: 0;
    padding: 0;
    white-space: normal;
    word-wrap: break-word;
}

/* Responsive: Monitores médios (1366px - 1919px) */
@media (min-width: 1366px) and (max-width: 1919px) {
    body[data-view="about"] .container {
        background-size: cover;
    }

    .about-container {
        width: 1366px;
        height: 768px;
    }

    .about-backdrop {
        width: 1366px;
        height: 768px;
    }

    .about-content {
        width: 902px;
        height: 451px;
        left: 110px;
        top: 90px;
    }

    .about-header {
        width: 121px;
        height: 43px;
    }

    .about-title {
        width: 121px;
        height: 43px;
        font-size: 42px;
        line-height: 42px;
    }

    .about-body {
        width: 710px;
        height: 400px;
        top: 70px;
    }

    .about-text {
        width: 710px;
        height: 400px;
        font-size: 18px;
        line-height: 19px;
    }

    /* Header - Seta */
    body[data-view="about"] .header::before {
        width: 34px;
        height: 34px;
        left: 84px;
        top: 66px;
    }

    /* Header - Logo - Centralizado */
    body[data-view="about"] .header::after {
        width: 101px;
        height: 107px;
        left: 50%;
        margin-left: -50.5px; /* Metade da largura para centralizar */
        top: 49px;
    }
}

/* Responsive: TVs e monitores grandes (1920px+) */
@media (min-width: 1920px) {
    body[data-view="about"] .container {
        background-size: cover;
    }

    .about-container {
        width: 1920px;
        height: 976px;
    }

    .about-backdrop {
        width: 1920px;
        height: 976px;
    }

    .about-content {
        width: 1267px;
        height: 527px;
        left: 290px;
        top: 150px !important;
    }

    .about-header {
        width: 136px;
        height: 76px;
    }

    .about-title {
        width: 136px;
        height: 59px;
        font-size: 48px;
        line-height: 59px;
    }

    .about-body {
        width: 1267px;
        height: 405px;
        top: 100px;
    }

    .about-text {
        width: 837px;
        height: 405px;
        font-size: 21px;
        line-height: 27px;
    }

    /* Header - Seta */
    body[data-view="about"] .header::before {
        width: 48px;
        height: 48px;
        left: 119px;
        top: 93px;
    }

    /* Header - Logo - Centralizado */
    body[data-view="about"] .header::after {
        width: 143px;
        height: 150px;
        left: 50%;
        margin-left: -71.5px;
        top: 69px;
    }
}