@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
 --green-100: #EEF2DA;
 --green-200: #C4DB9C;
 --green-300: #789C3E;
 --green-400: #1A4027;
 --green-500: #02391A;
 --green-600: #12291C;

 --gray-600: #3A3A3A;

 --orange-400: #F16C22;

 --bg-primary-100: var(--green-100);
 --bg-secondary-400: var(--green-400);
 --bg-secondary-500: var(--green-500);
 --bg-secondary-600: var(--green-600);

 --text-primary: var(--gray-600);
 --text-secondary: var(--green-100);
 --text-terciary: var(--green-500);
 --text-muted: var(--green-300);
 --text-highlight: var(--orange-400);

/* Font-Family */

  --base-font-size-desktop: 16px;
  --base-font-size-mobile: 14px;

  --font-family-main: "Poppins", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-default: 0;

  --line-height-display: 120%;
  --line-height-heading: 120%;
  --line-height-body: 150%;
  --line-height-caption: 120%;

  --font-size-display-md: 4rem;

  --font-size-heading-xxl: 2.5rem;
  --font-size-heading-xl: 2.25rem;
  --font-size-heading-lg: 1.5rem;
  --font-size-heading-md: 1.25rem;

  --font-size-body-md: 1rem;
  --font-size-body-sm: 0.875rem;

  --font-size-caption-md: 0.875rem;
  --font-size-caption-sm: 0.75rem;

  --text-transform-uppercase: uppercase;

  --padding-24: 24px;
  --padding-40: 40px;
  --padding-88: 88px 0;
  --padding-160: 160px 0;

  --gap-16: 16px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-40: 40px;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(var(--base-font-size-mobile), 2vw, var(--base-font-size-desktop)) !important;
}

.heading-xxl {
 font-family: "Herokid Bold", sans-serif;
 font-weight: var(--font-weight-bold);
 font-size: var(--font-size-heading-xxl);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
 color: var(--green-500);
}

.heading-xl {
 font-family: "Herokid Bold", sans-serif;
 font-weight: var(--font-weight-bold);
 font-size: var(--font-size-heading-xl);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
 color: var(--green-500);
}

.heading-lg {
 font-family: var(--font-family-main);
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size-heading-lg);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
 text-transform: var(--text-transform-uppercase);
}

.heading-md {
 font-family: var(--font-family-main);
 font-weight: var(--font-weight-regular);
 font-size: var(--font-size-heading-md);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.body-md {
 font-family: var(--font-family-main);
 font-weight: var(--font-weight-regular);
 font-size: var(--font-size-body-md);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

.text-primary {
 color: var(--text-primary) !important;
}

.text-secondary {
 color: var(--text-secondary) !important;
}

.text-terciary {
 color: var(--text-terciary);
}

.text-muted {
 color: var(--text-muted) !important;
 font-family: 'Herokid ExtraBold';
 font-size: 1.75rem;
 text-transform: uppercase;
}

.text-highlight {
 color: var(--text-highlight) !important;
 font-family: 'Herokid ExtraBold';
 font-size: 1.75rem;
 text-transform: uppercase;
}

.text-muted, .text-highlight {
 line-height: 120%;
}

.text-link {
 text-decoration: underline;
}

a.text-link:hover {
 color: var(--text-secondary)!important;
}

.bg-primary-100 {
 background-color: var(--bg-primary-100) !important;
}

.bg-secondary-400 {
 background-color: var(--bg-secondary-400) !important;
}

.bg-secondary-500 {
 background-color: var(--bg-secondary-500) !important;
}

.bg-secondary-600 {
 background-color: var(--bg-secondary-600);
}

nav.navbar.secondary {
 padding: var(--padding-24);
 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
 z-index: 1;
}

nav.navbar.secondary ul > li {
 list-style: none;
 padding: 0;
}

.navbar-light .navbar-toggler-icon {
 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-light .navbar-nav .nav-link {
 color: var(--gray-600);
 font-weight: var(--font-weight-semibold);
 padding: 0;
}

.navbar-light .navbar-toggler {
 border: none;
}

.navbar-brand {
 padding: 0;
}

.flex-1 > span {
 min-width: 140px;
}

a, a:hover, a:active, a:focus {
 color: var(--color-gray-600);
}

section {
 padding: var(--padding-88);
}

section#trilha {
 background-image:url(https://www.ucs.br/site/midia/arquivos/bg-texture-green-600.svg);
 background-position: center;
 background-size: cover;
}

section#guias {
 background-image:url(https://www.ucs.br/site/midia/arquivos/bg-textura.svg);
 background-position: center;
 background-size: cover;
}

.card {
 position: relative;
 border-radius: 24px;
 padding: var(--padding-40);
 background-color: var(--green-200);
 border: none;
 z-index: 1;
}

.container-cards.guides > a.card {
 padding: 24px;
}

.container-cards > a.card {
 text-decoration: none;
 transition: .3s;
}

.container-cards > a.card:hover {
 transform: scale(1.05);
 transition: .3s;
}

.card.card-image-1 {
 background-image: 
 linear-gradient(180deg,rgba(18, 41, 28, 0) 0%, rgba(9, 12, 10, 1) 100%),
    url(https://www.ucs.br/site/midia/arquivos/ucs-zoo-trilhas-ecologicas_2.webp);
 background-position: center;
 background-size: cover;
 min-height: 320px;
}

.card.card-image-2 {
 background-image: 
 linear-gradient(180deg,rgba(18, 41, 28, 0) 0%, rgba(9, 12, 10, 1) 100%),
    url(https://www.ucs.br/site/midia/arquivos/museu-trilhas-ecologicas.webp);
 background-position: center;
 background-size: cover;
 min-height: 320px;
}

.modal {
  display: none; /* começa escondido */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-content {
 max-width: 800px;
 border: none;
 max-height: 90vh;
 overflow-y: auto; 
 background-color: var(--bg-primary-100);
 padding: 40px;
 margin: 0 2rem;
 border-radius: 24px;
}

.close {
 cursor: pointer;
 display: flex;
 font-size: 1.5rem;
 font-weight: 700;
 line-height: 1;
 color: var(--gray-600);
 text-shadow: 0 1px 0 #fff;
 opacity: .5;
 justify-content: end;
 position: relative;
 top: -1.5rem;
 left: 1rem;
}

footer {
 padding: var(--padding-160);
}

h1,
h2,
h3,
h4,
p {
 margin: 0;
}

.block {
 display: block;
}

/* Utilities */

.flex {
 display: flex;
}

.flex-1 {
 flex: 1;
}

.flex-col {
 flex-direction: column;
}

.grid {
 display: grid;
}

.grid-7 {
 grid-template-columns: repeat(7, 1fr);
}

.absolute {
 position: absolute;
}

.relative {
 position: relative;
}

.-bottom-7 {
 bottom: -7rem;
}

.-top-2 {
 top: -2rem;
}

.top-9 {
 top: 9rem;
}

.left-3 {
 left: 3rem;
}

.left-0 {
 left: 0;
}

.right-0 {
 right: 0;
}

.bottom-0 {
 bottom: 0;
}

.gap-8 {
 gap: 8px;
}

.gap-16 {
 gap: 16px;
}

.gap-24 {
 gap: 24px;
}

.gap-32 {
 gap: 32px;
}

.gap-40 {
 gap: 40px;
}

.m-auto {
 margin: 0 auto;
}

.max-w-140 {
 max-width: 140px;
}

.max-w-150 {
 max-width: 150px;
}

.max-w-160 {
 max-width: 160px;
}

.max-w-180 {
 max-width: 180px;
}

.max-w-200 {
 max-width: 200px;
}

.max-w-240 {
 max-width: 240px;
}

.max-w-400 {
 max-width: 400px;
}

.max-w-700 {
 max-width: 700px;
}

.max-w-1000 {
 max-width: 1000px;
}

.min-h-300 {
 min-height: 300px;
}

.min-h-400 {
 min-height: 400px;
}

.content-center {
 align-content: center;
}

.items-center {
 align-items: center;
}

.items-end {
 align-items: end;
}

.justify-end {
 justify-content: end;
}

.justify-center {
 justify-content: center;
}

.space-between {
 justify-content: space-between;
}

.space-evenly {
 justify-content: space-evenly;
}

.text-end {
 text-align: end;
}

.z-index-1 {
 z-index: 1;
}

@font-face {
  font-family: 'Herokid Bold';
  font-style: normal;
  font-weight: bold;
  src: local('HerokidBold'),
    url('/site/midia/arquivos/herokid-bold.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Herokid ExtraBold';
  font-style: normal;
  font-weight: bold;
  src: local('Herokid ExtraBold'),
    url('/site/midia/arquivos/herokid-extrabold.otf') format('opentype');
  font-display: swap;
}

@media (max-width: 576px) {
 .sm-grid-2 {
  grid-template-columns: repeat(2, 1fr) !important;
 }
 .heading-xxl {
  font-size: 2rem !important;
 }
 .heading-xl {
  font-size: 1.75rem !important;
 }
 .heading-lg {
  font-size: 1.25rem !important;
 }
 .container-cards > a {
  padding: 24px;
 }
}

@media (min-width: 0) and (max-width: 992px) {
 .lg-flex-col {
  flex-direction: column;
 }

 .lg-hidden {
  display: none;
 }

 .lg-min-h-200 {
  min-height: 200px;
 }

 .lg-grid-3 {
  grid-template-columns: repeat(3, 1fr);
 }

 .grid > :last-child:nth-child(3n + 1) {
  grid-column: 2 / 3; /* coloca no meio */
 }
 .lg-top-2 {
  top: 2rem;
 }
 .lg-top-4 {
  top: 4rem;
 }
 .lg-flex-start {
  justify-content: flex-start;
 }
 .lg-max-w-130 {
  max-width: 130px;
 }
 .lg-max-w-160 {
  max-width: 160px;
 }
 .lg-max-w-200 {
  max-width: 200px;
 }
 .lg-max-w-300 {
  max-width: 300px;
 }
 section#trilha {
  padding-bottom: 10rem;
 }
 .xl-mt-16 {
  margin-top: 16px;
 }
 .flex-1 > span {
  min-width: 60px;
 }
 .container-cards > a {
  padding: 24px;
 }
}

@media (min-width: 993px) and (max-width: 1199px) {
 .xl-hidden {
  display: none;
 }
 .xl-gap-24 {
  gap: 24px;
 }
 .xl-mt-16 {
  margin-top: 16px;
 }
 .flex-1 > span {
  min-width: 60px;
 }
 .container-cards > a {
  padding: 24px;
 }
 section#trilha {
  padding-bottom: 10rem;
 }
}

@media (min-width: 1200px) {
 .xl-flex-col {
  flex-direction: column;
 }
}