/* ===== Variáveis ===== */
:root {
  --main-color: #e87082;
  --secondary-color: #e83082;
  --hover-color: #ffffff80;
}

/* ===== Estilos base ===== */
* {
  font-family: montserrat, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: 500;
}

a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--secondary-color);
}

a:hover {
  background-color: var(--secondary-color);
  color: white;
  transition-duration: 0.4s;
}

.flourish-embed:hover{
  color: none;
}

/* ===== Fontes ===== */
@font-face {
  font-family: Mango;
  src: url('data/black-mango-regular.ttf');
}

@font-face {
  font-family: Agrandir;
  src: url('data/Agrandir-Regular.ttf');
  font-weight: 1 1000;
}

@font-face {
  font-family: Agrandir;
  src: url('data/Agrandir-TextBold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Agrandir;
  src: url('data/Agrandir-ThinItalic.otf');
  font-style: italic;
}

@font-face {
  font-family: Montserrat;
  src: url(data/Montserrat-VariableFont_wght.ttf);
}

/* ===== Tipografia ===== */
h1 {
  font-size: 37.5pt;
  font-family: Mango, Agrandir, sans-serif;
}

h2 {
  font-size: 19pt;
  font-family: Agrandir, sans-serif;
}

h3 {
  font-size: 18pt;
  font-weight: bolder;
  color: var(--secondary-color);
  margin-bottom: 1em;
}

figcaption {
  text-align: center;
  font-size: 11pt;
  font-style: italic;
}

.nav-link {
  font-size: 13.5pt;
  font-family: Agrandir;
  padding: 4px .5rem !important;
}

strong{
  font-weight: bold;
}

.font-14pt p{
  font-size: 14pt;
}

/* ===== Layout e Componentes ===== */
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  background-color: var(--main-color); 
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

.navbar-toggler-icon {
  background-image: url("data/menu.svg");
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.1rem #ffffff !important;
}

.navbar .navbar-collapse .navbar-nav .nav-link:hover,
a.nav-link:hover {
  color: var(--hover-color) !important;
  background-color: #00000000 !important;
}

footer {
  padding: 25px;
  background-color: var(--main-color);
}

main {
  margin-left: 20px;
  margin-right: 20px;
}

.box-divider {
  height: 2px;
  background-color: gray;
  border-radius: 4px;
  width: 15%;
  margin-left: 42.5%;
}

.landing-box{
  font-size: 14pt;
  font-family: montserrat, Arial, Helvetica, sans-serif;
  text-align: left;
  color: white;
  display: flexbox;
  background-color: var(--main-color);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border-width: 0;
  padding: 25px;
}

.landing-box:hover{
  scale: 1.02;
  color: white;
  box-shadow: 8px 8px 5px lightblue;
  animation-duration: 100ms;
}

/* ===== Cards e Containers ===== */
.card {
  z-index: -1;
}

.viewer-16-9 {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.viewer-9-16 {
  height: auto;
  width: 75%;
  margin-left: 12.5%;
  margin-right: 12.5%;
  aspect-ratio: 9 / 16;
}

#portraits {
  margin-left: 10%;
  margin-right: 10%;
}

#documentario{
  max-height: 80vh;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  max-width: 1920px
  }

/* ===== Elementos interativos ===== */
.fa {
  padding: 20px;
  font-size: 40px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  color: white;
  scale: 1.5;
}

a.fa:hover {
  color: var(--hover-color);
  background-color: rgba(0, 0, 0, 0);
}

.active {
  font-weight: bolder;
}

.active-dropdown {
  color: black !important;
  font-weight: bold;
  background-color: #00000000 !important;
}

.dropdown-item:active {
  background-color: black;
  color: white;
}

.footer-mail:hover{
  background-color: rgba(0, 0, 0, 0);
}

.soundcloud-embed{
  max-width: 100%;
  margin-right: 0%;
  margin-left: 0%;
}

.soundcloud-embed-text:hover{
  background-color: #00000000;
}
/* ===== Citações e destaque de texto ===== */
.citation {
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 3vh;
  margin-bottom: 3vh;
  scale: 1;
}

.citation-inner {
  border-left: var(--secondary-color);
  border-left-style: solid;
  border-width: 4px;
  padding-left: 1em;
  padding-top: 0.5em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14pt;
}

.citation-ref {
  font-size: 12pt;
  padding-left: 1.35em;
  padding-top: 0.5em;
}

.text-highlight{
  background-color: rgb(233, 157, 169);
}

/* ===== Video e Banner ===== */
.carousel {
  z-index: -2;
}

.carousel-caption{
  width: 80%;
  max-height: 30%;
  margin-left: 10%;
  left: 0;
  padding-top: 20px;
}

#carousel-reportagem1{
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

#tittle-video-article {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  height: 70vh;
  z-index: -1;
}

#tittle-video-landing {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  height: 70vh;
  z-index: -1;
}

.video-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
}

.video-text-container {
  width: 75%;
  height: auto;
  margin-left: 12.5%; 
  margin-right: 12.5%;
  transform: translate(0, -20%);
  z-index: 1;
}

.video-text {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  color: rgb(19, 19, 19);
  text-align: center;
  background-color: var(--main-color);
}

.video-subtext {
  width: 98%;
  margin-left: 1%;
  margin-top: 12pt;
  color: black;
  text-align: center;
}

.video-text span {
  font-size: 4.85vw;
  line-height: 1;
  font-family: mango;
  font-weight: 600;
}

.video-subtext span {
  font-size: 3vw;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 500;
}

/* ===== Grids ===== */
.thanks-inner {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: 1fr !important;
}

.thanks-inner > div {
  grid-row: auto !important;
}

.bar-border {
  border-right: 1px;
  border-right-style: solid;
  border-color: white;
}

.flourish-chart {
  width: 100%;
}

.landing-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 2em;
}

/* ===== loader ============*/

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  transition: opacity 200ms ease;
}

#page-loader-icon{
  max-width: 10%;
  margin-left: auto;
  margin-right: auto;
}

.laco {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 1500ms linear alternate infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 3000;
  }
}

body.loaded .page-loader {
  opacity: 0;
  pointer-events: none;
}

/* ===== Media Queries ===== */
@media (min-width: 992px) {
  .navbar-collapse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .viewer-16-9 {
    width: 75%;
    margin-left: 12.5%;
    margin-right: 12.5%;
  }

  .viewer-9-16 {
    width: 25%;
    margin-left: 37.5%;
    margin-right: 37.5%;
  }
  .carousel-caption{
    width: 60%;
    max-height: 45%;
    margin-left: 20%;
    left: 0;
  }
  #page-loader-icon{
    max-width: 5%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1920px) {
  main {
    max-width: 1920px;
    margin-left: 10%;
    margin-right: 10%;
  }

  .banner-video {
    max-width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  #documentario{
    max-width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }
  .navbar-brand{
    margin-left: 10%;
  }
}

@media (max-width: 500px) {
  .video-text span {
    font-size: 8vw;
  }

  .video-subtext span {
    font-size: 4vw;
  }
  .carousel-caption{
    padding-top: 10px;
  }
  #carousel-reportagem1{
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }
  .carousel-caption-text{
    font-size: small;
  }
  p{
  margin-bottom: 1.5em;
  }
}

@media (max-width: 770px){
  .carousel-caption-text{
    margin-bottom: 1pt;
  }
  .video-text-container{

    transform: translate(0, -45%);
    margin-bottom: -100px;
  }
  .landing-grid {
    grid-template-columns: 1fr !important;
  }
  .landing-grid > div {
    grid-row: auto !important;
  }
}

@media (min-width: 984px) {
  .video-text span {
    font-size: 36pt;
  }
  .video-subtext span {
    font-size: 24pt;
  }
  .soundcloud-embed{
  max-width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  }
}

@media (min-width: 1500px){
  .video-text-container{
    max-width: 1010px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-height: 800px) {
  .video-text-container {
    transform: translate(0, -102%);
    margin-bottom: -200px;
  }
  #tittle-video-article{
    height: 80vh;
    top: -20vh;
    overflow: hidden
  }
  #article-responsive{
    top: 20vh;
    overflow: hidden;
  }
}

@media (max-height: 700px) {
  .video-text-container {
    transform: translate(0, -91%);
    margin-bottom: -150px
  }
  #tittle-video-article{
    height: 80vh;
    top: -20vh;
    overflow: hidden
  }
  #article-responsive{
    top: 20vh;
    overflow: hidden;
  }
}

@media(max-width: 1200px) {
  #portraits{
    max-width: 50%;
    margin-left: 25%;
  }
}

@media(max-width: 600px) {
  #portraits{
    max-width: 90%;
    margin-left: 10%;
  }
}
@media (max-height: 450px) {
  .video-text-container {
    transform: translate(0, -50%);
    margin-bottom: -100px
  }
}