/* 4 · O Instituto (in-) — passeio pelo espaço; a pele esquenta da noite da fachada à luz âmbar de dentro */
.in-secao {
  --in-creme: var(--d-creme);
  --in-apoio: #ecdccb;
  --in-mao: var(--wf-terra-clara);
  --d-terracota-tinta: var(--wf-terra-clara);
  --d-tinta-2: var(--in-apoio);
  --in-p: 0;
  --in-moldura: #2c170f;
  background: linear-gradient(100deg in oklab, #22120b, #3a1e13 55%, #2e180f);
  color: var(--in-creme);
}
.in-palco { position: relative; isolation: isolate; }
.in-malha .in-m1 { --s: 90vmax; --x: 6%;  --y: 96%; --c: rgb(180 90 51 / .5);  --t: 30s; --dx: 8vmax; --dy: -4vmax; }
.in-malha .in-m2 { --s: 64vmax; --x: calc(18% + var(--in-p) * 64%); --y: 20%; --c: rgb(236 170 96 / .32); --t: 26s; --dx: -5vmax; --dy: 5vmax; }
.in-malha .in-m3 { --s: 54vmax; --x: 100%; --y: 100%; --c: rgb(201 160 106 / .2); --t: 34s; --dx: -5vmax; --dy: -3vmax; }
/* a terracota acende conforme se entra */
.in-malha .in-m4 { --s: 120vmax; --x: 78%; --y: 62%; --c: rgb(190 98 56 / .62); --t: 32s; --dx: -6vmax; --dy: -3vmax; opacity: calc(.1 + var(--in-p) * .9); }

/* ---------- abertura ---------- */
.in-abre { position: relative; }
.in-ripas {
  position: absolute; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side in oklab, rgb(240 178 104 / .26), transparent) 30% 50% / 70% 80% no-repeat,
    repeating-linear-gradient(90deg, rgb(203 157 94 / .13) 0 13px, rgb(0 0 0 / .14) 13px 15px, transparent 15px 27px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18% 62%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18% 62%, transparent);
}
.in-titulo .wf-forte { color: var(--in-creme); font-size: 1.18em; }
.in-titulo .wf-script { font-size: .86em; }
.in-citacao { margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; max-width: 34rem; padding-left: 1.2rem; border-left: 2px solid rgb(227 154 110 / .55); }
.in-citacao p { margin: 0; font-size: var(--d-t-corpo); line-height: 1.6; color: var(--in-apoio); }
.in-meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 1.4rem 0 0;
  font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--in-mao);
}
.in-dica { margin: 2.2rem 0 0; font-weight: 600; font-size: 1.05rem; color: var(--in-creme); display: flex; gap: .9rem; align-items: center; }
.in-dica-seta { width: 9rem; height: 1.2rem; overflow: visible; fill: none; stroke: var(--in-mao); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: in-cutuca 2.2s var(--d-ease) infinite; }
@keyframes in-cutuca { 50% { transform: translateX(.5rem); } }
.in-dica-cel { display: none; }

/* ---------- paradas ---------- */
.in-parada { margin: 0; position: relative; }
.in-quadro { margin: 0; position: relative; overflow: hidden; border-radius: var(--d-raio); background: #4a2a1a; }
.in-quadro img { width: 100%; height: 100%; object-fit: cover; }
.in-parada figcaption, .in-legenda { margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.in-sala {
  font-family: var(--d-f-forte); text-transform: uppercase; font-size: clamp(1.3rem, 1vw + .95rem, 1.7rem);
  line-height: 1; letter-spacing: .01em; color: var(--in-creme);
}
.in-mao { font-family: var(--d-f-script); font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.2rem); line-height: 1; color: var(--in-mao); padding-right: .2em; }

/* fachada: lâmina terracota girada atrás (motivo do hero no celular) */
.in-lamina { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; border-radius: var(--d-raio); background: var(--d-terracota); transform: rotate(3.2deg) translate(.9rem, .5rem); }

/* espera: poltronas + vaso + nota */
.in-q-vaso { position: absolute; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7); outline: 7px solid var(--in-moldura); }
.in-nota { position: absolute; margin: 0; pointer-events: none; transform: rotate(-5deg); }
.in-nota-txt { display: block; font-family: var(--d-f-script); font-size: clamp(2.4rem, 2.6vw + .9rem, 3.7rem); line-height: .98; color: var(--in-mao); white-space: nowrap; padding: .1em .3em .2em .1em; }
.in-nota-seta { display: block; width: clamp(3.4rem, 4vw, 4.8rem); margin: -.2rem 0 0 58%; overflow: visible; fill: none; stroke: var(--in-mao); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* frase */
.in-frase { margin: 0; }
.in-frase p { margin: 0; }
.in-frase-forte { display: block; font-family: var(--d-f-forte); text-transform: uppercase; font-size: clamp(2.5rem, 4.2vw + .4rem, 5.6rem); line-height: .96; color: var(--in-creme); }
.in-frase-mao { display: block; font-family: var(--d-f-script); font-size: clamp(2.3rem, 3vw + .6rem, 4.2rem); line-height: 1.12; color: var(--in-mao); margin-top: .5rem; padding-right: .3em; }

/* frase: aspas penduradas */
.in-frase-forte { position: relative; }
.in-aspas { position: absolute; right: 100%; top: -.12em; margin-right: .08em; font-size: 1.9em; line-height: 1; color: var(--in-mao); }

/* fita de LED âmbar (a da marquise e da estante) correndo pelo passeio */
.in-led { display: none; }

/* sala: a grande */
.in-q-pendentes { position: absolute; outline: 7px solid var(--in-moldura); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7); }
.in-q-sala::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(30 14 8 / .78)); pointer-events: none; }

/* fecho */
.in-fecho-txt { margin: 0; }
.in-fecho-mao { display: block; font-family: var(--d-f-script); font-size: clamp(2.6rem, 3.6vw + .6rem, 4.8rem); line-height: 1.1; color: var(--in-creme); padding: 0 .3em 0 .05em; }
.in-fecho-forte { display: block; font-family: var(--d-f-forte); text-transform: uppercase; font-size: calc(var(--wf-t-titulo) * 1.12); line-height: .98; color: var(--in-creme); }
.in-sub { position: relative; display: inline-block; }
.in-sub .wf-risco { position: absolute; left: 0; bottom: -.14em; stroke: var(--in-creme); }
.in-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.in-secao .wf-btn { background: var(--in-creme); color: var(--d-tinta); }
.in-secao .wf-btn:hover { background: #fff; color: var(--d-tinta); }
.in-link { color: var(--in-creme); text-decoration-color: var(--in-creme); }

/* guia: pontinhos do carrossel dela + linha de progresso */
.in-guia { display: flex; align-items: center; gap: 1rem; z-index: 2; }
.in-pontos { display: flex; gap: 0; margin-left: -.8rem; }
.in-pontos button { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.in-pontos button::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: rgb(251 244 232 / .34); transition: width .45s var(--d-ease), background-color .45s; }
.in-pontos button[aria-current="true"]::before { width: 1.5rem; background: var(--in-mao); }
.in-pontos button:hover::before { background: rgb(251 244 232 / .75); }
.in-pontos button[aria-current="true"]:hover::before { background: var(--in-mao); }
.in-pontos button:focus-visible { outline: 2px solid var(--in-creme); outline-offset: -4px; border-radius: 10px; }
.in-linha { position: relative; width: clamp(6rem, 12vw, 11rem); height: 2px; background: rgb(251 244 232 / .2); border-radius: 2px; overflow: hidden; }
.in-linha i { position: absolute; inset: 0; background: var(--in-mao); transform-origin: 0 50%; transform: scaleX(var(--in-p)); }

/* escrita da nota quando a parada chega */
.js .in-nota-txt { -webkit-mask-image: linear-gradient(90deg, #000 0 44%, transparent 56% 100%); mask-image: linear-gradient(90deg, #000 0 44%, transparent 56% 100%); -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.js .in-p-espera.is-aqui .in-nota-txt { animation: d-escreve 1.3s cubic-bezier(.45,.1,.35,1) .2s both; }
.js .in-nota-seta path { stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset .9s 1.2s cubic-bezier(.6,0,.3,1); }
.js .in-p-espera.is-aqui .in-nota-seta path { stroke-dashoffset: 0; }

/* ================= celular e tablet: trilho de arraste ================= */
@media (max-width: 980px) {
  .in-secao { padding-inline: 0; }
  .in-palco { display: flex; flex-direction: column; }
  .in-faixa { display: contents; }
  .in-abre { order: 1; padding-inline: var(--d-margem); }
  .in-fotos { order: 2; }
  .in-guia { order: 3; padding: 0 var(--d-margem); margin-top: .2rem; }
  .in-fecho { order: 4; padding-inline: var(--d-margem); margin-top: clamp(3.5rem, 12vw, 5rem); }
  .in-ripas { inset: calc(-1 * var(--wf-secao)) 0 -2rem 0; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
  .in-dica-pc { display: none; }
  .in-dica-cel { display: inline; }
  .in-dica-seta { width: 5.5rem; }
  .in-fotos {
    display: flex; align-items: flex-start; gap: 1.25rem;
    margin-top: 2.2rem; padding: .6rem var(--d-margem) 1.2rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--d-margem);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .in-fotos::-webkit-scrollbar { display: none; }
  .in-fotos {
    background:
      linear-gradient(90deg, rgb(255 205 140 / .0), rgb(255 205 140 / .85) 6%, rgb(255 205 140 / .85) 94%, rgb(255 205 140 / 0)) 0 0 / 100% 2px no-repeat local,
      linear-gradient(rgb(255 180 110 / .16), transparent) 0 2px / 100% 9rem no-repeat local;
    padding-top: 1.6rem;
  }
  .in-aspas { position: static; display: block; height: .55em; font-size: 1.6em; margin: 0; }
  .in-fotos > * { flex: none; scroll-snap-align: start; }
  .in-p-fachada, .in-p-corredor, .in-p-consultorio { width: min(72vw, 22rem); }
  .in-p-fachada .in-quadro, .in-lamina, .in-p-corredor .in-quadro, .in-p-consultorio .in-quadro { aspect-ratio: 3 / 4.5; }
  .in-p-logo { width: min(84vw, 30rem); align-self: center; }
  .in-p-logo .in-quadro { aspect-ratio: 1800 / 1013; }
  .in-p-espera { width: min(86vw, 26rem); }
  .in-q-poltronas { width: 74%; aspect-ratio: 3 / 4.4; }
  .in-q-vaso { width: 46%; aspect-ratio: 750 / 1100; right: 0; top: 40%; }
  .in-nota { right: -.3rem; top: -.4rem; }
  .in-nota-txt { font-size: 2.2rem; }
  .in-nota-seta { width: 2.8rem; margin-left: 52%; }
  .in-frase { width: min(78vw, 22rem); align-self: center; }
  .in-frase-forte { font-size: 2.5rem; }
  .in-frase-mao { font-size: 2.15rem; }
  .in-p-sala { width: min(86vw, 26rem); }
  .in-q-sala { width: 78%; aspect-ratio: 1027 / 1750; }
  .in-q-pendentes { width: 44%; aspect-ratio: 1080 / 1390; right: 0; top: 18%; }
  .in-p-sala .in-legenda { margin-top: 1rem; }
  .in-fecho-forte { font-size: clamp(2.6rem, 12vw, 3.8rem); }
}

/* ================= notebook e desktop: passeio preso à rolagem ================= */
@media (min-width: 981px) {
  .in-secao { padding: 0; --in-alto: 100vh; }
  @supports (height: 100svh) { .in-secao { --in-alto: 100svh; } }
  .in-secao:not(.in-pin) .in-palco { padding: var(--wf-secao) 0; overflow-x: auto; }
  .in-pin .in-palco { position: sticky; top: 0; height: var(--in-alto); overflow: clip; display: flex; flex-direction: column; justify-content: center; }
  .in-faixa { display: flex; align-items: center; gap: clamp(3.5rem, 6.5vw, 8rem); padding: 0 var(--d-margem); width: max-content; height: 100%; will-change: transform; }
  .in-fotos { display: contents; }
  .in-abre { width: min(42rem, 44vw); flex: none; }
  .in-ripas { top: calc(-.5 * var(--in-alto)); bottom: calc(-.5 * var(--in-alto)); left: calc(-1 * var(--d-margem)); right: -8rem; }
  .in-dica-cel { display: none; }

  .in-parada, .in-frase, .in-fecho { flex: none; }
  .in-p-fachada { --in-h: min(74vh, 48rem); width: calc(var(--in-h) * .5627); margin-left: 1rem; }
  .in-p-fachada .in-quadro, .in-lamina { height: var(--in-h); }
  .in-p-logo { align-self: flex-start; margin-top: 12vh; }
  .in-p-logo .in-quadro { height: min(56vh, 36rem); aspect-ratio: 1800 / 1013; }
  .in-p-espera { --in-a: min(62vh, 41rem); --in-b: min(42vh, 27rem); width: calc(var(--in-a) * .597 + var(--in-b) * .564 * .66); height: min(80vh, 53rem); margin-bottom: 4vh; }
  .in-q-poltronas { position: absolute; left: 0; top: 7%; height: var(--in-a); aspect-ratio: 955 / 1600; }
  .in-q-vaso { right: 0; bottom: 3.6rem; height: var(--in-b); aspect-ratio: 750 / 1330; }
  .in-p-espera .in-legenda { position: absolute; left: 0; bottom: 0; margin: 0; }
  .in-nota { right: -5.5rem; top: 0; }
  .in-frase { width: min(42rem, 46vw); }
  .in-p-corredor { align-self: flex-end; margin-bottom: 15vh; }
  .in-p-corredor .in-quadro { height: min(58vh, 38rem); aspect-ratio: 955 / 1600; }
  /* a sala: fatia de altura inteira, sangrando em cima e embaixo */
  .in-p-sala { align-self: stretch; height: var(--in-alto); width: calc(var(--in-alto) * .5135 + min(40vh, 26rem) * .777 * .55); }
  .in-q-sala { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1027 / 2000; border-radius: 0; }
  .in-q-pendentes { right: 0; top: 13%; height: min(40vh, 26rem); aspect-ratio: 1080 / 1390; }
  .in-p-sala .in-legenda { position: absolute; left: 1.8rem; right: 1rem; bottom: clamp(6rem, 15vh, 9rem); margin: 0; z-index: 1; }
  .in-p-consultorio .in-quadro { height: min(64vh, 42rem); aspect-ratio: 955 / 1600; }
  .in-p-consultorio { align-self: flex-start; margin-top: 9vh; }
  .in-fecho { width: min(42rem, 48vw); padding-right: var(--d-margem); }
  .in-faixa { position: relative; }
  .in-led {
    display: block; position: absolute; z-index: -1; left: 0; right: 0; top: 6vh; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(255 206 140 / .9) 22rem, rgb(255 214 150) calc(100% - 20rem), transparent);
    box-shadow: 0 0 14px 2px rgb(255 170 90 / .55), 0 0 44px 8px rgb(240 140 70 / .25);
    opacity: calc(.45 + var(--in-p) * .55);
  }
  .in-led::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 38vh; background: linear-gradient(rgb(255 182 112 / .13), transparent); }
  .in-titulo { font-size: clamp(4.6rem, 8.6vw, 9.6rem); }
  .in-titulo .wf-forte { font-size: 1em; line-height: .92; }
  .in-titulo .wf-script { font-size: .5em; margin-top: .06em; }
  .in-p-fachada figcaption, .in-p-corredor figcaption, .in-p-consultorio figcaption { flex-direction: column; gap: .35rem; }
  .in-sala { font-size: clamp(1.6rem, 1.2vw + .9rem, 2.15rem); }
  .in-mao { font-size: clamp(2rem, 1.5vw + 1.1rem, 2.75rem); }
  .in-frase { padding-left: 2rem; }
  .in-guia { position: absolute; left: var(--d-margem); bottom: clamp(1rem, 3vh, 2rem); }
  .in-pin .in-quadro img { transform: translateX(var(--in-px, 0)) scale(1.07); }
}