@import url(/css/global/boilerplate.css);
@import url(/css/global/reset.css);
/* @import url(/css/pages/orgaos-sociais.css); */

.off-screen-menu {
  background-color: rgb(157, 189, 163);
  height: 100vh;
  width: 100%;
  max-width: 450px;
  position: fixed;
  top: 0;
  right: -450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3rem;
  transition: 0.3s ease;
  /* z-index: 999; */
}

.off-screen-menu.active {
  right: 0;
}

nav {
  padding: 0.75rem;
  display: flex;
  width: 100%;
  /* background-color: rgb(63, 13, 213); */
  /* position: fixed;
  top: 0; */
}

/* .ham-menu {
  height: 50px;
  width: 50px;
  margin-left: auto;
  position: relative;
} */

.ham-menu {
  aspect-ratio: 1;
  /* height: 1.5rem; */
  width: clamp(1.6rem, 1.023rem + 2.885vw, 2.7rem);
  /* margin-left: auto; */
  position: relative;
}

.ham-menu span {
  height: clamp(0.2rem, 0.148rem + 0.262vw, 0.3rem);
  width: 100%;
  background-color: var(--cinza-200);
  border-radius: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s ease;
}

.ham-menu span:nth-child(1) {
  top: 25%;
}

.ham-menu span:nth-child(3) {
  top: 75%;
}

.ham-menu.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ham-menu.active span:nth-child(2) {
  opacity: 0%;
}

.ham-menu.active span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.imgTop {
  aspect-ratio: 1;
  width: 1.6rem;
}

h1 a {
  color: white;
  text-align: center;
}

nav {
  display: grid;
  grid-template-columns: 0.75fr 5fr 0.75fr;
  justify-items: center;
  align-items: center;
  width: min(60em, 100vw);
}

header {
  display: grid;
  justify-items: center;
  background-color: var(--azul-aberto-500);
  width: 100vw;
  position: fixed;
  top: 0;
  border-bottom: 1px solid white;
}

.imgTop {
  /* width: 1.6rem; */
  width: clamp(1.6rem, 1.1rem + 2.5vw, 2.6rem);
}

header h1 {
  font-size: calc(var(--fs-600) * 0.85);
  /* padding-block: clamp(0rem, -0.25rem + 1.25vw, 0.5rem); */
}

header li a {
  color: white;
}

.off-screen-menu li {
  margin-top: 0.5rem;
}

.off-screen-menu ul {
  padding-left: 0rem;
  margin-top: 0;
}

/* nova ------------------------------- */

/* nav {
  background-color: white;
  box-shadow: 3px 3px 5px black;
}

nav ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav li {
  height: 50px;
}

nav a {
  height: 100%;
  padding: 0 30px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: black;
}

nav li:first-child {
  margin-right: auto;
}

nav a:hover {
  background-color: lightgrey;
} */

/* .topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
}

@media (width < 40em) {
  .topnav__menu {
    background-color: rgb(27, 165, 64);
    position: fixed;
    top: 0;
  }
}

.topnav__links {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.topnav__link:hover {
  text-decoration: underline;
}

.topnav__item {
  list-style-type: none;
} */

/* h1 {
  display: none;
} */

/* .bg-color {
  background-color: var(--azul-aberto-500);
  padding-block: clamp(0.5rem, 0.35rem + 0.75vw, 0.8rem);
  border-bottom: 1px solid var(--cinza-200);
  padding-inline: 1rem;
}

header .wrapper {
  display: grid;
  grid-template-columns: 0.5fr 4fr 0.5fr;
} */

/* :is(h1, .ornamentoTopo) {
  grid-row: 1;
} */

/* header {
  grid-column: 2/3;
} */

/* .ornamentoTopo {
  aspect-ratio: 1;
  justify-self: end;
  grid-column: 3/4;
} */

/* .ornamentoTopo img {
  max-width: clamp(1.6rem, 0.997rem + 3.016vw, 2.75rem);
}

header {
  position: fixed;
  width: 100%;
  top: 0;
}

li.siteTitle {
  font-weight: 600;
  color: var(--cinza-200);
  text-align: center;
  font-size: clamp(1.2rem, 0.55rem + 3.25vw, 2.5rem);
  justify-self: center;
}

li.siteTitle a {
  color: var(--cinza-200);
}

h1 a {
  color: var(--cinza-200);
} */

/* Hero Section */

figure.heroImg {
  /* display: grid; */
  /* grid-template-columns: 1fr;
  gap: 0.5em; */
  justify-self: stretch;
}

figure.heroImg img {
  margin: 3rem auto 0rem;
  margin-top: clamp(4rem, 3rem + 5vw, 6rem);
  border: clamp(0.4rem, 0.1rem + 1vw, 0.7rem) solid var(--azul-aberto-500);
}

figure.heroImg figcaption {
  display: none;
  text-align: left;
  font-size: clamp(0.53rem, 0.345rem + 0.925vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-left: 1em;
  padding-top: clamp(0.25rem, 0rem + 1.25vw, 0.75rem);
  /* padding-left: 1em; */
  /* display: inline; */
  /* writing-mode: sideways-lr; */
  /* text-align: left; */
  /* align-self: end; */
  /* padding-top: 0.3rem; */
  /* grid-column: 2;
  grid-row: 1; */
}

/* main */
section.hero {
  display: grid;
  place-items: center;
}

.navLinear {
  padding: 0;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

.navLinear > li {
  /* background-color: lightgreen; */
  text-align: center;
  margin-bottom: 0.8rem;
}

.navLinear > li a {
  color: var(--azul-500);
  font-size: var(--fs-600);
  text-decoration: underline;
  text-underline-offset: 9px;
  text-decoration-thickness: 3px;
  cursor: pointer;
  font-weight: 400;
}

/* .navLinear > li a::before {
  content: attr(data-content);
  font-weight: 500;
  display: block;
  height: 0;
  background-color: yellow;
  visibility: hidden;
  font-size: 1.2rem;
} */

.navLinear > li a:hover {
  color: var(--azul-aberto-300);
  color: var(--preto);
  /* text-decoration: none; */
  /* font-weight: 500; */
}

@media only screen and (width >= 30em) {
  .navLinear {
    /* outline: 2px solid black; */
    display: flex;
    justify-content: space-evenly;
    justify-self: stretch;
    margin-top: 1.5em;
  }

  .navLinear > li a {
    font-size: calc(var(--fs-600) * 0.7);
    text-underline-offset: 13px;
  }
}

.brandName {
  font-weight: 500;
  font-size: calc(var(--fs-600) * 1.2);
  margin-top: clamp(2rem, -2.5rem + 12.5vw, 5rem);
  text-align: center;
}

.brandTagline {
  font-weight: 500;
  font-size: calc(var(--fs-500) * 1.25);
  margin-bottom: clamp(1rem, 0.75rem + 3.75vw, 3rem);
}

p.hero {
  font-size: var(--fs-500);
  padding-inline: 0rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.creditoImgHero {
  justify-self: start;
  margin: 0;
  padding: 0 0 1rem 0rem;
  text-wrap: balance;
  font-size: calc(var(--fs-300) * 1.2);
}

.hero blockquote {
  padding-inline: 0.5rem;
}

.hero blockquote p {
  font-size: var(--fs-400);
  padding-inline: 0rem;
  display: inline;
}

.hero .reference {
  font-size: var(--fs-400);
  /* text-transform: uppercase; */
  /* letter-spacing: 0.03rem; */
  justify-self: start;
  padding-left: 0.2rem;
  margin: 0;
  margin-top: 0.5rem;
  display: inline;
}

.hero .reference cite {
  font-style: normal;
  display: inline;
}

p.asterisc {
  font-size: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
  padding-inline: 0.5rem;
  margin: clamp(1.5rem, 1rem + 2.5vw, 2.5rem) auto clamp(3rem, 1.5rem + 7.5vw, 6rem);
}

.ornamento_01 {
  width: min(50%, 180px);
  margin-top: 1rem;
  margin-bottom: clamp(5.5rem, 4.786rem + 1.905vw, 6.5rem);
}

/* .iniciativas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100% - 40px), 1fr));
  gap: 1rem;
} */

/* .iniciativas div p {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  padding-left: 1rem;
} */

/* orgaos sociais */

.orgaosSociais .grid div {
  border: 2px solid black;
  border-radius: 1rem;
}

.orgaosSociais .grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}

.orgaosSociais .grid div {
  padding-inline: 1rem;
}

@media (width >= 45rem) {
  .orgaosSociais .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* @media (width >= 61rem) {
  .orgaosSociais .grid {
    grid-template-columns: repeat(5, 1fr);
  }
} */

footer {
  background-color: darkblue;
  color: beige;
  /* padding: 3rem 1rem; */
}

.mw {
  max-width: 60rem;
  margin-inline: auto;
}

.mw-min {
  width: min(100% - 40px, 60rem);
  margin-inline: auto;
}

.fb-wrapper {
  display: grid;
  grid-template-columns: 1fr min(100% - 40px, 60rem) 1fr;
}

.fb-wrapper > * {
  grid-column: 2;
}

/* hide */

/* .iniciativas {
  display: none;
} */

.iniciativas .mw.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  padding-top: 0rem;
  padding-bottom: 5rem;
}

.iniciativas .iniciativa .img {
  background-image: url(/img/icon_iniciativa.png), url(/img/texturaAzulAreia.png);
  padding: 5rem;
  background-size: 120px, 200px;
  background-repeat: no-repeat, repeat;
  background-position: 50% 50%;
}

.iniciativas .iniciativa {
  border: 3px solid var(--azul-aberto-500);
  border-radius: 0.5rem;
}

.iniciativas .iniciativa p {
  padding-block: 0;
  margin-block: 0;
  color: var(--azul-aberto-500);
  font-size: clamp(1.7rem, 1.6rem + 0.5vw, 1.9rem);
  font-weight: 500;
  padding: 0.7rem 0 0.3rem 0rem;

  text-align: center;
}

.barra {
  background-image: url(/img/textura_bolhasPadraoSeamless.png);
  background-size: clamp(6.875rem, 5.625rem + 6.25vw, 9.375rem);
  background-repeat: repeat;
  padding-block: clamp(0.75rem, 0.125rem + 3.125vw, 2rem);
  border-radius: 2rem;
}

.tituloSeccao {
  text-align: center;
  color: var(--azul-aberto-500);
  padding-top: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  font-size: var(--fs-700);
  font-weight: 500;
  margin-bottom: 3rem;
}

.botaoIniciativas img {
  width: 20px;
  display: inline;
}

.btn {
  cursor: pointer;
  padding: 0.5em 1em;
  font-size: 1.2rem;
  background-color: var(--cinza-200);
  color: var(--vermelho-500);
  border: 2px solid var(--vermelho-500);
  border-radius: 2rem;
}

.grid.socioButtons {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(min(80%, 300px), 1fr)); */
  grid-template-columns: 1fr;
  max-width: 30ch;
  gap: 1rem;
}

.mw {
  padding-inline: 1rem;
}

@media only screen and (width >= 57em) {
  .grid.socioButtons {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }
}

/* footer provisório */

.moreInfoSoon {
  text-align: center;
  font-size: clamp(1rem, 0.3043rem + 3.4783vw, 2rem);
  margin-bottom: 2rem;
}

.apoioDataTrade a {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  color: var(--cinza-200);
  background-color: var(--vermelho-500);
  border-radius: 2rem;
  padding: 1rem 2rem;
}

.apoioDataTrade a:hover {
  background-color: #cc8e2c;
}

/* ----------------------------------------------
agenda */

.evento {
  justify-self: start;
  color: var(--vermelho-500);
}

.eventoVamosLaConversar {
  padding: 0;
}

.agenda .type {
  background-color: var(--vermelho-200);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-size: clamp(0.8rem, 0.6rem + 1vw, 1.2rem);
  padding-block: 0.5rem;
}

.agenda .title {
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.agenda .obs {
  margin-bottom: 1rem;
  font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.4rem);
}

.place {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
}

.date,
.time {
  margin-bottom: 0;
  font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.2rem);
}

/* .date {
  margin-top: calc(- (clamp(1rem, 0.75rem + 1.25vw, 1.5rem)));
} */

.time {
  margin-bottom: 1rem;
}

.eventImg {
  margin-top: 3rem;
  margin-bottom: 6rem;
  width: min(100%, 480px);
}

.agenda h2 ~ * {
  color: var(--vermelho-500);
}

.periodo {
  font-weight: 400;
  font-style: italic;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

/* .agenda .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 80%), 1fr));
  grid-template-rows: auto auto auto auto auto auto;
  gap: 1rem;
  margin-bottom: 5rem;
}

.agenda .card {
  border: 2px solid var(--vermelho-500);
  border-radius: 0.5rem;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0rem;
  grid-row: span 6;
} */

.agenda .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 80%), 1fr));
  /* grid-template-rows: auto auto auto auto auto auto; */
  gap: 1rem;
  margin-bottom: 5rem;
}

.agenda .card {
  border: 2px solid var(--vermelho-500);
  border-radius: 0.5rem;
  /* display: grid; */
  /* grid-template-rows: subgrid; */
  /* gap: 0rem; */
  /* grid-row: span 6; */
}

.agenda .card > * {
  padding-inline: 1rem;
}

.agenda .host {
  margin-top: 1rem;
}

.agenda .dateTime {
  margin-bottom: 1.5rem;
}

/* quem somos */

section.quemSomos h3 {
  font-size: var(--fs-600);
  font-weight: 500;
  margin: 3rem 0 1rem;
}

section.quemSomos p {
  font-size: var(--fs-500);
}

section.quemSomos p {
  margin: 0;
  margin-bottom: 0.5rem;
}

section.quemSomos h3 {
  margin: 3rem 0 1rem;
}

.wrapper.espacosHorarios {
  margin: 2rem 0 3rem;
}

/* horarios */

section.quemSomos {
  margin-top: 0rem;
  margin-bottom: 5rem;
}

section.quemSomos .wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.5rem;
}

section.quemSomos .wrapper .box {
  display: grid;
  gap: 0rem;
}

section.quemSomos .wrapper h2 {
  margin-bottom: 0rem;
  font-size: calc(var(--fs-500) * 1.2);
}

section.quemSomos p {
  font-size: var(--fs-500);
}

section.quemSomos p.tipo {
  margin-top: 0.1rem;
  margin-bottom: 0.75rem;
  font-size: var(--fs-400);
}

section.quemSomos p.local {
  margin: 0rem 0 0.2rem 0;
}

section.quemSomos :is(p.horario) {
  margin: 0;
  padding: 0;
  /* grid-row: 2/4; */
}

/* fim: horarios */

/* fim – quem somos */

section.serSocio h3 {
  font-size: var(--fs-600);
  font-weight: 500;
}

section.serSocio p {
  font-size: var(--fs-500);
  /* font-weight: 500; */
}

/* serSócio */

section.serSocio .wrapper {
  padding: 2rem 0 4rem 0;
}

section.serSocio p:first-of-type {
  margin-bottom: 0.5rem;
}

section.serSocio p:nth-of-type(2) {
  margin-top: 0rem;
}

section.serSocio a {
  font-size: var(--fs-500);
  display: block;
  color: var(--vermelho-500);
  border: 2px solid var(--vermelho-500);
  border-radius: 2rem;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
}

section.serSocio a:hover {
  background-color: var(--vermelho-500);
  color: var(--vermelho-100);
}

@media only screen and (width >= 42rem) {
  section.serSocio .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  section.serSocio a {
    margin: 0;
  }
}

/* footer */

footer {
  background-color: var(--azul-aberto-500);
  color: var(--cinza-200);
  margin-top: 10rem;
  padding-bottom: 8rem;
}

footer img {
  margin-left: 0rem;
  width: clamp(16rem, 14rem + 10vw, 20rem);
  display: block;
}

footer .logoGA {
  padding-top: 3rem;
}

footer p {
  font-size: var(--fs-400);
}

footer :is(p.uniaoFreg, p.cmVFX) {
  margin: 0;
}

footer p.uniaoFreg {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

footer p.datatrade {
  margin-bottom: 0.25rem;
}

footer a.datatrade {
  border: solid 2px var(--cinza-200);
  border-radius: 2rem;
  padding: 0.5rem;
  color: var(--cinza-200);
  display: block;
  text-align: center;
  width: min(275px, 100%);
}

/* regulamento */

.direitosRegalias li {
  list-style-type: lower-alpha;
}

/* footer */

footer h2 {
  font-weight: 500;
  font-size: var(--fs-600);
  text-align: left;
  margin: 4rem 0 3rem;
}

footer h2:first-of-type {
  margin-bottom: 0rem;
}

footer p {
  font-size: var(--fs-500);
}

footer .apoiante {
  margin-bottom: 4rem;
  margin-top: 1rem;
}

/* @media screen and (width<31rem) {
  footer p.jfAlhan {
    max-width: 15em;
  }
} */

/* @media screen and (width<35rem) {
  footer p.cmVfx {
    max-width: 9em;
  }
} */

footer img.jfAlhan {
  max-width: 9em;
}

footer img.datatrade {
  max-width: clamp(12rem, 10.5rem + 7.5vw, 15rem);
}

footer p.email {
  font-size: clamp(1rem, 0.7rem + 1.5vw, 1.6rem);
}

/* footer .datatrade {
  font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.6rem);
} */

footer a.apoioDataTrade {
  margin-top: 2rem;
  display: inline-block;
  color: var(--cinza-100);
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.3rem);
  padding: 1rem;
  border: 3px solid;
  border-color: var(--cinza-100);
  border-radius: 2rem;
}

footer a.apoioDataTrade:hover {
  color: var(--azul-aberto-500);
  background-color: var(--cinza-200);
  border-color: var(--azul-aberto-500);
}

.joaoMaria .title::before {
  content: "/";
  display: block;
  margin-bottom: 1.5rem;
}

.joaoMaria .title {
  font-weight: 600;
  font-size: clamp(1.7rem, 1.55rem + 0.75vw, 2rem);
  padding-top: 2rem;
  margin-bottom: 0;
}
.joaoMaria .title ~ p {
  margin: 0.5rem 0 0;
}

footer ul.espacoHorario {
  padding-left: 0;
}

footer .espacoHorario > * {
  font-size: var(--fs-400);
}
footer .espacoHorario .title {
  font-size: calc(var(--fs-400) * 1.2);
}

.espacosHorarios {
  margin-bottom: 1.5rem;
}

.barraInicioPag {
  margin-top: clamp(4rem, 2.5rem + 7.5vw, 7rem);
}

.fichaSocio {
  width: 80%;
  height: 975px;
}