/* ==========================================================
   CHAPADA-DIAMANTINA.CSS
   VIVA PIATÃ
========================================================== */


/* ==========================================================
   RESET LOCAL
========================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: #24322d;
  background: #f7f7f3;
  line-height: 1.75;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

section {
  position: relative;
}


/* ==========================================================
   VARIÁVEIS
========================================================== */

:root {

  --cor-primaria: #0f5b43;
  --cor-secundaria: #3b7d58;
  --cor-destaque: #b98b3b;

  --cor-texto: #24322d;
  --cor-texto-claro: #f5f5f5;

  --cor-fundo: #f7f7f3;
  --cor-card: #ffffff;

  --cor-borda: rgba(0, 0, 0, .08);

  --sombra-suave:
    0 12px 32px rgba(0, 0, 0, .08);

  --sombra-hover:
    0 24px 50px rgba(0, 0, 0, .12);

  --raio: 18px;

  --largura: 1240px;

}


/* ==========================================================
   CONTAINER
========================================================== */

.container {

  width: min(92%, var(--largura));
  margin: 0 auto;

}


/* ==========================================================
   TIPOGRAFIA GLOBAL
========================================================== */

.secao-kicker {

  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 18px;

  color: var(--cor-destaque);

  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;

}

.secao-kicker::before {

  content: "";

  width: 42px;
  height: 2px;

  background: var(--cor-destaque);

}

.secao-cabecalho {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.secao-cabecalho h2 {

  margin: 0 0 24px;

  font-size: clamp(2rem, 4vw, 3.2rem);

  line-height: 1.15;

  color: var(--cor-primaria);

}

.secao-cabecalho p {

  margin: 0;

  color: #5b655f;

  font-size: 1.08rem;

}


/* ==========================================================
   BOTÕES
========================================================== */

.btn {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 32px;

  border-radius: 999px;

  font-weight: 600;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;

}

.btn:hover {

  transform: translateY(-3px);

}

.btn-primario {

  color: #fff;

  background: var(--cor-primaria);

  box-shadow: var(--sombra-suave);

}

.btn-primario:hover {

  background: #0b4b37;

}

.btn-secundario {

  color: #fff;

  border: 2px solid rgba(255, 255, 255, .45);

  background: rgba(255, 255, 255, .08);

  backdrop-filter: blur(12px);

}

.btn-secundario:hover {

  background: rgba(255, 255, 255, .18);

}


/* ==========================================================
   HERO
========================================================== */

#hero-chapada {

  position: relative;

  display: flex;
  align-items: center;

  min-height: 100vh;

  overflow: hidden;

}

.hero-imagem {

  position: absolute;
  inset: 0;

}

.hero-imagem img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.04);

}

.hero-overlay {

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(5, 23, 16, .86) 0%,
      rgba(10, 47, 33, .72) 38%,
      rgba(10, 47, 33, .45) 70%,
      rgba(10, 47, 33, .30) 100%
    );

}

.hero-conteudo {

  position: relative;
  z-index: 5;

  max-width: 760px;

  color: #fff;

  padding: 170px 0 120px;

}

.breadcrumb {

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 36px;

  font-size: .92rem;

  color: rgba(255, 255, 255, .78);

}

.breadcrumb a {

  transition: opacity .25s;

}

.breadcrumb a:hover {

  opacity: .7;

}

.hero-kicker {

  display: inline-block;

  margin-bottom: 20px;

  padding: 8px 18px;

  border: 1px solid rgba(255,255,255,.20);

  border-radius: 999px;

  background: rgba(255,255,255,.08);

  backdrop-filter: blur(10px);

  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;

}

.hero-conteudo h1 {

  margin: 0 0 24px;

  font-size: clamp(3.2rem, 7vw, 5.8rem);

  line-height: .95;

  font-weight: 800;

}

.hero-subtitulo {

  max-width: 700px;

  margin-bottom: 42px;

  color: rgba(255,255,255,.92);

  font-size: 1.25rem;

}

.hero-acoes {

  display: flex;
  flex-wrap: wrap;
  gap: 18px;

}


/* ==========================================================
   INTRODUÇÃO
========================================================== */

#introducao {

  padding: 120px 0;

  background: #fff;

}

.introducao-grid {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 70px;

  align-items: start;

}

.introducao-texto h2 {

  margin: 0 0 28px;

  color: var(--cor-primaria);

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.15;

}

.introducao-texto p {

  margin: 0 0 24px;

  color: #59645d;

  font-size: 1.08rem;

}

.painel-destaques {

  display: flex;
  flex-direction: column;
  gap: 22px;

}

.destaque {

  padding: 28px;

  border-radius: var(--raio);

  background: var(--cor-card);

  border: 1px solid var(--cor-borda);

  box-shadow: var(--sombra-suave);

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}

.destaque:hover {

  transform: translateY(-8px);

  box-shadow: var(--sombra-hover);

}

.destaque h3 {

  margin: 0 0 14px;

  color: var(--cor-primaria);

  font-size: 1.15rem;

}

.destaque p {

  margin: 0;

  color: #5b655f;

}

/* ==========================================================
   O TERRITÓRIO
========================================================== */

#territorio {

  padding: 120px 0;

  background:
    linear-gradient(
      180deg,
      #f7f7f3 0%,
      #eef2eb 100%
    );

}

.territorio-grid {

  display: grid;

  grid-template-columns: 1.15fr 1fr;

  gap: 70px;

  align-items: center;

}

.territorio-imagem {

  position: relative;

  overflow: hidden;

  border-radius: 24px;

  box-shadow: var(--sombra-hover);

}

.territorio-imagem img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .8s ease;

}

.territorio-imagem:hover img {

  transform: scale(1.06);

}

.territorio-conteudo h3 {

  margin: 0 0 26px;

  color: var(--cor-primaria);

  font-size: 2rem;

  line-height: 1.2;

}

.territorio-conteudo p {

  margin: 0 0 22px;

  color: #5b655f;

  font-size: 1.08rem;

}


/* ==========================================================
   PAISAGENS
========================================================== */

#paisagens {

  padding: 120px 0;

  background: #ffffff;

}

.cards-paisagens {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 34px;

}

.card-paisagem {

  overflow: hidden;

  border-radius: 22px;

  background: #fff;

  border: 1px solid var(--cor-borda);

  box-shadow: var(--sombra-suave);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.card-paisagem:hover {

  transform: translateY(-10px);

  box-shadow: var(--sombra-hover);

}

.card-paisagem img {

  width: 100%;

  height: 260px;

  object-fit: cover;

  transition: transform .7s ease;

}

.card-paisagem:hover img {

  transform: scale(1.08);

}

.card-conteudo {

  padding: 30px;

}

.card-conteudo h3 {

  margin: 0 0 16px;

  color: var(--cor-primaria);

  font-size: 1.35rem;

}

.card-conteudo p {

  margin: 0;

  color: #5f6962;

  font-size: 1rem;

}


/* ==========================================================
   NÚMEROS
========================================================== */

#territorio-numeros {

  padding: 120px 0;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4f7f2 100%
    );

}

.numeros-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 26px;

}

.numero-card {

  position: relative;

  padding: 42px 32px;

  overflow: hidden;

  border-radius: 20px;

  background: #fff;

  border: 1px solid rgba(15, 91, 67, .08);

  box-shadow: var(--sombra-suave);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.numero-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background: linear-gradient(
    90deg,
    var(--cor-primaria),
    var(--cor-destaque)
  );

}

.numero-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--sombra-hover);

}

.numero {

  display: block;

  margin-bottom: 20px;

  color: var(--cor-destaque);

  font-size: 2.35rem;

  font-weight: 800;

  line-height: 1;

}

.numero-card h3 {

  margin: 0 0 16px;

  color: var(--cor-primaria);

  font-size: 1.18rem;

}

.numero-card p {

  margin: 0;

  color: #616b65;

}


/* ==========================================================
   ANIMAÇÕES
========================================================== */

.card-paisagem,
.numero-card,
.territorio-imagem,
.destaque {

  will-change: transform;

}

.card-paisagem img,
.territorio-imagem img {

  will-change: transform;

}

/* ==========================================================
   HISTÓRIA E CULTURA
========================================================== */

#historia-cultura {

  padding: 120px 0;

  background: #ffffff;

}

.historia-grid {

  display: grid;

  grid-template-columns: 1.1fr 1fr;

  gap: 70px;

  align-items: center;

}

.historia-imagem {

  overflow: hidden;

  border-radius: 24px;

  box-shadow: var(--sombra-hover);

}

.historia-imagem img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .8s ease;

}

.historia-imagem:hover img {

  transform: scale(1.06);

}

.historia-conteudo h3 {

  margin: 0 0 24px;

  color: var(--cor-primaria);

  font-size: 2rem;

  line-height: 1.2;

}

.historia-conteudo p {

  margin: 0 0 22px;

  color: #5b655f;

  font-size: 1.08rem;

}


/* ==========================================================
   POVOS ORIGINÁRIOS
========================================================== */

#povos-originarios {

  padding: 120px 0;

  background:
    linear-gradient(
      180deg,
      #f7f7f3 0%,
      #eef2eb 100%
    );

}

.povos-grid {

  display: grid;

  grid-template-columns: 1fr 1.1fr;

  gap: 70px;

  align-items: center;

}

.povos-conteudo h2 {

  margin: 0 0 28px;

  color: var(--cor-primaria);

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.15;

}

.povos-conteudo p {

  margin: 0 0 22px;

  color: #5c6660;

  font-size: 1.08rem;

}

.povos-imagem {

  overflow: hidden;

  border-radius: 24px;

  box-shadow: var(--sombra-hover);

}

.povos-imagem img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .8s ease;

}

.povos-imagem:hover img {

  transform: scale(1.06);

}


/* ==========================================================
   CULTURA VIVA
========================================================== */

#cultura-viva {

  padding: 120px 0;

  background: #ffffff;

}

.cards-cultura {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

}

.card-cultura {

  position: relative;

  padding: 38px;

  overflow: hidden;

  border-radius: 22px;

  background: #ffffff;

  border: 1px solid var(--cor-borda);

  box-shadow: var(--sombra-suave);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.card-cultura::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 5px;
  height: 100%;

  background: var(--cor-destaque);

}

.card-cultura:hover {

  transform: translateY(-8px);

  box-shadow: var(--sombra-hover);

}

.card-cultura h3 {

  margin: 0 0 18px;

  color: var(--cor-primaria);

  font-size: 1.45rem;

}

.card-cultura p {

  margin: 0;

  color: #5f6962;

  line-height: 1.8;

}


/* ==========================================================
   ELEMENTOS COMPARTILHADOS
========================================================== */

.historia-imagem,
.povos-imagem,
.card-cultura {

  will-change: transform;

}

.historia-imagem img,
.povos-imagem img {

  will-change: transform;

}

/* ==========================================================
   ECOTURISMO
========================================================== */

#ecoturismo {

  padding: 120px 0;

  background:
    linear-gradient(
      180deg,
      #eef2eb 0%,
      #f8f9f6 100%
    );

}

#ecoturismo .secao-cabecalho {

  margin-bottom: 70px;

}

.cards-ecoturismo {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

}

.card-eco {

  position: relative;

  padding: 38px 34px;

  overflow: hidden;

  border-radius: 22px;

  background: #ffffff;

  border: 1px solid rgba(15, 91, 67, .08);

  box-shadow: var(--sombra-suave);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}

.card-eco::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 6px;

  background:
    linear-gradient(
      90deg,
      var(--cor-primaria),
      var(--cor-destaque)
    );

}

.card-eco:hover {

  transform: translateY(-10px);

  border-color: rgba(15, 91, 67, .18);

  box-shadow: var(--sombra-hover);

}

.card-eco h3 {

  margin: 0 0 18px;

  color: var(--cor-primaria);

  font-size: 1.35rem;

  line-height: 1.3;

}

.card-eco p {

  margin: 0;

  color: #5b655f;

  font-size: 1rem;

  line-height: 1.8;

}


/* ==========================================================
   MICROINTERAÇÕES
========================================================== */

.card-eco,
.card-cultura {

  cursor: default;

}

.card-eco:hover h3,
.card-cultura:hover h3 {

  color: var(--cor-destaque);

}

.card-eco,
.card-cultura,
.numero-card,
.card-paisagem,
.destaque {

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;

}


/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform:
      translateY(30px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

.secao-cabecalho {

  animation: fadeUp .8s ease both;

}

.card-paisagem {

  animation: fadeUp .8s ease both;

}

.numero-card {

  animation: fadeUp .9s ease both;

}

.card-cultura {

  animation: fadeUp 1s ease both;

}

.card-eco {

  animation: fadeUp 1.1s ease both;

}

.historia-imagem,
.povos-imagem,
.territorio-imagem {

  animation: fadeUp .9s ease both;

}


/* ==========================================================
   SELEÇÃO DE TEXTO
========================================================== */

::selection {

  color: #ffffff;

  background: var(--cor-primaria);

}

::-moz-selection {

  color: #ffffff;

  background: var(--cor-primaria);

}

/* ==========================================================
   CONSERVAÇÃO
========================================================== */

#conservacao {

  padding: 120px 0;

  background: #ffffff;

}

.conservacao-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;

}

.conservacao-texto h3 {

  margin: 0 0 24px;

  color: var(--cor-primaria);

  font-size: 2rem;

  line-height: 1.2;

}

.conservacao-texto p {

  margin: 0 0 24px;

  color: #5b655f;

  font-size: 1.08rem;

}

.conservacao-texto .btn {

  margin-top: 12px;

}

.conservacao-imagem {

  overflow: hidden;

  border-radius: 24px;

  box-shadow: var(--sombra-hover);

}

.conservacao-imagem img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .8s ease;

}

.conservacao-imagem:hover img {

  transform: scale(1.06);

}


/* ==========================================================
   CTA PIATÃ
========================================================== */

#descubra-piata {

  padding: 120px 0;

  background:
    linear-gradient(
      135deg,
      var(--cor-primaria) 0%,
      #174f3c 100%
    );

}

.cta-territorio {

  padding: 80px;

  border-radius: 28px;

  text-align: center;

  color: #ffffff;

  background:
    rgba(255,255,255,.05);

  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(8px);

}

.cta-territorio .secao-kicker {

  color: rgba(255,255,255,.85);

}

.cta-territorio .secao-kicker::before {

  background: rgba(255,255,255,.70);

}

.cta-territorio h2 {

  margin: 0 0 28px;

  font-size: clamp(2.2rem, 4vw, 3.5rem);

  line-height: 1.15;

}

.cta-territorio p {

  max-width: 760px;

  margin: 0 auto 40px;

  color: rgba(255,255,255,.88);

  font-size: 1.12rem;

}

.cta-botoes {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 18px;

}


/* ==========================================================
   BANNER UVT
========================================================== */

#banner-uvt {

  padding: 120px 0;

  background: #f7f7f3;

}

.uvt-banner {

  display: grid;

  grid-template-columns: 1.1fr .9fr;

  gap: 70px;

  align-items: center;

  padding: 70px;

  border-radius: 28px;

  background: #ffffff;

  border: 1px solid var(--cor-borda);

  box-shadow: var(--sombra-suave);

}

.uvt-texto h2 {

  margin: 0 0 24px;

  color: var(--cor-primaria);

  font-size: clamp(2rem, 4vw, 3rem);

}

.uvt-texto p {

  margin: 0 0 32px;

  color: #5b655f;

  font-size: 1.08rem;

}

.uvt-imagem {

  display: flex;

  justify-content: center;

  align-items: center;

}

.uvt-imagem img {

  max-width: 100%;

}


/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width: 1100px) {

  .introducao-grid,
  .territorio-grid,
  .historia-grid,
  .povos-grid,
  .conservacao-grid,
  .uvt-banner {

    grid-template-columns: 1fr;

    gap: 50px;

  }

  .cards-paisagens,
  .cards-cultura,
  .cards-ecoturismo,
  .numeros-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 768px) {

  #hero-chapada {

    min-height: 85vh;

  }

  .hero-conteudo {

    padding: 140px 0 80px;

  }

  .hero-conteudo h1 {

    font-size: 3rem;

  }

  .hero-subtitulo {

    font-size: 1.05rem;

  }

  .hero-acoes,
  .cta-botoes {

    flex-direction: column;

    align-items: stretch;

  }

  .cards-paisagens,
  .cards-cultura,
  .cards-ecoturismo,
  .numeros-grid {

    grid-template-columns: 1fr;

  }

  .cta-territorio,
  .uvt-banner {

    padding: 40px 30px;

  }

  #introducao,
  #territorio,
  #paisagens,
  #territorio-numeros,
  #historia-cultura,
  #povos-originarios,
  #cultura-viva,
  #ecoturismo,
  #conservacao,
  #descubra-piata,
  #banner-uvt {

    padding: 90px 0;

  }

}

@media (max-width: 480px) {

  .container {

    width: 94%;

  }

  .hero-kicker {

    font-size: .72rem;

    letter-spacing: .08em;

  }

  .hero-conteudo h1 {

    font-size: 2.5rem;

  }

  .secao-cabecalho h2 {

    font-size: 2rem;

  }

  .card-paisagem img {

    height: 220px;

  }

  .numero {

    font-size: 2rem;

  }

  .btn {

    width: 100%;

  }

}