:root {
  --exp-petroleo: #092f36;
  --exp-petroleo-2: #0d4248;
  --exp-menta: #b9e6cf;
  --exp-lima: #d9f06a;
  --exp-coral: #f27b5f;
  --exp-creme: #f3efe4;
  --exp-papel: #fffdf7;
  --exp-tinta: #142d2f;
  --exp-suave: #627170;
  --exp-linha: rgba(20, 45, 47, 0.18);
  --exp-serif: Georgia, "Times New Roman", serif;
  --exp-sans: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--exp-creme); color: var(--exp-tinta); font-family: var(--exp-sans); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--exp-coral); outline-offset: 4px; }
.exp-pular { position: fixed; z-index: 100; top: 10px; left: -999px; padding: 10px 16px; background: var(--exp-papel); color: var(--exp-tinta); border-radius: 999px; }
.exp-pular:focus { left: 10px; }

.exp-topo {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; min-height: 96px; padding: 0 clamp(20px, 5vw, 72px); color: #fff;
}
.exp-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.exp-marca strong, .exp-marca small { display: block; }
.exp-marca strong { font-family: var(--exp-serif); font-size: 1.12rem; letter-spacing: -0.02em; }
.exp-marca small { margin-top: 2px; opacity: .68; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.exp-simbolo { position: relative; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; overflow: hidden; }
.exp-simbolo i { position: absolute; left: -3px; width: 46px; height: 10px; border-top: 1.5px solid #fff; border-radius: 50%; }
.exp-simbolo i:nth-child(1) { top: 11px; }
.exp-simbolo i:nth-child(2) { top: 18px; left: 2px; }
.exp-simbolo i:nth-child(3) { top: 25px; left: -8px; }
.exp-menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); }
.exp-menu a { text-decoration: none; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.exp-menu a:not(.exp-menu-acao) { opacity: .78; }
.exp-menu a:hover { opacity: 1; }
.exp-menu-acao { padding: 11px 18px; border: 1px solid rgba(255,255,255,.48); border-radius: 999px; }

.exp-hero { position: relative; min-height: min(900px, 100svh); padding: 150px clamp(20px, 6vw, 88px) 90px; background: var(--exp-petroleo); color: #fff; overflow: hidden; display: grid; grid-template-columns: minmax(300px, .88fr) minmax(420px, 1.12fr); align-items: center; gap: 6vw; }
.exp-hero::before { content: ""; position: absolute; width: 720px; height: 720px; top: -390px; left: 16%; border: 1px solid rgba(185,230,207,.22); border-radius: 50%; box-shadow: 0 0 0 110px rgba(185,230,207,.035), 0 0 0 220px rgba(185,230,207,.025); }
.exp-hero::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -68px; height: 125px; background: var(--exp-creme); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.exp-hero-conteudo, .exp-hero-galeria { position: relative; z-index: 2; }
.exp-sobretitulo { margin: 0 0 25px; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.exp-hero h1 { max-width: 730px; margin: 0; font-family: var(--exp-serif); font-size: clamp(3.5rem, 6.4vw, 7.2rem); font-weight: 400; line-height: .89; letter-spacing: -.065em; }
.exp-hero h1 em { display: block; color: var(--exp-lima); font-weight: 400; }
.exp-intro { max-width: 560px; margin: 32px 0 0; color: rgba(255,255,255,.72); font-family: var(--exp-serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; }
.exp-acoes { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.exp-botao { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 15px 22px; border-radius: 3px; text-decoration: none; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.exp-botao:hover { transform: translateY(-3px); }
.exp-botao-claro { background: var(--exp-papel); color: var(--exp-petroleo); }
.exp-botao-claro span { color: var(--exp-coral); font-size: 1.2rem; }
.exp-link { color: rgba(255,255,255,.8); font-size: .78rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 7px; text-transform: uppercase; letter-spacing: .09em; }
.exp-hero-galeria { min-height: 570px; }
.exp-foto { position: absolute; display: block; overflow: hidden; text-decoration: none; background: var(--exp-petroleo-2); box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.exp-foto img { height: 100%; object-fit: cover; transition: transform .7s ease; }
.exp-foto:hover img { transform: scale(1.035); }
.exp-foto::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(3,26,30,.82)); }
.exp-foto-principal { top: 0; right: 3%; width: min(80%, 560px); height: 470px; }
.exp-foto-secundaria { bottom: 0; left: 0; width: 43%; height: 275px; border: 8px solid var(--exp-petroleo); }
.exp-legenda { position: absolute; z-index: 2; left: 24px; bottom: 22px; }
.exp-legenda b, .exp-legenda i { display: block; }
.exp-legenda b { font-family: var(--exp-serif); font-size: 1.35rem; }
.exp-legenda i { margin-top: 3px; font-size: .72rem; opacity: .72; }
.exp-selo { position: absolute; z-index: 4; right: -15px; bottom: 38px; width: 148px; height: 148px; display: grid; place-content: center; text-align: center; background: var(--exp-lima); color: var(--exp-petroleo); border-radius: 50%; transform: rotate(6deg); }
.exp-selo strong { font-family: var(--exp-serif); font-size: 3rem; line-height: .8; }
.exp-selo span { margin-top: 9px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.exp-rolar { position: absolute; z-index: 3; left: clamp(20px, 6vw, 88px); bottom: 40px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.55); font-size: .68rem; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.exp-rolar span { width: 36px; height: 1px; background: var(--exp-lima); }

.exp-descobrir { padding: 140px clamp(20px, 6vw, 88px) 120px; }
.exp-titulo-secao { display: grid; grid-template-columns: 180px minmax(300px, 710px) 1fr; align-items: end; gap: 28px; margin-bottom: 60px; }
.exp-titulo-secao > p { align-self: start; margin: 10px 0 0; color: var(--exp-suave); font-size: .67rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.exp-titulo-secao h2 { margin: 0; font-family: var(--exp-serif); font-size: clamp(2.6rem, 5vw, 5rem); font-weight: 400; line-height: 1; letter-spacing: -.05em; }
.exp-titulo-secao > a { justify-self: end; margin-bottom: 10px; font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; text-underline-offset: 6px; }
.exp-grade-especies { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.5vw, 36px); align-items: start; }
.exp-card { grid-column: span 4; color: inherit; text-decoration: none; }
.exp-card:nth-child(2), .exp-card:nth-child(5) { margin-top: 75px; }
.exp-card-destaque { grid-column: span 5; }
.exp-card:nth-child(4) { grid-column: span 5; }
.exp-card-imagem { position: relative; overflow: hidden; background: #d9ddcf; aspect-ratio: 4/3; }
.exp-card-destaque .exp-card-imagem { aspect-ratio: 5/6; }
.exp-card:nth-child(4) .exp-card-imagem { aspect-ratio: 16/11; }
.exp-card img { height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .6s ease, filter .3s ease; }
.exp-card:hover img { transform: scale(1.035); filter: saturate(1.08); }
.exp-card-seta { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--exp-papel); border-radius: 50%; opacity: 0; transform: translateY(6px); transition: .25s ease; }
.exp-card:hover .exp-card-seta { opacity: 1; transform: none; }
.exp-card-texto { padding: 18px 2px 0; }
.exp-card-indice { color: var(--exp-suave); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.exp-card h3 { margin: 8px 0 2px; font-family: var(--exp-serif); font-size: clamp(1.6rem, 2.2vw, 2.3rem); font-weight: 400; letter-spacing: -.035em; }
.exp-card-texto p { margin: 0; color: var(--exp-suave); font-family: var(--exp-serif); font-size: .9rem; font-style: italic; }

.exp-manifesto { position: relative; display: grid; grid-template-columns: 1fr 1.35fr .9fr; min-height: 560px; gap: 5vw; align-items: center; padding: 70px clamp(20px, 6vw, 88px); background: var(--exp-coral); color: #251d18; overflow: hidden; }
.exp-manifesto-numero { align-self: start; font-family: var(--exp-serif); font-size: clamp(9rem, 20vw, 20rem); line-height: .75; letter-spacing: -.09em; opacity: .12; }
.exp-manifesto-texto { position: relative; z-index: 2; }
.exp-manifesto-texto h2 { max-width: 650px; margin: 0; font-family: var(--exp-serif); font-size: clamp(3rem, 5.2vw, 5.8rem); font-weight: 400; letter-spacing: -.055em; line-height: .95; }
.exp-manifesto-texto > p:last-child { max-width: 620px; margin: 30px 0 0; font-size: 1.05rem; line-height: 1.7; }
.exp-manifesto-foto { align-self: stretch; margin: -30px -7vw -30px 0; position: relative; transform: rotate(2.5deg); overflow: hidden; }
.exp-manifesto-foto img { height: 100%; object-fit: cover; }
.exp-manifesto-foto figcaption { position: absolute; left: 18px; bottom: 18px; padding: 8px 10px; background: rgba(255,253,247,.9); font-size: .66rem; text-transform: uppercase; }

.exp-bacias { padding: 125px clamp(20px, 6vw, 88px); background: var(--exp-petroleo); color: #fff; }
.exp-titulo-claro > p { color: var(--exp-menta); }
.exp-titulo-claro { grid-template-columns: 180px minmax(300px, 710px); }
.exp-lista-bacias { margin: 20px 0 48px 180px; border-top: 1px solid rgba(255,255,255,.22); }
.exp-lista-bacias a { display: grid; grid-template-columns: 80px 1fr auto; gap: 24px; align-items: center; min-height: 120px; border-bottom: 1px solid rgba(255,255,255,.22); text-decoration: none; transition: padding .25s ease, color .25s ease; }
.exp-lista-bacias a:hover { padding-left: 14px; color: var(--exp-lima); }
.exp-bacia-numero { color: var(--exp-menta); font-size: .68rem; letter-spacing: .12em; }
.exp-lista-bacias h3 { margin: 0; font-family: var(--exp-serif); font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; letter-spacing: -.035em; }
.exp-lista-bacias p { margin: 5px 0 0; color: rgba(255,255,255,.56); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.exp-bacia-seta { font-size: 1.7rem; }
.exp-botao-agua { margin-left: 180px; background: var(--exp-menta); color: var(--exp-petroleo); }

.exp-como { padding: 130px clamp(20px, 8vw, 130px); background: var(--exp-papel); }
.exp-como-intro { display: grid; grid-template-columns: 180px minmax(300px, 700px) 1fr; gap: 28px; align-items: end; }
.exp-como-intro .exp-sobretitulo { align-self: start; margin-top: 11px; color: var(--exp-suave); }
.exp-como-intro h2 { margin: 0; font-family: var(--exp-serif); font-size: clamp(2.8rem, 5.4vw, 5.8rem); font-weight: 400; line-height: .95; letter-spacing: -.055em; }
.exp-como-intro > p:last-child { max-width: 370px; margin: 0 0 8px; color: var(--exp-suave); line-height: 1.65; }
.exp-passos { margin: 85px 0 0 180px; padding: 0; list-style: none; border-top: 1px solid var(--exp-linha); }
.exp-passos li { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--exp-linha); }
.exp-passos li > span { color: var(--exp-coral); font-family: var(--exp-serif); font-size: 1.5rem; }
.exp-passos h3 { margin: 0 0 5px; font-family: var(--exp-serif); font-size: 1.7rem; font-weight: 400; }
.exp-passos p { margin: 0; color: var(--exp-suave); }
.exp-qr-chamada { margin: 80px 0 0 180px; padding: 34px 38px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; background: var(--exp-lima); }
.exp-qr-chamada p { margin: 0; line-height: 1.5; }
.exp-qr-ilustracao { width: 68px; height: 68px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px; border: 3px solid var(--exp-petroleo); }
.exp-qr-ilustracao span { border: 3px solid var(--exp-petroleo); }
.exp-botao-escuro { background: var(--exp-petroleo); color: #fff; }

.exp-rodape { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 40px; align-items: end; padding: 70px clamp(20px, 6vw, 88px) 44px; background: #061f24; color: #fff; }
.exp-rodape-marca strong, .exp-rodape-marca span { display: block; }
.exp-rodape-marca strong { font-family: var(--exp-serif); font-size: 2rem; }
.exp-rodape-marca span { margin-top: 8px; color: rgba(255,255,255,.5); }
.exp-rodape-links { display: flex; gap: 24px; }
.exp-rodape-links a { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.exp-rodape > p { margin: 0; color: rgba(255,255,255,.35); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 1050px) {
  .exp-hero { grid-template-columns: 1fr 1fr; }
  .exp-hero h1 { font-size: clamp(3.6rem, 7vw, 5.8rem); }
  .exp-hero-galeria { min-height: 500px; }
  .exp-foto-principal { width: 95%; height: 410px; }
  .exp-titulo-secao, .exp-como-intro { grid-template-columns: 130px 1fr; }
  .exp-titulo-secao > a, .exp-como-intro > p:last-child { grid-column: 2; justify-self: start; }
  .exp-manifesto { grid-template-columns: .7fr 1.5fr .9fr; }
  .exp-lista-bacias, .exp-botao-agua, .exp-passos, .exp-qr-chamada { margin-left: 130px; }
  .exp-rodape { grid-template-columns: 1fr 1fr; }
  .exp-rodape > p { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .exp-topo { min-height: 76px; }
  .exp-menu a:not(.exp-menu-acao) { display: none; }
  .exp-menu-acao { padding: 9px 12px; font-size: .62rem !important; }
  .exp-marca small { display: none; }
  .exp-hero { min-height: auto; padding-top: 125px; padding-bottom: 130px; grid-template-columns: 1fr; gap: 50px; }
  .exp-hero h1 { font-size: clamp(3.4rem, 15vw, 5.5rem); }
  .exp-intro { font-size: 1.08rem; }
  .exp-acoes { align-items: flex-start; flex-direction: column; gap: 20px; }
  .exp-hero-galeria { min-height: 470px; }
  .exp-foto-principal { right: 0; width: 92%; height: 390px; }
  .exp-foto-secundaria { width: 48%; height: 210px; }
  .exp-selo { width: 112px; height: 112px; right: 0; bottom: 18px; }
  .exp-selo strong { font-size: 2.35rem; }
  .exp-selo span { font-size: .53rem; }
  .exp-rolar { bottom: 65px; }
  .exp-descobrir { padding-top: 105px; }
  .exp-titulo-secao, .exp-como-intro { display: block; }
  .exp-titulo-secao > p, .exp-como-intro .exp-sobretitulo { margin: 0 0 22px; }
  .exp-titulo-secao > a { display: inline-block; margin-top: 24px; }
  .exp-grade-especies { grid-template-columns: 1fr 1fr; gap: 40px 14px; }
  .exp-card, .exp-card-destaque, .exp-card:nth-child(4) { grid-column: auto; margin: 0; }
  .exp-card-destaque .exp-card-imagem, .exp-card:nth-child(4) .exp-card-imagem { aspect-ratio: 4/3; }
  .exp-card:nth-child(even) { margin-top: 55px; }
  .exp-card h3 { font-size: 1.5rem; }
  .exp-manifesto { grid-template-columns: 1fr; padding-top: 95px; padding-bottom: 0; }
  .exp-manifesto-numero { position: absolute; top: 40px; left: -10px; }
  .exp-manifesto-texto { padding-bottom: 35px; }
  .exp-manifesto-foto { height: 380px; margin: 0 -20px; transform: none; }
  .exp-bacias { padding-top: 100px; padding-bottom: 100px; }
  .exp-lista-bacias { margin-left: 0; }
  .exp-lista-bacias a { grid-template-columns: 42px 1fr auto; min-height: 100px; gap: 12px; }
  .exp-botao-agua { margin-left: 0; }
  .exp-como { padding-top: 100px; padding-bottom: 90px; }
  .exp-como-intro > p:last-child { margin-top: 24px; }
  .exp-passos, .exp-qr-chamada { margin-left: 0; }
  .exp-passos { margin-top: 55px; }
  .exp-passos li { grid-template-columns: 55px 1fr; gap: 10px; }
  .exp-qr-chamada { grid-template-columns: auto 1fr; padding: 24px; }
  .exp-qr-chamada .exp-botao { grid-column: 1 / -1; }
  .exp-rodape { grid-template-columns: 1fr; align-items: start; }
  .exp-rodape-links { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .exp-marca strong { font-size: .92rem; }
  .exp-menu-acao { max-width: 122px; text-align: center; }
  .exp-hero-galeria { min-height: 420px; }
  .exp-foto-principal { height: 340px; }
  .exp-foto-secundaria { height: 180px; }
  .exp-grade-especies { grid-template-columns: 1fr; }
  .exp-card:nth-child(even) { margin-top: 0; }
  .exp-card h3 { font-size: 1.85rem; }
  .exp-manifesto-foto { height: 330px; }
  .exp-qr-chamada { grid-template-columns: 1fr; }
  .exp-qr-ilustracao { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}