/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* nao repare no meu codigo, eu faço muitos enjambres pra funfar ≽^•⩊•^≼ * ≽^•⩊•^≼   ≽^•⩊•^≼   ≽^•⩊•^≼   ≽^•⩊•^≼   ≽^•⩊•^≼   ≽^•⩊•^≼   ≽^•⩊•^≼/*/

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-color: #1f1d24;
  background-image: url("/pattern1.png");
  background-repeat: repeat;
  background-size: 100px 100px;
  animation: patternDrift 100s linear infinite;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.7;
  font-family: 'Special Elite', monospace;
}

@keyframes patternDrift {
  from { background-position: 0 0; }
  to   { background-position: 200px 200px; }
}


/* bannerzito */

.banner {
  position: relative;
  margin-top: 30px;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}

.banner-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catinho {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 180px;
  height: auto;
  transition: transform 0.25s ease-out;
  z-index: 3;
  cursor: pointer;
}

.catinho:hover {
  transform: translate(-4px, 2px) rotate(-8deg) scale(1.05);
}

@media (max-width: 650px) {
  .banner {
    height: 160px;
  }
  .catinho {
    width: 100px;
  }
}


/* ticker */

.ticker {
  background: #1b1b1b;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full bleed !!!1111!1*/
  color: #fff;
  padding: 6px 0;
  overflow: hidden;
}

.allpage {
  min-width: 0;
}


/* navbar horizontal — substitui a antiga coluna de menu */

.navbar-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1400px;
  margin: 26px auto 0;
  padding: 0 25px;
}

.navbar-main a {
  background: #f0c022;
  color: #2a2832;
  text-align: center;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: 'Libertinus Mono', monospace;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 1px;
  outline: 2px solid rgba(255,255,255,0.2);
  transition: transform 0.15s ease, outline 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.navbar-main a::before,
.navbar-main a::after {
  content: " ✦ ";
  color: #2a2832;
  opacity: 0.6;
  transition: color 0.15s ease;
}

.navbar-main a:hover {
  background: #2a2832;
  color: #ffd23f;
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25), 0 2px 0 rgba(0,0,0,0.4);
}

.navbar-main a:hover::before,
.navbar-main a:hover::after {
  color: #ffd23f;
  opacity: 0.9;
}

@media (max-width: 650px) {
  .navbar-main {
    gap: 8px;
    margin-top: 18px;
    padding: 0 12px;
  }
  .navbar-main a {
    flex: 1 1 auto;
    padding: 10px 8px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  .navbar-main a::before,
  .navbar-main a::after {
    display: none;
  }
}


/* layouteeeeeeee — agora só 3 colunas */

.aboveheader {
  display: grid;
  grid-template-columns: 230px 1fr 300px;
  grid-template-areas: "left main services";
  gap: 24px;
  max-width: 1400px;
  margin: 30px auto 0;
  padding: 0 25px;
}

@media (max-width: 1300px) {
  .aboveheader {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "main main"
      "left services";
    gap: 20px;
    margin-top: 24px;
    padding: 0 16px;
  }
}

@media (max-width: 650px) {
  .aboveheader {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "left"
      "services";
    gap: 16px;
    margin-top: 20px;
    padding: 0 12px;
  }
}

.sidebarcol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #ddd;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
  align-self: start;
}
.sidebarleft  { grid-area: left; }
.sidebarright { grid-area: services; }

.sidebox {
  padding: 16px 18px;
  background: #2a2832;
  border-radius: 10px; /* borda arredondada :o */
  outline: 2px solid rgba(255,255,255,0.2);
}


/* cartão de apresentação (coluna esquerda) */

.introshort {
  text-align: center;
  font-size: 14px;
  color: #f1f1f1;
  margin: 2px 0 0;
  line-height: 1.6;
}

.tagrow {
  text-align: center;
  font-size: 13px;
  font-family: 'Nova Round', sans-serif;
  letter-spacing: 0.3px;
  margin: 6px 0;
  animation: tagColorShift 7s ease-in-out infinite;
}

.tagrow-1 { animation-delay: 0s; }
.tagrow-2 { animation-delay: 1.3s; }
.tagrow-3 { animation-delay: 2.6s; }

@keyframes tagColorShift {
  0%, 100% { color: #ddd; }
  50%      { color: #f5db67; }
}

.tagdivider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 0;
  color: rgba(255,255,255,0.35);
  font-size: 10px;
}

.tagdivider::before,
.tagdivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

.mobilenoticebox {
  background: #2f2b23;
}

.mobilenotice {
  font-size: 11.5px;
  font-style: italic;
  text-align: center;
  color: #e6c86b;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

.menu-divider {
  margin: 12px 0;
  border-top: 2px dashed rgba(255,255,255,0.45);
}


/* ícones de redes */

.linkslinks {
  color: #fff;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  text-align: center;
}

.linkslinks a        { color: white; }
.linkslinks a:visited { color: #d0d1d9; }
.linkslinks a:hover   { color: #f5db67; }

.iconrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.iconrow a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #32313b;
  color: #facc1b;
  border-radius: 10px;
  font-size: 20px;
  text-decoration: none;
  outline: 2px solid rgba(255,255,255,0.2);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.iconrow a:visited {
  color: #facc1b;
}

.iconrow a:hover {
  background: #facc1b;
  color: #41465d;
  transform: translateY(2px);
}

.iconrow a:visited:hover {
  color: #41465d;
}


/* player de música */

.abadomusicplayer {
  flex-direction: column;
  text-align: center;
}

.player {
  text-align: center;
  background: #cfac23;
  padding: 2px;
  border-radius: 10px;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

#botaomediaplayer {
  background: #b58410;
  color: #d0d0d6;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#botaomediaplayer:hover {
  background: #a6780d;
}

#volumerange {
  cursor: pointer;
  border-radius: 7px;
  height: 8px;
  overflow: hidden;
  color: #ad672a;
  padding: 10px;
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.volumerangetext {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0;
}


/* coluna central */

.allpage {
  grid-area: main;
  background: #2a2832;
  color: #fff;
  border-radius: 10px;
  padding: 40px 40px;
  outline: 2px solid rgba(255,255,255,0.2);
}

@media (max-width: 650px) {
  .allpage {
    padding: 20px 16px;
  }
}

.pagecontent {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.block {
  margin-bottom: 40px;
}

.sidebarright .block:last-child {
  margin-bottom: 0;
}

.blocktitle {
  font-family: 'Tiny5', monospace;
  background: #32313b;
  color: #ffffff;
  padding: 10px 18px;
  font-size: 30px;
  letter-spacing: 0px;
  border-radius: 14px 14px 0px 0px;
  margin-bottom: -10px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

@media (max-width: 650px) {
  .blocktitle {
    font-size: 22px;
  }
}

.blockbody {
  background: #43424f;
  color: #f1f1f1;
  padding: 22px 24px;
  border-radius: 12px;
  line-height: 1.7;
  text-align: justify;
}

@media (max-width: 480px) {
  .blockbody {
    padding: 16px 14px;
  }
}

.blockbodyscroll {
  font-family: "Special Elite";
  max-height: 420px;
  overflow-y: auto;
}

.panelgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

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

.iframeytwrap {
  display: block;
  padding: 12px;
  border-radius: 14px;
  outline: 2px solid rgba(255,255,255,0.35);
  background: #32313b;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, outline-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
 
.iframeytwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 2;
}
 
.iframeytwrap:hover {
  transform: translateY(-4px) scale(1.01);
  outline-color: #facc1b;
  background: #3a3946;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 0 2px rgba(250,204,27,0.25);
}
 
.iframeytwrap:hover::after {
  transform: translateX(120%);
}
 
.iframeyt {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
 
.iframeyt iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}
 


/* footeroncio */

.footer {
  text-align: center;
  font-size: 13px;
  margin: 40px 0;
  color: #fff;
}


/* ── MISC ── */

.pagetitle {
  font-family: 'Spectral', serif;
  font-size: 17px;
  line-height: 1.8;
}


.imagebutton {
  display: block;
  margin-bottom: 18px;
  text-decoration: none;
  padding: 12px;
  outline: 2px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  background: #32313b;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, outline-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
 
.imagebutton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
 
.imagebutton:hover {
  transform: translateY(-4px) scale(1.03);
  outline-color: #facc1b;
  background: #3a3946;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 0 2px rgba(250,204,27,0.25);
}
 
.imagebutton:hover::after {
  transform: translateX(120%);
}
 
.imagebutton img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.35);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
 
.imagebutton:hover img {
  border-color: #facc1b;
}

.introrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.jotareal {
  width: 90%;
  max-width: 400px;
  border-radius: 4px;
  margin-left: -16px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .introrow {
    flex-direction: column;
  }

  .jotareal {
    width: 100%;
    margin-left: 0;
  }
}

.intromsg p {
  margin-top: 0;
  letter-spacing: -0.2px;
}

.intromsg {
  flex: 1 1 0;
  min-width: 0; /* sem isso o texto longo não deixa a imagem e o texto ficarem lado a lado */
}