:root {
  --entrada-percurso: 105svh;
  --entrada-palco: 100svh;
}
.entrada-pista { position: relative; }
.entrada-palco { position: relative; isolation: isolate; }
.entrada-palco .hero {
  position: relative;
  min-height: var(--entrada-palco);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff8ea;
  background: #253029;
}
.entrada-hero-foto, .entrada-hero-foto img, .entrada-palco .hero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entrada-hero-foto img { object-fit: cover; object-position: 50% 52%; }
.entrada-palco .hero::after {
  content: "";
  background: linear-gradient(90deg,#111b15e8 0%,#141c159e 40%,#161c1710 82%),
              linear-gradient(0deg,#101913d9,transparent 52%,#10191387);
}
.entrada-palco .header { color: #fff8ea; border-color: #fff8ea55; }
.entrada-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px,100%);
  padding: 135px 7vw max(120px,16svh);
}
.entrada-hero-copy h1 {
  margin: 18px 0 20px;
  font: 400 clamp(62px,8.6vw,138px)/.91 Georgia,serif;
  letter-spacing: -.055em;
}
.entrada-hero-copy h1 em { color: #edc98a; font-weight: 400; }
.entrada-hero-copy > p:not(.eyebrow) { max-width: 410px; line-height: 1.6; color: #f5ecda; }
.entrada-acoes { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.entrada-acoes .button { background: #f0dfb8; color: #1e2920; }
.entrada-ver { color: #fff8ea; text-underline-offset: 5px; }
.entrada-legenda {
  position: absolute;
  z-index: 1;
  left: 7vw;
  right: 7vw;
  bottom: 65px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #fff8ea55;
  padding-top: 13px;
  font-size: 10px;
  letter-spacing: .16em;
}
.entrada-cortinas,.entrada-controle { display: none; }
.entrada-ativa .entrada-pista { height: calc(var(--entrada-palco) + var(--entrada-percurso)); }
.entrada-ativa .entrada-palco { position: sticky; top: 0; height: var(--entrada-palco); overflow: clip; }
.entrada-ativa .entrada-cortinas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.entrada-poster,.entrada-cortinas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.entrada-poster {
  background: #a77b42 url("assets/bambu-trama.webp") repeat-x left center / 50% 100%;
  box-shadow: inset 0 0 100px #2114079c;
}
.entrada-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 49.55%,#2a1c13c4 50%,transparent 50.45%);
}
.entrada-desenhada .entrada-poster { visibility: hidden; }
.entrada-ativa .entrada-controle {
  position: absolute;
  z-index: 41;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 6vw max(52px,8svh);
  pointer-events: none;
  color: #fff8ed;
}
.entrada-marca,.entrada-instrucoes,#entrada-pular {
  background: #1b211bcf;
  border: 1px solid #ffedce63;
}
.entrada-marca { padding: 11px 20px; font: 15px Georgia,serif; letter-spacing: .26em; }
.entrada-instrucoes { margin-top: auto; padding: 13px 23px; text-align: center; }
.entrada-instrucoes p { margin: 5px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
#entrada-pular { position: absolute; top: 28px; right: 5vw; color: inherit; padding: 12px 15px; pointer-events: auto; cursor: pointer; }
.entrada-aberta .entrada-cortinas,.entrada-aberta .entrada-controle { display: none; }
.entrada-ativa:not(.entrada-aberta) :is(.floating-wa,.mobile-bar,.cookie-banner,.progress) { visibility: hidden; }
@media (max-width:760px) {
  :root { --entrada-percurso: 83svh; }
  .entrada-palco .hero::after { background: linear-gradient(0deg,#111b15 2%,#111b15d9 37%,#111b1526 88%),linear-gradient(#111b1580,transparent 24%); }
  .entrada-hero-copy { padding: 100px 7vw 140px; }
  .entrada-hero-copy h1 { font-size: clamp(46px,11vw,75px); }
  .entrada-hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .entrada-acoes { gap: 13px 19px; margin-top: 18px; }
  .entrada-legenda { bottom: 75px; font-size: 8px; }
  .entrada-ativa .entrada-controle { align-items: flex-start; }
  .entrada-marca { font-size: 11px; padding: 11px; }
  .entrada-instrucoes { align-self: center; }
  #entrada-pular { font-size: 11px; }
}
@media (max-height:600px) {
  :root { --entrada-palco: max(540px,100svh); }
  .entrada-hero-copy { padding-top: 95px; padding-bottom: 92px; }
  .entrada-hero-copy h1 { font-size: clamp(43px,8vw,70px); }
  .entrada-legenda { bottom: 57px; }
}
@media (prefers-reduced-motion:reduce) {
  .entrada-ativa .entrada-pista,.entrada-ativa .entrada-palco { height: auto; position: relative; }
  .entrada-ativa .entrada-cortinas,.entrada-ativa .entrada-controle { display: none; }
  .entrada-ativa:not(.entrada-aberta) :is(.floating-wa,.mobile-bar,.cookie-banner,.progress) { visibility: visible; }
}

.entrada-marca { opacity: var(--entrada-marca-opacidade,1); }

/* Product demonstration between the applications and specifications. */
.unroll-middle { height: 168svh; min-height: 0; }
.unroll-middle .unroll-stage { min-height: 0; height: 100svh; }
.unroll-middle .unroll-footer { grid-template-columns: minmax(55px,160px) auto; }
.unroll-middle .unroll-meter { width: 100%; }
.no-motion .unroll-middle,
.unroll-fallback .unroll-middle { height: auto; }
.no-motion .unroll-middle .unroll-stage,
.unroll-fallback .unroll-middle .unroll-stage { height: auto; position: relative; }
@media (max-width:760px) {
  .unroll-middle { height: 155svh; }
  .unroll-middle .unroll-footer { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .unroll-middle, .unroll-middle .unroll-stage { height: auto; }
}