* {
    margin: 0;
    hyphens: auto;
}

html, body {
    overflow: hidden;
}

body {
    background-color: rgb(2, 7, 7);
}

section, #main-title {
    font-family: "Outfit", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
}

#main-title {
    font-size: 35px;
}

header {
    background-color: rgb(99, 15, 15);
    padding: 15px 0px;
    text-align: center;
}

section {
    width: 90vw; height: calc(100vh - 4rem);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18pt;
    padding: 0 5vw;
}

.sombra {
    filter: drop-shadow(-1px 2px 4px #ffffff54);
}

.aviso-experiencia {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.aviso-experiencia div {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;

    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    text-align: justify;
}

.aviso-experiencia div img {
    width: 5rem;
}

.aviso-autoplay {
    gap: 2rem;
    justify-content: center;
}

.citacao {
    position: relative;
    flex-direction: column;
    font-size: 20pt;
}

.citacao img {
    position: absolute;
    top: 0;
    z-index: -1;

    opacity: 10%;
    height: 98.75%;

    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.7));
}

.vinheta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

    display: block;

    margin: auto !important;

    background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 1) 80%);
    z-index: 0 !important;

    pointer-events: none; /* Permite interação com a imagem */
  }

.citacao p {
    min-width: calc(100% - 30vw);
    margin: 0 15vw;

    z-index: 1;

    text-align: justify;
}

.autor-citacao {
    text-align: end !important;
    font-weight: bold;
}

.video-vertical, .video-horizontal {
    gap: 2rem;
}

.video-vertical video {
    max-height: 80vh;
    border: 4px solid white;
}

.video-horizontal {
    flex-direction: column;
}

.video-horizontal video {
    max-height: 45vh;
    border: 4px solid white;
}

.imagem {
    gap: 2rem;
    flex-direction: column;
}

.imagem img {
    border: 4px solid white;
}

.autoria {
    font-size: 14pt;
}

.destaques-texto {
    background-color: rgb(148, 13, 13);
    font-weight: bold;
    padding: 0px 8px;
}

.frase-impacto {
    margin-top: 1rem;
}

.imagem {
    display: flex;
    flex-direction: row;
}

.texto {
    background-image: radial-gradient(circle farthest-corner at center, rgba(255, 255, 255, 0.080), rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0) 80%);
    display: flex;
    flex-direction: column;
}

.texto, h2 {
    margin-bottom: 1rem;
}

.texto-imagem {
    display: flex;
    flex-direction: column;
}

.texto-imagem p {
    font-size: 18pt;
}

.colunas {
    width: calc(100% - 10vw); height: calc(100vh - 76px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    gap: 10px;
}

.colunas h2 {
    text-align: center;
    margin-bottom: 0.5rem !important;
    line-height: 1.15em;
}

.blocos {
    display: flex;
    gap: 1rem;
}

.bloco {
    flex-grow: 1;
    flex-basis: 0;

    padding: 20px 30px 20px;
    background-color: rgb(155, 23, 23);
    border-radius: 10px;
    transition: padding 300ms ease;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bloco:hover {
    padding: 15px 50px 20px;
    color: rgb(109, 16, 16);
    background-color: rgb(207, 207, 207);
    cursor: pointer;
}

.fim {
    flex-direction: column;
}

.fim h1 {
    font-size: 80pt;
}