/* =====================================================================
   BIOMAS · página inicial
   Montagem escura com transição entre biomas + seções em papel claro.
   ===================================================================== */
:root {
  --papel: #f3efe4;
  --papel2: #ebe5d5;
  --tinta: #24211c;
  --tinta-suave: #6b665b;
  --linha-clara: #f4efe2;
  --sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --tempo: 7s;           /* duração de cada bioma na montagem */
  --troca: 1.6s;         /* duração da transição */
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: .6rem 1rem; border-radius: 10px; }
.pular:focus { left: 8px; }
:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
.sobretitulo { text-transform: uppercase; letter-spacing: .24em; font-size: .74rem; font-weight: 700; color: var(--tinta-suave); margin: 0 0 .8rem; }

/* ============================ MONTAGEM ============================ */
.vitrine {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  color: var(--linha-clara); background: #0d1310; isolation: isolate;
}
.vitrine-topo {
  position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top)) var(--gutter) 18px;
  background: linear-gradient(#0008, transparent);
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 34px; height: 34px; filter: drop-shadow(0 2px 8px #0006); }
.marca span { display: flex; flex-direction: column; line-height: 1.1; }
.marca b { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: .01em; }
.marca small { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.nav-topo { display: flex; gap: 6px; }
.nav-topo a { text-decoration: none; font-weight: 700; font-size: .9rem; padding: .5rem .9rem; border-radius: 99px; border: 1px solid #ffffff2e; backdrop-filter: blur(6px); background: #0000001f; }
.nav-topo a:hover { background: #ffffff1f; }

.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; display: grid; align-items: end;
  background: var(--fundo-bioma);
  opacity: 0; visibility: hidden;
  transition: opacity var(--troca) ease, visibility 0s linear var(--troca);
}
.slide.ativo { opacity: 1; visibility: visible; transition: opacity var(--troca) ease, visibility 0s; z-index: 2; }
.slide.saindo { opacity: 0; visibility: visible; z-index: 1; }

/* Fundo: foto real ou campo de cor do bioma */
.slide-fundo { position: absolute; inset: 0; overflow: hidden; }
.slide-fundo::before { /* brilho na cor do bioma (sem foto é o próprio fundo) */
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(60% 55% at 72% 38%, color-mix(in srgb, var(--cor) 34%, transparent), transparent 70%),
    radial-gradient(50% 60% at 15% 85%, color-mix(in srgb, var(--cor) 18%, transparent), transparent 70%);
  animation: respirar 14s ease-in-out infinite alternate;
}
.slide-fundo::after { /* escurece a base para o texto e tinge com a cor do bioma */
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to top, var(--fundo-bioma) 4%, color-mix(in srgb, var(--fundo-bioma) 70%, transparent) 38%, transparent 75%),
    linear-gradient(to right, color-mix(in srgb, var(--fundo-bioma) 75%, transparent), transparent 60%);
}
.slide-foto {
  position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 130%; max-width: none; object-fit: cover; object-position: 50% 42%;
  filter: saturate(.85) contrast(1.05);
  transform: translateX(0) scale(1.08);
}
.slide.ativo .slide-foto, .slide.saindo .slide-foto { animation: panorama calc(var(--tempo) * 2.4) linear both; }

/* Arte em linha contínua */
.slide-arte {
  position: absolute; z-index: 3; right: clamp(-40px, 2vw, 60px); top: 50%; width: min(62vw, 980px); aspect-ratio: 10 / 7;
  transform: translateY(-52%); pointer-events: none;
  mix-blend-mode: screen; /* o papel (escuro depois de invertido) some sobre a cena */
  /* a arte se dissolve à esquerda e embaixo, deixando o título legível */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to top, transparent 0%, #000 22%); mask-composite: intersect;
}
.slide-arte .arte-img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) invert(1) contrast(2.2) brightness(.95); opacity: .95;
  clip-path: inset(0 100% 0 0); }
.slide.ativo .arte-img { animation: revelar 3.2s cubic-bezier(.6, .05, .3, 1) .5s forwards; }
.slide.saindo .arte-img { clip-path: inset(0 0 0 0); }
.arte-svg { width: 100%; height: 100%; overflow: visible; }
.arte-svg path { fill: none; stroke: var(--linha-clara); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }
.slide .arte-svg path { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cor) 55%, transparent)); }

/* Textos */
.slide-texto {
  position: relative; z-index: 5; padding: 0 var(--gutter) calc(150px + env(safe-area-inset-bottom)); max-width: 820px;
}
.slide-texto > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.slide.ativo .slide-texto > * { opacity: 1; transform: none; }
.slide.ativo .slide-texto > :nth-child(1) { transition-delay: .35s; }
.slide.ativo .slide-texto > :nth-child(2) { transition-delay: .5s; }
.slide.ativo .slide-texto > :nth-child(3) { transition-delay: .65s; }
.slide.ativo .slide-texto > :nth-child(4) { transition-delay: .8s; }
.slide-bioma { margin: 0 0 .9rem; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; opacity: .7; }
.slide-local { display: flex; align-items: center; gap: .8rem; margin: 0 0 .6rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: color-mix(in srgb, var(--cor) 55%, white); }
.slide-num { font-family: var(--serif); font-size: 1rem; letter-spacing: 0; padding-right: .8rem; border-right: 1px solid currentColor; }
.slide-nome { font-size: clamp(3rem, 10vw, 7.6rem); font-weight: 300; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 4px 40px #0007; }
.slide-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin: .5rem 0 1.6rem; opacity: .9; }

.botao {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: .8rem 1.5rem; border-radius: 99px;
  background: var(--cor); color: #fff; font-weight: 700; text-decoration: none; font-size: 1.02rem;
  box-shadow: 0 10px 34px color-mix(in srgb, var(--cor) 45%, transparent); transition: transform .2s, box-shadow .2s;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 14px 40px color-mix(in srgb, var(--cor) 60%, transparent); }
.botao span { transition: transform .2s; }
.botao:hover span { transform: translateX(4px); }
.selo-breve {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--cor) 70%, transparent); color: color-mix(in srgb, var(--cor) 40%, white);
  background: color-mix(in srgb, var(--cor) 14%, transparent); backdrop-filter: blur(4px);
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.selo-breve::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: piscar 2s ease-in-out infinite; }

/* Linha do tempo (indicadores clicáveis) */
.vitrine-controles {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 16px;
  padding: 0 var(--gutter) calc(26px + env(safe-area-inset-bottom));
}
.linha-tempo { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.linha-tempo button {
  width: 100%; border: 0; background: none; color: inherit; padding: 10px 0 4px; cursor: pointer; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 9px; opacity: .6; transition: opacity .3s;
}
.linha-tempo button:hover, .linha-tempo button[aria-current="true"] { opacity: 1; }
.barra-tempo { display: block; height: 2px; background: #ffffff38; border-radius: 2px; overflow: hidden; }
.barra-tempo i { display: block; height: 100%; width: 0; background: var(--cor); }
.linha-tempo button[aria-current="true"] .barra-tempo i { animation: encher var(--tempo) linear forwards; }
.vitrine.pausada .linha-tempo button[aria-current="true"] .barra-tempo i { animation-play-state: paused; }
.linha-tempo button.visto .barra-tempo i { width: 100%; }
.rotulo-tempo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pausar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff40; background: #0003; color: inherit; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); }
.pausar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pausar .ico-tocar { display: none; fill: currentColor; }
.vitrine.pausada .pausar .ico-pausa { display: none; }
.vitrine.pausada .pausar .ico-tocar { display: block; }

/* ============================ SEÇÕES ============================ */
.secao { padding: clamp(64px, 10vw, 120px) var(--gutter); max-width: 1320px; margin: 0 auto; }
.secao-cab { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.secao-cab h2 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); font-weight: 300; letter-spacing: -.01em; }
.secao-intro { color: var(--tinta-suave); font-size: 1.08rem; margin: 1rem 0 0; max-width: 62ch; }

.seletor-bioma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.1rem; }
.seletor-bioma span { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-right: 4px; }
.seletor-bioma a { text-decoration: none; font-weight: 700; font-size: .92rem; padding: .45rem 1rem; border-radius: 99px; border: 1px solid #d6cfbd; color: var(--tinta); }
.seletor-bioma a:hover { border-color: var(--cor); }
.seletor-bioma a[aria-current="page"] { background: var(--cor); border-color: var(--cor); color: #fff; }
.grade-biomas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.cartao-bioma {
  position: relative; border-radius: 22px; overflow: hidden; background: #fffdf8; border: 1px solid #e2dccd;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.cartao-bioma:not(.breve):hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px color-mix(in srgb, var(--cor) 70%, #000); }
.cartao-imagem { position: relative; aspect-ratio: 4 / 3; background: var(--fundo-bioma); overflow: hidden; }
.cartao-imagem::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 70% 35%, color-mix(in srgb, var(--cor) 32%, transparent), transparent 75%); }
.cartao-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.cartao-bioma:not(.breve):hover .cartao-imagem img { transform: scale(1.06); }
.cartao-imagem .arte-img { object-fit: contain; filter: grayscale(1) invert(1) contrast(2.2); mix-blend-mode: screen; padding: 8%; }
.cartao-imagem .arte-svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
.cartao-imagem .arte-svg path { stroke-width: 1.3; opacity: .85; }
.cartao-bioma.breve .cartao-imagem img { filter: saturate(.7) brightness(.62); }
.cartao-bioma.breve .cartao-imagem img + .arte-svg path { filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); opacity: .95; }
.cartao-imagem .selo-breve { position: absolute; left: 14px; top: 14px; font-size: .68rem; padding: .4rem .8rem; }
.cartao-texto { padding: 18px 22px 22px; }
.cartao-texto .cartao-local { font-family: var(--sans); font-style: normal; margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cor) 65%, var(--tinta)); }
.cartao-texto h3 { font-size: 1.75rem; font-weight: 400; }
.cartao-texto h3 a { text-decoration: none; }
.cartao-texto h3 a::after { content: ''; position: absolute; inset: 0; } /* cartão inteiro clicável */
.cartao-texto p { margin: .35rem 0 0; color: var(--tinta-suave); font-family: var(--serif); font-style: italic; }
.cartao-acao { display: inline-block; margin-top: 1rem; font-weight: 700; color: color-mix(in srgb, var(--cor) 80%, var(--tinta)); }
.cartao-bioma.breve .cartao-texto h3 { color: var(--tinta-suave); }

.sobre { border-top: 1px solid #ddd6c4; }
.como { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 32px; }
.como h3 { font-size: 1.35rem; margin: 1rem 0 .4rem; }
.como p { margin: 0; color: var(--tinta-suave); }
.como-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #cfc7b3; }
.como-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.rodape { padding: 36px var(--gutter) calc(36px + env(safe-area-inset-bottom)); border-top: 1px solid #ddd6c4; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--tinta-suave); font-size: .92rem; }
.rodape p { margin: 0; }
.rodape a { color: var(--tinta); }

/* ============================ ANIMAÇÕES ============================ */
@keyframes panorama { from { transform: translateX(0) scale(1.08); } to { transform: translateX(-23%) scale(1.08); } }
@keyframes revelar { to { clip-path: inset(0 0 0 0); } }
@keyframes encher { to { width: 100%; } }
@keyframes respirar { to { transform: translate(-3%, 2%) scale(1.06); } }
@keyframes piscar { 50% { opacity: .3; } }

/* ============================ CELULAR ============================ */
@media (max-width: 760px) {
  .nav-topo a:first-child { display: none; }
  .slide-arte { width: 112vw; right: -18vw; top: 30%; transform: translateY(-50%); opacity: .85; }
  .slide-texto { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .slide-fundo::after { background: linear-gradient(to top, var(--fundo-bioma) 12%, color-mix(in srgb, var(--fundo-bioma) 75%, transparent) 50%, color-mix(in srgb, var(--fundo-bioma) 20%, transparent) 100%); }
  .linha-tempo { gap: 6px; }
  .rotulo-tempo { display: none; }
  .linha-tempo button[aria-current="true"] .rotulo-tempo { display: none; }
}

/* ============================ MOVIMENTO REDUZIDO ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide, .slide.ativo { transition-duration: .01s; }
  .slide-foto, .slide-fundo::before, .selo-breve::before { animation: none !important; }
  .slide .arte-img { animation: none !important; clip-path: none; }
  .slide-texto > * { transition: none; }
}

.vitrine-controles[hidden] { display: none; }