/* ============ HEADER — fundido no hero, ganha corpo ao rolar ============ */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--topo);
  display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.6vw,2.4rem);
  border-bottom:1px solid transparent;
  transition:background var(--calmo),backdrop-filter var(--calmo),border-color var(--calmo);
}
.topo.pousado{
  background:rgba(26,20,22,.74);backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);border-bottom-color:var(--linha);
}
.topo a{font-family:var(--ui-fonte);font-weight:400;font-size:.85rem;letter-spacing:.005em;
  color:var(--luz);opacity:.74;transition:opacity var(--calmo)}
.topo a:hover{opacity:1;text-decoration:none}
.topo .marca{
  font-family:var(--ui-fonte);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  opacity:1;margin-right:.4rem;
}
.topo .menu{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
@media (max-width:760px){ .topo .menu{display:none} .topo{justify-content:center} }

/* ============ HERO ============ */
.hero{min-height:100svh;justify-content:center;padding-top:calc(var(--topo) + 2rem);padding-bottom:clamp(3rem,7vh,5rem)}
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:saturate(.82) contrast(1.04) brightness(.72) sepia(.18)}
.hero__veu{position:absolute;inset:0;z-index:1;
  background:
   radial-gradient(120% 82% at 50% 30%, rgba(26,20,22,.30), rgba(26,20,22,.80) 58%, var(--chao) 92%),
   linear-gradient(to bottom, rgba(26,20,22,.82) 0 14%, rgba(26,20,22,.42) 38%, rgba(26,20,22,.88) 74%, var(--chao) 100%);
}
/* efeito exclusivo do hero: aura de luz respirando */
.aura{position:absolute;z-index:1;top:44%;left:50%;translate:-50% -50%;
  width:min(165vh,150vw);aspect-ratio:1;mix-blend-mode:screen;opacity:.42;pointer-events:none}
.hero h1{max-width:16ch}
.hero .guia{max-width:34ch;color:rgba(244,237,228,.78)}
.hero__desce{margin-top:var(--gap-5);display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.76rem;letter-spacing:.06em;color:rgba(244,237,228,.42)}
.hero__desce i{display:block;width:1px;height:40px;background:linear-gradient(rgba(244,237,228,.5),transparent);
  animation:respira 3.6s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.35;transform:scaleY(.8)}50%{opacity:.9;transform:scaleY(1)}}

/* ============ TRAJETÓRIA — capítulos, não timeline ============ */
.tempo{width:min(var(--largura),100%);margin-top:var(--gap-5);display:flex;flex-direction:column;align-items:center}
.tempo + .tempo{margin-top:var(--gap-5)}
.tempo__n{font-family:var(--voz-fonte);font-size:.88rem;color:var(--fio);opacity:.7;margin-bottom:.55rem}
.tempo h3{font-size:clamp(1.35rem,1.5vw + 1rem,1.95rem);max-width:24ch;color:var(--luz)}
.tempo__img{margin-top:var(--gap-4);width:min(960px,100%);aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--raio);box-shadow:var(--sombra-alta)}
.tempo__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.92) sepia(.12)}

/* ============ PILARES ============ */
.pilares{margin-top:var(--gap-5);width:min(var(--largura),100%);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.pilar{padding:var(--gap-4) var(--gap-3);border-top:1px solid var(--linha)}
.cena--claro .pilar{border-top-color:var(--linha-clara)}
.pilar h3{margin-bottom:var(--gap-2)}
.pilar p{font-size:1rem;line-height:1.75;color:var(--voz-baixa)}
.cena--claro .pilar p{color:var(--tinta-baixa)}
@media (max-width:800px){.pilares{grid-template-columns:1fr;gap:0}}

/* ============ TRABALHO ============ */
.caminhos{margin-top:var(--gap-5);width:min(var(--largura),100%);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2rem)}
.caminho{background:var(--chao-alto);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.8rem,3vw,2.8rem);text-align:left;box-shadow:var(--sombra-alta);
  display:flex;flex-direction:column;gap:var(--gap-2)}
.caminho__sel{font-size:var(--t-mini);color:var(--fio);opacity:.8}
.caminho p{font-size:1rem;line-height:1.75;color:var(--voz-baixa)}
.caminho .nota{border-left:2px solid var(--brasa);padding-left:1rem;color:var(--voz);font-size:.98rem}
.caminho a{margin-top:auto;padding-top:var(--gap-2)}
@media (max-width:800px){.caminhos{grid-template-columns:1fr}}

/* ============ COMO EU CONVERSO — acordeão ============ */
.perguntas{width:min(720px,100%);margin-top:var(--gap-5);text-align:left}
.pergunta{border-top:1px solid var(--linha-clara)}
.perguntas .pergunta:last-of-type{border-bottom:1px solid var(--linha-clara)}

.pergunta summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1.2rem;
  padding:1.25rem .25rem;color:var(--tinta);transition:color var(--calmo)}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary:hover{color:var(--brasa-forte)}
.pergunta__q{flex:1;font-family:var(--voz-fonte);font-variation-settings:"SOFT" 100;
  font-size:clamp(1.08rem,.6vw + .95rem,1.3rem);line-height:1.3;letter-spacing:-.01em}

/* sinal de + que vira − ao abrir */
.sinal{position:relative;flex:none;width:15px;height:15px;margin-top:.45em}
.sinal::before,.sinal::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;
  background:var(--brasa-forte);opacity:.8;transition:transform var(--calmo)}
.sinal::after{transform:rotate(90deg)}
.pergunta[open] .sinal::after{transform:rotate(0)}
.pergunta[open] summary{color:var(--brasa-forte)}

.pergunta__r{padding:0 3rem 1.6rem .25rem;max-width:62ch}
.pergunta__r p{font-size:1.04rem;line-height:1.78;color:var(--tinta-baixa)}
.pergunta__r p + p{margin-top:.95rem}
/* a última é o critério devolvido — ganha peso e o filete de oxblood */
.pergunta__r p:last-child{color:var(--tinta);border-left:2px solid var(--brasa-forte);
  padding-left:1.1rem;margin-top:1.3rem}

/* abre com calma nos navegadores que sabem animar conteúdo de details */
@supports selector(::details-content){
  .pergunta::details-content{opacity:0;block-size:0;overflow:hidden;
    transition:content-visibility var(--lento) allow-discrete,opacity var(--lento),block-size var(--lento)}
  .pergunta[open]::details-content{opacity:1;block-size:auto}
}

.pergunta__fecho{margin-top:var(--gap-5)}
.pratica{margin-top:var(--gap-3);font-size:.95rem;color:var(--tinta-baixa);max-width:56ch}
.pratica a{display:inline-flex;align-items:center;gap:.35rem;color:var(--brasa-forte);white-space:nowrap}

/* ============ CANTO ============ */
.musicas{margin-top:var(--gap-4);display:flex;gap:var(--gap-3);flex-wrap:wrap;justify-content:center}
.musica{font-family:var(--voz-fonte);font-size:1.16rem;color:var(--luz);opacity:.85;
  padding:.5rem 1.1rem;border:1px solid var(--linha);border-radius:999px}

/* ============ PORTA ABERTA ============ */
.reconhece{margin-top:var(--gap-4);width:min(640px,100%);text-align:left;
  display:flex;flex-direction:column;gap:var(--gap-2)}
.reconhece li{list-style:none;padding-left:1.5rem;position:relative;line-height:1.72;color:var(--voz-baixa)}
.reconhece li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--brasa)}

/* ============ RODAPÉ ============ */
.rodape{background:var(--chao-fundo);border-top:1px solid var(--linha);
  padding:var(--gap-5) 22px;text-align:center;font-size:.88rem;color:var(--voz-baixa)}
.rodape .marca{font-family:var(--ui-fonte);font-weight:600;letter-spacing:-.01em;font-size:1.1rem;color:var(--luz);display:block;margin-bottom:var(--gap-2)}
.rodape nav{display:flex;gap:var(--gap-3);justify-content:center;flex-wrap:wrap;margin:var(--gap-3) 0}
.rodape small{display:block;margin-top:var(--gap-3);opacity:.55}

/* ============ ÍCONES — traço fino, herdam a cor do texto ============ */
.icone{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em}
.icone--grande{width:30px;height:30px;color:var(--fio);opacity:.85;margin-bottom:var(--gap-2)}
.cena--claro .icone--grande{color:var(--brasa-forte)}
.acoes a{display:inline-flex;align-items:center;gap:.45rem}
.acoes a .icone{width:.95em;height:.95em}
.caminho a{display:inline-flex;align-items:center;gap:.45rem}
.rodape nav a{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ui-fonte);font-size:.86rem}

/* ============ ORNAMENTOS SVG — um por cena ============ */
.orn{position:absolute;z-index:1;pointer-events:none}
.orn--limiar{top:0;left:0;width:100%;height:120px;opacity:.9}
.orn--fio{top:0;left:50%;translate:-50% 0;width:60px;height:100%;opacity:.75}
.orn--tripe{top:calc(var(--gap-6) - 1.2rem);left:50%;translate:-50% 0;width:min(420px,80%);opacity:.55}
.orn--brasa{bottom:0;left:0;width:100%;height:min(420px,55%);mix-blend-mode:screen;opacity:.9}
.orn--devolucao{top:auto;bottom:calc(var(--gap-6) - 2rem);left:50%;translate:-50% 0;width:min(320px,60%);opacity:.75}
.orn--onda{top:auto;bottom:var(--gap-5);left:50%;translate:-50% 0;width:min(600px,86%);opacity:.9}
.orn--arco{top:calc(var(--gap-6) - 2rem);left:50%;translate:-50% 0;width:min(420px,78%);opacity:.6}

/* a trajetória precisa de contexto para o fio */
#trajetoria{isolation:isolate}
#pilares .interior,#porta .interior{padding-top:clamp(2.5rem,6vh,5rem)}

/* legenda de foto */
.legenda{margin-top:.8rem;font-size:.84rem;color:var(--voz-baixa);letter-spacing:.01em}

/* galeria do Acre */
/* o trio do Acre: a grade manda no formato, então as bordas sempre fecham */
.galeria{margin-top:var(--gap-4);width:min(1000px,100%);display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  grid-template-rows:1fr 1fr;aspect-ratio:10/7;gap:clamp(.6rem,1.4vw,1rem)}
.galeria figure{overflow:hidden;border-radius:var(--raio);box-shadow:var(--sombra-alta);min-height:0}
.galeria figure:first-child{grid-row:1 / span 2}
.galeria img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.94) sepia(.10);
  transition:transform var(--lento)}
.galeria figure:hover img{transform:scale(1.03)}
@media (max-width:620px){
  .galeria{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto}
  .galeria figure{grid-row:auto!important;aspect-ratio:4/3}
  .galeria figure:first-child{aspect-ratio:3/4}
}

/* ============ VITROLA — o player do canto ============ */
.vitrola{position:relative;width:min(720px,100%);margin-top:var(--gap-4)}
.vitrola::before{content:"";position:absolute;inset:-28% -14%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(232,180,120,.16), transparent 70%);
  opacity:0;transition:opacity 1.4s ease}
.vitrola.tocando::before{opacity:1}
.vitrola > *{position:relative;z-index:1}
.vitrola__agora{display:flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--voz-fonte);font-size:1.22rem;color:var(--luz);margin-bottom:var(--gap-2)}
.vitrola__ano{font-family:var(--texto-fonte);font-size:.84rem;color:var(--voz-baixa)}
.vitrola__quadro{border:1px solid var(--linha);border-radius:calc(var(--raio) + 4px);
  padding:10px;background:var(--chao-alto);box-shadow:var(--sombra-alta)}
.vitrola__quadro iframe{display:block;border:0;border-radius:var(--raio)}

/* equalizador: três barras que só se mexem quando alguma faixa foi escolhida */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{display:block;width:2px;height:4px;background:var(--brasa);border-radius:1px}
.vitrola.tocando .eq i{animation:pulsa 1.05s ease-in-out infinite}
.vitrola.tocando .eq i:nth-child(2){animation-delay:.18s;}
.vitrola.tocando .eq i:nth-child(3){animation-delay:.36s}
@keyframes pulsa{0%,100%{height:4px}50%{height:14px}}

/* ============ LISTA DE FAIXAS ============ */
.faixas{list-style:none;width:min(720px,100%);margin-top:var(--gap-4);text-align:left}
.faixa{display:flex;align-items:center;gap:.9rem;width:100%;
  padding:.85rem .7rem;background:none;border:0;border-top:1px solid var(--linha);
  color:var(--voz);font:inherit;font-size:1rem;cursor:pointer;text-align:left;
  transition:color var(--calmo),background var(--calmo)}
.faixas li:last-child .faixa{border-bottom:1px solid var(--linha)}
.faixa:hover{color:var(--luz);background:rgba(244,237,228,.035)}
.faixa .icone{color:var(--fio);opacity:.6;transition:opacity var(--calmo),color var(--calmo)}
.faixa:hover .icone{opacity:1}
.faixa__t{flex:1;font-family:var(--voz-fonte);font-size:1.08rem}
.faixa__a{font-size:.82rem;color:var(--voz-baixa)}
.faixa__p{opacity:0!important;transition:opacity var(--calmo)}
.faixa:hover .faixa__p{opacity:.9!important;color:var(--brasa)}
.faixa[aria-current="true"]{color:var(--brasa)}
.faixa[aria-current="true"] .icone{color:var(--brasa);opacity:1}

/* chips de música ganham nota */
.musica{display:inline-flex;align-items:center;gap:.5rem}
.musica .icone{width:.9em;height:.9em;color:var(--fio);opacity:.8}

/* lista da porta: marca no lugar do traço */
.reconhece li{display:flex;gap:.8rem;padding-left:0}
.reconhece li::before{display:none}
.reconhece .icone{width:1.05em;height:1.05em;color:var(--brasa);margin-top:.42em}