@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500&display=swap");

:root{
  --ink:#161815;
  --muted:#696d68;
  --soft:#8a8d88;
  --paper:#f7f5ef;
  --paper-deep:#f2efe7;
  --white:#ffffff;
  --line:rgba(22,24,21,.13);
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Baskervville",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#f8f5ee;
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.is-hidden{display:none!important}

/* CAPA APROVADA */
.home-page{background:#0d160f}
.hero{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  background:#0d160f;
}
.hero-media{
  position:absolute;
  inset:0;
  background:url('https://upload.wikimedia.org/wikipedia/commons/d/d0/Aerial_view_of_the_Amazon_Rainforest.jpg') center 70%/cover no-repeat;
  filter:saturate(.84) contrast(1.04) brightness(.74);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,13,9,.15),rgba(8,13,9,.12) 46%,rgba(8,13,9,.54));
}
.hero-content{
  position:relative;
  z-index:2;
  min-height:100svh;
  color:#fff;
  padding:0 24px;
}
.hero-brand{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  width:min(92vw,1000px);
  text-align:center;
}
.hero-brand h1{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(1.2rem,2.5vw,2.4rem);
  margin:0 0 14px;
  font-family:var(--serif);
  font-weight:400;
  line-height:.86;
  letter-spacing:.02em;
}
.hero-a{
  font-size:clamp(3.2rem,6vw,5.1rem);
  line-height:1;
}
.hero-arca{
  font-size:clamp(6rem,12vw,10rem);
}
.hero-sub{
  margin:0;
  font-size:clamp(1rem,1.35vw,1.18rem);
  font-weight:300;
  letter-spacing:.01em;
}
.hero-entry{
  position:absolute;
  left:50%;
  bottom:6vh;
  transform:translateX(-50%);
  width:min(92vw,1040px);
  text-align:center;
}
.hero-entry h2{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(2rem,4vw,3.55rem);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.035em;
}
.cta-button{
  display:inline-block;
  margin-top:24px;
  padding:12px 22px;
  border:0;
  border-radius:999px;
  background:#111411;
  color:#fff;
  font-size:.92rem;
  font-weight:400;
  cursor:pointer;
}
.cta-button:hover{opacity:.94}

/* INTERNAS: BASE TIFFANY */
.collection-page,
.species-page{
  max-width:1380px;
  margin:0 auto;
  padding:42px 6.2vw 86px;
}
.back-link,
.species-topnav{
  font-size:.82rem;
  font-weight:300;
  color:#515550;
  letter-spacing:.005em;
}
.back-link{
  display:inline-block;
  margin-bottom:54px;
}
.species-topnav{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-bottom:44px;
}

.collection-head{
  max-width:760px;
  margin-bottom:44px;
}
.tiny-label{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.62rem;
  font-weight:400;
  color:#727670;
}
.collection-head h1{
  margin:0 0 18px;
  max-width:740px;
  font-size:clamp(2.05rem,3.2vw,2.9rem);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.035em;
}
.collection-lead{
  margin:0 0 25px;
  max-width:680px;
  font-size:1rem;
  line-height:1.65;
  color:#5f635e;
}
.filter-row,
.detail-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.filter-button,
.detail-tab{
  appearance:none;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:#646864;
  padding:0 0 7px;
  font-size:.95rem;
  font-weight:300;
  cursor:pointer;
}
.filter-button.active,
.detail-tab.active{
  color:#121411;
  border-bottom-color:#121411;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:42px 20px;
}
.catalog-card{display:block}
.catalog-photo{
  aspect-ratio:4/3;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
  transition:transform .5s ease,filter .5s ease;
}
.catalog-card:hover .catalog-photo{
  transform:scale(1.012);
  filter:brightness(1.015);
}
.catalog-copy{padding-top:12px}
.catalog-copy span{
  display:block;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.58rem;
  font-weight:400;
  color:#777b75;
}
.catalog-copy h2{
  margin:0 0 3px;
  font-size:1.08rem;
  font-weight:400;
  line-height:1.24;
  letter-spacing:-.012em;
}
.catalog-copy p{
  margin:0;
  font-size:.8rem;
  font-weight:300;
  color:#747872;
}

.species-intro{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);
  gap:46px;
  align-items:center;
}
.species-main-photo{
  min-height:560px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.species-intro-copy{
  padding:34px 0;
}
.species-intro-copy h1{
  margin:0;
  font-size:clamp(2rem,3.1vw,2.85rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.035em;
}
.common-name{
  margin:9px 0 0;
  font-size:.95rem;
  font-weight:300;
  color:#737771;
}
.species-summary{
  margin:24px 0 0;
  max-width:470px;
  font-size:1rem;
  font-weight:300;
  line-height:1.68;
  color:#5a5f59;
}

.species-details{
  padding-top:54px;
}
.detail-tabs{
  margin-bottom:28px;
}
.detail-tab{
  text-transform:none;
  letter-spacing:0;
}
.detail-panel{display:none}
.detail-panel.active{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:42px;
  align-items:start;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.detail-photo{
  height:370px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#e5e6e1;
}
.detail-copy{padding:2px 0 0}
.detail-copy span{
  display:block;
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.6rem;
  font-weight:400;
  color:#767a74;
}
.detail-copy h2{
  margin:0 0 14px;
  font-size:clamp(1.8rem,2.8vw,2.45rem);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.03em;
}
.detail-copy p{
  margin:0;
  max-width:520px;
  font-size:.98rem;
  font-weight:300;
  line-height:1.7;
  color:#595e58;
}

#photo-habitat{background-position:center center}
#photo-identity{background-position:center top}
#photo-origin{background-position:right center}

@media(max-width:1050px){
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .species-intro{grid-template-columns:1fr;gap:30px}
  .species-main-photo{min-height:58vw}
  .species-intro-copy{padding:0}
  .detail-panel.active{grid-template-columns:1fr}
}

@media(max-width:640px){
  .collection-page,
  .species-page{padding:30px 20px 60px}
  .back-link{margin-bottom:42px}
  .species-topnav{margin-bottom:34px}
  .catalog-grid{grid-template-columns:1fr;gap:30px}
  .filter-row,
  .detail-tabs{gap:18px}
  .species-main-photo{min-height:72vw}
  .detail-photo{height:58vw}
  .hero-brand{top:43%}
  .hero-entry{bottom:5vh}
  .hero-entry h2{font-size:clamp(1.8rem,8vw,2.7rem)}
  .hero-arca{font-size:clamp(5rem,20vw,7rem)}
  .hero-a{font-size:clamp(2.8rem,11vw,4rem)}
}


/* ARCA v17 — nitidez e limpeza Tiffany */
body{font-family:var(--sans)}
.hero-sub, .hero-entry h2, .cta-button{font-family:var(--sans)}
.hero-sub{font-size:1.02rem;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.97)}
.hero-entry h2{font-size:clamp(1.82rem,3.2vw,3rem);font-weight:300;letter-spacing:-.032em;line-height:1.08;text-shadow:0 1px 10px rgba(0,0,0,.14)}
.cta-button{font-size:.9rem;font-weight:500;letter-spacing:0}

.collection-page,.species-page{padding:44px 6.4vw 92px;background:transparent}
.back-link,.species-topnav{font-size:.84rem;font-weight:400;color:#444843;letter-spacing:0}
.back-link{margin-bottom:58px}
.species-topnav{margin-bottom:42px}

.tiny-label{font-size:.64rem;font-weight:500;letter-spacing:.18em;color:#60655f}
.collection-head{max-width:720px;margin-bottom:46px}
.collection-head h1{max-width:720px;font-size:clamp(1.88rem,2.8vw,2.55rem);font-weight:300;letter-spacing:-.03em;line-height:1.08}
.collection-lead{font-size:.97rem;font-weight:400;line-height:1.68;color:#50554f;max-width:650px}

.filter-row,.detail-tabs{gap:24px}
.filter-button,.detail-tab{padding:0 0 8px;font-size:.89rem;font-weight:400;color:#555953}
.filter-button.active,.detail-tab.active{color:#141614;border-bottom-color:#141614}

.catalog-grid{gap:46px 20px}
.catalog-copy{padding-top:11px}
.catalog-copy span{margin-bottom:5px;font-size:.62rem;font-weight:500;letter-spacing:.16em;color:#666b65}
.catalog-copy h2{font-size:1.02rem;font-weight:400;letter-spacing:-.012em;line-height:1.23}
.catalog-copy p{font-size:.84rem;font-weight:400;color:#5a5e59}

.species-intro{gap:56px;align-items:start}
.species-intro-copy{padding:28px 0 0}
.species-intro-copy h1{font-size:clamp(1.9rem,2.8vw,2.55rem);font-weight:300;letter-spacing:-.03em;line-height:1.08}
.common-name{font-size:.88rem;font-weight:400;color:#5b605a}
.species-summary{font-size:.96rem;font-weight:400;line-height:1.7;color:#525752;max-width:450px}

.species-details{padding-top:48px}
.detail-tabs{margin-bottom:24px}
.detail-panel.active{gap:36px;padding-top:20px}
.detail-photo{height:350px;background-color:#ecece7}
.detail-copy span{margin-bottom:12px;font-size:.64rem;font-weight:500;letter-spacing:.18em;color:#5f645e}
.detail-copy h2{margin:0 0 12px;font-size:clamp(1.6rem,2.25vw,2.1rem);font-weight:300;letter-spacing:-.028em;line-height:1.08}
.detail-copy p{font-size:.95rem;font-weight:400;line-height:1.72;color:#515650;max-width:500px}

@media(max-width:640px){
  .collection-page,.species-page{padding:28px 20px 58px}
  .collection-head h1,.species-intro-copy h1,.detail-copy h2{font-size:clamp(1.55rem,7.6vw,2.05rem)}
  .filter-row,.detail-tabs{gap:18px}
  .filter-button,.detail-tab{font-size:.86rem}
  .detail-photo{height:58vw}
}


/* ARCA v18 — home unificada com a tipografia da capa-base */
.hero-sub,
.hero-entry h2,
.cta-button{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:0;
}
.hero-sub{
  font-size:clamp(1rem,1.35vw,1.18rem);
  line-height:1.18;
}
.hero-entry h2{
  font-size:clamp(1.82rem,3.2vw,3rem);
  line-height:1.03;
  text-shadow:0 1px 10px rgba(0,0,0,.14);
}
.cta-button{
  font-size:.92rem;
  line-height:1;
}


/* ARCA v20 — suavizar apenas a frase da capa */
.hero-entry h2{
  font-family:var(--serif);
  font-size:clamp(1.68rem,2.85vw,2.6rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.012em;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 8px rgba(0,0,0,.10);
}
@media(max-width:640px){
  .hero-entry h2{font-size:clamp(1.55rem,7vw,2.2rem)}
}


/* ARCA v21 — unificar a tipografia da home com a do título A ARCA */
.hero-sub,
.hero-entry h2,
.cta-button{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  letter-spacing:0;
  text-transform:none;
}
.hero-sub{
  font-size:clamp(.98rem,1.2vw,1.12rem);
  line-height:1.18;
  color:rgba(255,255,255,.96);
  text-shadow:none;
}
.hero-entry h2{
  font-size:clamp(1.7rem,2.85vw,2.55rem);
  line-height:1.05;
  letter-spacing:-.008em;
  color:rgba(255,255,255,.97);
  text-shadow:none;
}
.cta-button{
  font-size:1rem;
  line-height:1;
  color:#fff;
  text-shadow:none;
}
@media(max-width:640px){
  .hero-entry h2{font-size:clamp(1.5rem,6.8vw,2.05rem)}
  .cta-button{font-size:.92rem}
}


/* ARCA v22 — override final da home, mesma família da capa-base */
.hero-brand h1,
.hero-brand h1 span,
.hero-sub,
.hero-entry h2,
.cta-button{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-style:normal !important;
  text-transform:none !important;
  font-kerning:normal;
  font-feature-settings:"kern" 1;
  text-shadow:none !important;
}
.hero-sub{
  font-size:clamp(1rem,1.3vw,1.18rem) !important;
  line-height:1.12 !important;
  letter-spacing:0 !important;
  color:rgba(255,255,255,.97) !important;
}
.hero-entry h2{
  max-width:900px;
  margin:0 auto;
  font-size:clamp(1.82rem,3.25vw,2.95rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.01em !important;
  color:rgba(255,255,255,.98) !important;
  text-wrap:balance;
}
.cta-button{
  font-size:.98rem !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
@media(max-width:640px){
  .hero-entry h2{font-size:clamp(1.52rem,7vw,2.18rem) !important}
  .hero-sub{font-size:1rem !important}
  .cta-button{font-size:.9rem !important}
}


/* ARCA v23 — home com serif mais limpa e menos garranchuda */
.home-page .hero-brand h1,
.home-page .hero-brand h1 span,
.home-page .hero-sub,
.home-page .hero-entry h2,
.home-page .cta-button{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.home-page .hero-sub{
  font-size:clamp(1rem,1.22vw,1.12rem) !important;
  line-height:1.16 !important;
}
.home-page .hero-entry h2{
  font-size:clamp(1.74rem,2.95vw,2.72rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.006em !important;
}
.home-page .cta-button{
  font-size:.96rem !important;
  line-height:1 !important;
}


/* ARCA v24 — suavização real apenas da frase da capa */
.home-page .hero-entry h2{
  font-family:"Libre Baskerville", Georgia, serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:clamp(1.68rem,2.7vw,2.45rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.008em !important;
  color:rgba(255,255,255,.98) !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  max-width:860px;
  margin:0 auto;
}
@media(max-width:640px){
  .home-page .hero-entry h2{font-size:clamp(1.45rem,6.5vw,1.95rem) !important;line-height:1.1 !important}
}


/* ARCA v26 — subir somente o título A ARCA para dar respiro do rio */
.home-page .hero-brand{
  top:40% !important;
}
@media(max-width:640px){
  .home-page .hero-brand{top:39% !important}
}


/* ARCA v27 — afinar A ARCA e a frase inferior em ~30% */
.home-page .hero-brand h1,
.home-page .hero-brand h1 span,
.home-page .hero-entry h2{
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-weight:300 !important;
  letter-spacing:-.01em !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.home-page .hero-arca{
  font-size:clamp(5.9rem,12vw,9.4rem) !important;
}
.home-page .hero-a{
  font-size:clamp(3.1rem,6vw,4.8rem) !important;
}
.home-page .hero-entry h2{
  font-size:clamp(1.62rem,2.55vw,2.35rem) !important;
  line-height:1.06 !important;
}
@media(max-width:640px){
  .home-page .hero-entry h2{font-size:clamp(1.38rem,6vw,1.82rem) !important}
  .home-page .hero-arca{font-size:clamp(4.9rem,19vw,6.6rem) !important}
  .home-page .hero-a{font-size:clamp(2.6rem,10vw,3.8rem) !important}
}


/* ARCA motor v4 — busca discreta no acervo */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.catalog-search{
  width:min(100%,520px);
  margin-top:25px;
}
.catalog-search input{
  width:100%;
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(22,24,21,.24);
  border-radius:0;
  outline:0;
  background:transparent;
  color:#171916;
  padding:9px 0 10px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:400;
}
.catalog-search input::placeholder{color:#858982;font-weight:300}
.catalog-search input:focus{border-bottom-color:#171916}
.catalog-empty{
  grid-column:1/-1;
  margin:8px 0 0;
  font-size:.94rem;
  color:#686d67;
}

/* ARCA mobile interação v1 — 2 colunas + pista de toque visível */
@media (max-width:640px){
  .catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 12px !important;
  }
  .catalog-photo-wrap{position:relative;overflow:hidden}
  .catalog-photo{aspect-ratio:4/3}
  .catalog-open-label{
    left:8px !important;
    bottom:8px !important;
    min-height:24px !important;
    padding:5px 7px !important;
    font-size:.61rem !important;
    opacity:1 !important;
    transform:none !important;
    background:rgba(17,20,17,.78) !important;
  }
  .catalog-copy{padding-top:9px !important}
  .catalog-copy span{
    margin-bottom:4px !important;
    font-size:.50rem !important;
    letter-spacing:.14em !important;
  }
  .catalog-copy h2{
    margin-bottom:3px !important;
    font-size:.94rem !important;
    line-height:1.16 !important;
  }
  .catalog-copy p{
    font-size:.72rem !important;
    line-height:1.35 !important;
  }
}


/* ARCA sons v1 — áudio sob demanda, sem autoplay */
.species-sound{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 13px;
  margin-top:22px;
}
.species-sound[hidden]{display:none!important}
.species-sound-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid rgba(22,24,21,.22);
  border-radius:999px;
  background:transparent;
  color:#171916;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.species-sound-button:hover,
.species-sound-button:focus-visible{
  border-color:rgba(22,24,21,.55);
  background:rgba(22,24,21,.035);
  outline:none;
}
.species-sound-button:active{transform:scale(.985)}
.species-sound-button.is-playing{background:#171916;color:#fff;border-color:#171916}
.species-sound-icon{
  display:inline-block;
  width:24px;
  overflow:hidden;
  font-size:.78rem;
  letter-spacing:-.08em;
  opacity:.8;
}
.species-sound-status,
.species-sound-credit{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:400;
  color:#7a7f78;
}
.species-sound-credit{
  color:#656a64;
  text-decoration:none;
  border-bottom:1px solid rgba(22,24,21,.18);
}
.species-sound-credit:hover{border-bottom-color:rgba(22,24,21,.55)}
@media(max-width:640px){
  .species-sound{margin-top:18px;gap:8px 11px}
  .species-sound-button{min-height:36px;padding:7px 12px;font-size:.76rem}
  .species-sound-credit{flex-basis:100%;width:max-content}
}