@font-face { font-family: 'Knewave'; src: url('./assets/fonts/Knewave-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { color-scheme: light; background: #04bacb; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { overflow-x: hidden; }
.site-sections { position: relative; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; }
.site-sections::-webkit-scrollbar { display: none; }
.screen-section { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: clip; scroll-snap-align: start; scroll-snap-stop: always; }
button { font: inherit; }
.ui-arrow { display: inline-block; width: 1em; height: 1em; min-width: 14px; min-height: 14px; flex-shrink: 0; vertical-align: -.12em; }
.signature-vector { position: absolute; inset: 0; display: block; width: 100%; height: 100%; color: #fff; opacity: 0; }
.is-playing > .signature-vector { opacity: 1; }
.hero__signature > .signature-vector { animation: signature-float 9s ease-in-out infinite; }
.motion-paused .hero__signature > .signature-vector { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero { isolation: isolate; background: #04bacb; }
.hero__background { position: absolute; z-index: -3; inset: -1.2%; transform: scale(1.018); animation: background-arrive 2s cubic-bezier(.16,1,.3,1) both; }
.hero__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: sky-drift 22s ease-in-out infinite alternate; }
.hero__signature-wrap, .hero__portrait-wrap { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.hero__signature-wrap { z-index: 2; }
.hero__portrait-wrap { z-index: 1; transform-origin: 50% 65%; }
.hero__light { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 68%, #ffe8a61a, transparent 55%); }
.hero__signature { position: absolute; z-index: 2; top: max(30px, 7svh); left: 50%; width: min(34vw, 38svh, 460px); aspect-ratio: 3326 / 1625; transform: translateX(-50%); animation: signature-arrive 1.35s .15s cubic-bezier(.16,1,.3,1) both; filter: drop-shadow(0 2px 1px #004d5d25); }
.hero__signature img, .hero__signature video { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); animation: signature-float 9s ease-in-out infinite; }
.hero__signature-video { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.hero__signature-still { transition: opacity .45s ease; }
.hero__signature.is-playing .hero__signature-video { opacity: 1; }
.hero__signature.is-playing .hero__signature-still { opacity: 0; }
.hero__portrait { position: absolute; z-index: 1; left: 50%; top: 31svh; width: 124svh; aspect-ratio: 1; transform: translateX(-53%); animation: portrait-arrive 1.6s .08s cubic-bezier(.16,1,.3,1) both; }
.hero__portrait img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; animation: portrait-float 8s ease-in-out infinite; transform-origin: 50% 65%; }
.hero__transition-shade { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(180deg, #003c4933, #1d2527); opacity: 0; }
/* A street-poster collage: paper, stickers, booking ticket and moving signs. */
.backstage { isolation: isolate; background: #3c3530; --scene-entry: 1; --ink: #29211f; color: var(--ink); }
.backstage__camera { position: absolute; inset: -1px; will-change: transform, opacity; transform-origin: 50% 30%; }
.backstage__background, .backstage__background img { display: block; width: 100%; height: 100%; }
.backstage__background img { object-fit: cover; object-position: center; }
.backstage__light { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #29120d55, transparent 45%), radial-gradient(ellipse at 70% 40%, #ffb53828, transparent 60%); }
.backstage__portrait-wrap { position: absolute; z-index: 3; inset: 0; pointer-events: none; transform: translate3d(calc(var(--scene-entry) * 90px), calc(var(--scene-entry) * 100px), 0); opacity: calc(1 - var(--scene-entry)); will-change: transform, opacity; }
.backstage__portrait { position: absolute; height: 127svh; aspect-ratio: 941 / 1672; right: 7vw; bottom: -37svh; }
.backstage__portrait img { display: block; width: 100%; height: 100%; object-fit: contain; animation: portrait-float 10s ease-in-out infinite; filter: drop-shadow(-15px 8px 10px #21140c30); }
.backstage__content { position: absolute; z-index: 5; left: 5vw; top: 7svh; bottom: 6svh; width: min(46vw, 660px); display: flex; flex-direction: column; gap: 24px; }
.backstage__copy { position: relative; flex: 0 0 auto; width: 100%; padding: 28px 30px 30px; transform: translate3d(calc(var(--scene-entry) * -100px), 0, 0) rotate(-1.5deg); opacity: calc(1 - var(--scene-entry)); will-change: transform, opacity; filter: drop-shadow(8px 12px 0 #231b1b28); }
.backstage__copy::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(#7a512414 .7px, transparent .9px) 0 0 / 5px 5px, #f7e8ca; clip-path: polygon(1% 1%, 25% 0, 38% 1%, 61% 0, 83% 2%, 100% 0, 99% 23%, 100% 50%, 99% 72%, 100% 98%, 89% 97%, 77% 100%, 66% 98%, 53% 100%, 41% 97%, 28% 99%, 18% 97%, 0 100%, 1% 77%, 0 56%, 1% 31%); }
.backstage__copy::after { content: ''; position: absolute; width: 100px; height: 29px; right: 13%; top: -13px; background: #c7aa77b3; border: 1px solid #efd9ae77; rotate: 13deg; box-shadow: 0 2px 2px #25130b22; }
.backstage__title { font-family: 'Knewave', Impact, sans-serif; font-size: clamp(44px, 5.6vw, 82px); text-transform: uppercase; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; margin: 0; white-space: nowrap; outline: none; }
.backstage__title > span { display: inline-block; color: #30201f; text-shadow: 2px 3px 0 #f3b62c; }
.backstage__title > span:last-child { color: #c72820; }
.backstage__title::after { content: ''; display: block; height: 8px; margin-top: 12px; background: #c72820; clip-path: polygon(0 35%, 98% 0, 100% 45%, 3% 100%); }
.backstage__socials { position: relative; flex: 0 0 auto; width: 100%; transform: translate3d(calc(var(--scene-entry) * -60px), calc(var(--scene-entry) * 30px), 0) rotate(0deg); opacity: calc(1 - var(--scene-entry)); will-change: transform, opacity; }
.backstage__handle { display: table; background: #30201f; color: #fff3d9; font: 800 clamp(19px, 1.8vw, 27px) Arial, sans-serif; margin: 0 0 16px; padding: 8px 15px; letter-spacing: -.025em; rotate: 0deg; box-shadow: 3px 3px 0 #e69c20; }
.social-links { display: flex; gap: clamp(7px, 1vw, 16px); align-items: center; }
.social-links a { --sticker-turn: -1.5deg; color: #30201f; background: #fff1d4; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(74px, 6.3vw, 94px); height: clamp(78px, 6.5vw, 98px); border: 2px solid #30201f; gap: 8px; font-size: 13px; font-weight: 800; rotate: var(--sticker-turn); box-shadow: 3px 4px 0 #30201f; transition: translate .25s, rotate .25s, box-shadow .25s; }
.social-links a:nth-child(2) { --sticker-turn: 1.5deg; background: #f6a929; border-radius: 50% 48% 44% 49%; }
.social-links a:nth-child(3) { --sticker-turn: -1deg; background: #c73b29; color: #fff5df; }
.social-links a:nth-child(4) { --sticker-turn: 2deg; border-radius: 48% 46% 49% 45%; }
.social-links a:nth-child(5) { --sticker-turn: -1.5deg; background: #e2ae43; }
.social-links svg { width: 32px; height: 32px; }
.social-links a:hover { translate: 0 -8px; rotate: 0deg; box-shadow: 5px 9px 0 #30201f; }
.social-links a:focus-visible, .backstage__contact a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.backstage__contact { position: relative; flex: 0 0 auto; width: 100%; margin-top: auto; padding: 18px 26px 18px 42px; background: #f8e8ca; color: #30201f; border-left: 12px solid #c43b28; transform: translate3d(0, calc(var(--scene-entry) * 70px), 0) rotate(0deg); opacity: calc(1 - var(--scene-entry)); will-change: transform, opacity; box-shadow: 5px 7px 0 #30201f; }
.backstage__contact::before { content: ''; position: absolute; top: 0; bottom: 0; left: 12px; border-left: 2px dashed #30201f55; }
.backstage__contact::after { content: ''; position: absolute; right: -5px; top: 0; bottom: 0; width: 10px; background: radial-gradient(circle at 100% 50%, transparent 4px, #f8e8ca 4.5px) 0 0 / 10px 15px; }
.contact-caption { color: #b22f21; font-size: clamp(12px, 1.1vw, 16px); font-weight: 900; letter-spacing: .06em; margin: 0 0 12px; }
.contact-caption span { margin-left: 7px; }
.contact-whatsapp { display: flex; align-items: center; gap: 13px; color: #30201f; text-decoration: none; }
.contact-whatsapp > svg { width: 34px; height: 34px; flex: 0 0 auto; }
.contact-whatsapp small { display: block; font-size: 15px; margin-bottom: 4px; }
.contact-whatsapp strong { display: block; font-family: Arial, sans-serif; font-weight: 900; font-size: clamp(26px, 2.5vw, 38px); white-space: nowrap; letter-spacing: -.035em; }
.contact-arrow { margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #c43b28; color: #fff1d4; font-size: 27px; transition: rotate .2s; }
.contact-whatsapp:hover .contact-arrow { rotate: 45deg; }
.contact-email { display: block; color: #30201f; text-decoration: none; font-size: clamp(16px, 1.4vw, 21px); font-weight: 600; margin-top: 12px; border-top: 1px dashed #30201f66; padding-top: 10px; white-space: nowrap; }
.contact-email span { float: right; color: #b22f21; }
.contact-email:hover { color: #b22f21; }
.metric { container-type: inline-size; position: absolute; z-index: 4; pointer-events: none; transform: translate3d(0, calc(var(--scene-entry) * 140px), 0) rotate(calc(var(--scene-entry) * -12deg)); opacity: calc(1 - var(--scene-entry)); will-change: transform, opacity; }
.metric__float { position: relative; width: 100%; height: 100%; animation: sign-sway 8s ease-in-out infinite; transform-origin: 50% 100%; }
.metric img { display: block; width: 100%; height: auto; filter: drop-shadow(6px 10px 8px #18110a45); }
.metric--followers { width: min(27vw, 42svh, 380px); aspect-ratio: 1199 / 1312; left: 50vw; bottom: -1svh; }
.metric--plays { width: min(24vw, 37svh, 330px); aspect-ratio: 1212 / 1298; right: 1vw; bottom: 5svh; }
.metric--plays .metric__float { animation-delay: -3s; }
.metric__ink { position: absolute; text-align: center; width: 74%; left: 9%; top: 20%; transform: rotate(-14deg); font-family: Impact, 'Arial Black', sans-serif; color: #29211f; }
.metric__ink strong { display: block; font-size: 20cqw; line-height: .9; letter-spacing: -.02em; font-weight: 400; }
.metric__unit { display: block; font-size: 12cqw; font-weight: 400; line-height: 1; margin: 2px 0 5px; letter-spacing: .01em; }
.metric__label { display: block; font-size: 7.8cqw; line-height: 1.05; font-weight: 400; white-space: nowrap; }
.metric__detail { display: block; font-size: 6.8cqw; line-height: 1.05; white-space: nowrap; font-weight: 400; margin-top: 3px; }
.metric--plays .metric__ink { top: 13%; width: 80%; left: 10%; transform: rotate(0deg); color: #fff7df; }
.metric--plays .metric__ink strong { color: #ffc13e; font-size: 29cqw; }
.metric--plays .metric__unit { font-size: 12cqw; margin-bottom: 7px; }
.metric--plays .metric__label, .metric--plays .metric__detail { font-size: 8cqw; }
.backstage .section-step--previous { left: auto; right: max(24px, env(safe-area-inset-right)); top: max(24px, env(safe-area-inset-top)); bottom: auto; transform: none; width: 40px; height: 40px; }
.backstage .backstage__motion { z-index: 7; background: #29211fbb; top: 76px; bottom: auto; }
.backstage__copy { animation: paper-breathe 7s ease-in-out infinite; transform-origin: 50% 0; }
.backstage__contact { animation: ticket-breathe 9s -3s ease-in-out infinite; }
.backstage__handle { animation: ticket-breathe 8s -2s ease-in-out infinite; }
.social-links a { animation: sticker-breathe 5s ease-in-out infinite; }
.social-links a:nth-child(2) { animation-delay: -.8s; }
.social-links a:nth-child(3) { animation-delay: -1.6s; }
.social-links a:nth-child(4) { animation-delay: -2.4s; }
.social-links a:nth-child(5) { animation-delay: -3.2s; }
.social-links a:hover, .social-links a:focus-visible { animation-play-state: paused; }
.motion-paused .backstage *, .backstage:not(.is-current) * { animation-play-state: paused; }
@keyframes paper-breathe { 0%, 100% { translate: 0 0; rotate: -.3deg; } 50% { translate: 0 -5px; rotate: .3deg; } }
@keyframes ticket-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes sticker-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sign-sway { 0%, 100% { rotate: -1deg; } 50% { rotate: 1deg; } }



@media (max-height: 620px) and (orientation: landscape) {
  .backstage__content { left: 5vw; top: 5svh; bottom: 5svh; width: 46vw; gap: 13px; }
  .backstage__copy { padding: 15px 22px 20px; }
  .backstage__title { font-size: min(12svh, 5.8vw); white-space: nowrap; line-height: 1.05; }
  .backstage__title::after { height: 5px; margin-top: 5px; }
  .backstage__title > span { display: inline-block; }
  .backstage__handle { font-size: 14px; margin-bottom: 9px; padding: 5px 9px; }
  .social-links { gap: 10px; }
  .social-links a { width: 47px; height: 47px; min-width: 44px; min-height: 44px; font-size: 8px; gap: 3px; border-width: 1px; box-shadow: 2px 2px 0 #30201f; }
  .social-links svg { width: 21px; height: 21px; }
  .backstage__contact { padding: 10px 13px 10px 25px; border-left-width: 7px; }
  .backstage__contact::before { left: 7px; }
  .contact-caption { font-size: 9px; margin-bottom: 6px; }
  .contact-whatsapp > svg { width: 22px; height: 22px; }
  .contact-whatsapp strong { font-size: 21px; }
  .contact-whatsapp small { font-size: 10px; }
  .contact-arrow { width: 28px; height: 28px; font-size: 20px; }
  .contact-email { font-size: 13px; margin-top: 6px; padding-top: 6px; }
  .metric--followers { width: 48svh; left: 49vw; bottom: -5svh; }
  .metric--plays { width: 44svh; bottom: -3svh; }
  .metric--followers .metric__ink { top: 12%; }
  .metric--plays .metric__ink { top: 11%; }

}
/* The next paper scene receives the outgoing street mural. */
.backstage { --scene-exit: 0; }
.backstage__content { transform: translate3d(calc(var(--scene-exit) * -90px), calc(var(--scene-exit) * -70px), 0); opacity: calc(1 - var(--scene-exit)); }
.backstage__portrait-wrap { transform: translate3d(calc(var(--scene-entry) * 90px + var(--scene-exit) * 90px), calc(var(--scene-entry) * 100px + var(--scene-exit) * -120px), 0); opacity: calc(1 - var(--scene-entry) - var(--scene-exit)); }
.metric { transform: translate3d(0, calc(var(--scene-entry) * 140px - var(--scene-exit) * 120px), 0) rotate(calc(var(--scene-entry) * -12deg + var(--scene-exit) * 8deg)); opacity: calc(1 - var(--scene-entry) - var(--scene-exit)); }
.backstage .backstage__next { bottom: 22px; background: #29211fbb; }
.biography { isolation: isolate; background: #eee9d3; color: #262823; --bio-entry: 1; }
.biography__camera { position: absolute; inset: -1%; transform: translate3d(0, calc(var(--bio-entry) * -12svh), 0) scale(calc(1 + var(--bio-entry) * .08)); opacity: calc(1 - var(--bio-entry) * .35); will-change: transform, opacity; }
.biography__background, .biography__background img { display: block; width: 100%; height: 100%; }
.biography__background img { object-fit: cover; animation: biography-paper-drift 18s ease-in-out infinite alternate; }
.biography__portrait-wrap { position: absolute; z-index: 2; inset: 0; pointer-events: none; transform: translate3d(calc(var(--bio-entry) * 100px), calc(var(--bio-entry) * 140px), 0); opacity: 1; will-change: transform; }
.biography__portrait { position: absolute; height: 88svh; aspect-ratio: 941 / 1672; bottom: 0; right: 3vw; }
.biography__portrait img { display: block; width: 100%; height: 100%; object-fit: contain; animation: portrait-float 10s -3s ease-in-out infinite; filter: drop-shadow(-8px 3px 0 #f4eedc) drop-shadow(-12px 6px 0 #143d3b22); }
.biography__snapshots { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: calc(1 - var(--bio-entry)); transform: translateY(calc(var(--bio-entry) * 130px)); }
.biography__snapshot { position: absolute; width: min(15vw, 220px); margin: 0; padding: 10px 10px 12px; background: #f9f2d9; box-shadow: 7px 8px 0 #243d3620, 0 5px 16px #233c3720; animation: snapshot-sway 10s ease-in-out infinite; }
.biography__snapshot > div { height: 21svh; min-height: 130px; background: #1d3231; overflow: hidden; }
.biography__snapshot img { width: 100%; height: 165%; display: block; object-fit: cover; object-position: center top; filter: grayscale(1) sepia(.2) contrast(1.05); }
.biography__snapshot figcaption { font: 800 10px Arial, sans-serif; letter-spacing: .08em; margin-top: 10px; }
.biography__snapshot--one { left: 59vw; top: 21svh; rotate: -12deg; }
.biography__snapshot--one img { width: 145%; height: 150%; max-width: none; margin-left: -22%; }
.biography__snapshot--two { width: min(12vw, 175px); right: 1vw; top: 52svh; rotate: 11deg; animation-delay: -4s; }
.biography__snapshot--two > div { height: 18svh; }
.biography__snapshot--two img { height: 230%; }
.biography__content { position: absolute; z-index: 3; left: 6vw; top: 7svh; width: min(51vw, 780px); transform: translate3d(calc(var(--bio-entry) * -70px), 0, 0); opacity: calc(1 - var(--bio-entry)); will-change: transform, opacity; }
.biography__title { margin: 0 0 28px; font-family: Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 6.3vw, 96px); line-height: .92; letter-spacing: -.015em; outline: none; }
.biography__title > span { color: #008f91; }
.biography__tabs { display: none; }
.biography__story { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 28px; }
.bio-chapter { border-top: 1px solid #26282366; padding-top: 12px; }
.bio-chapter h3 { margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.bio-chapter h3 > span { display: block; color: #008f91; font: 400 32px/1 Impact, 'Arial Narrow', sans-serif; letter-spacing: -.01em; margin-bottom: 5px; }
.bio-chapter p { margin: 0; font-size: clamp(15px, 1.14vw, 18px); line-height: 1.42; }
.bio-chapter strong { font-weight: 800; }
.bio-chapter--now { background: #008f91; color: #fff8e2; padding: 16px 18px; border: 0; rotate: -2deg; align-self: start; box-shadow: 5px 6px 0 #263a3120; }
.bio-chapter--now h3 > span { color: #fff8e2; font-size: 42px; }
.bio-chapter--now p { font-size: clamp(17px, 1.4vw, 21px); }
.biography .biography__back { z-index: 7; left: auto; right: 24px; top: 24px; bottom: auto; transform: none; background: #262823; color: #fff6df; width: 40px; height: 40px; }
.biography .biography__motion { z-index: 7; right: 24px; top: 76px; bottom: auto; background: #262823; color: #fff6df; }
body[data-active-section="2"] .section-nav span { background: #008f91; }
@keyframes biography-paper-drift { from { transform: scale(1.01) translateY(0); } to { transform: scale(1.035) translateY(-.4%); } }
@keyframes snapshot-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-height: 620px) {
  .biography__tabs { display: flex; gap: 0; margin: 0 0 16px; border-bottom: 2px solid #008f91; }
  .biography__tabs button { min-height: 44px; flex: 1; padding: 7px; border: 0; background: #e9e3cc; color: #262823; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
  .biography__tabs [aria-selected="true"] { background: #008f91; color: #fff8e2; }
  .biography__tabs button:focus-visible { outline: 3px solid #262823; outline-offset: 3px; }
  .bio-chapter[hidden] { display: none; }
  .biography__story { display: block; padding: 15px 17px; background: #f5f0dceF; box-shadow: 4px 5px 0 #263a3115; }
  .bio-chapter { padding: 0; border: 0; }
  .bio-chapter h3 { font-size: 11px; margin-bottom: 10px; }
  .bio-chapter h3 > span { display: inline-block; margin: 0 8px 0 0; font-size: 24px; vertical-align: middle; }
  .bio-chapter p { font-size: 16px; line-height: 1.43; }
  .bio-chapter--now { color: #262823; background: transparent; box-shadow: none; rotate: none; }
  .bio-chapter--now h3 > span { color: #008f91; }
  .bio-chapter--now p { font-size: 19px; }
}


@media (max-height: 620px) and (orientation: landscape) {
  .biography__content { left: 5vw; top: 5svh; width: 59vw; }
  .biography__title { font-size: min(10svh, 4.7vw); margin-bottom: 14px; }
  .biography__title br { display: none; }
  .biography__tabs { max-width: 430px; margin-bottom: 10px; }
  .biography__tabs button { min-height: 30px; padding: 5px 8px; }
  .biography__story { padding: 12px 15px; }
  .bio-chapter p { font-size: 14px; line-height: 1.4; }
  .biography__portrait { height: 87svh; bottom: 0; right: 0; }
  .biography__snapshot--one { display: none; }
  .biography__snapshot--two { width: 12vw; top: 49svh; right: 3vw; }
}
.motion-paused .biography *, .biography:not(.is-current) * { animation-play-state: paused; }
.section-step { position: absolute; z-index: 6; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff66; border-radius: 50%; color: #fff8e8; background: #00526445; backdrop-filter: blur(8px); cursor: pointer; transition: background .2s; }
.section-step:hover { background: #00526490; }
.hero__explore { color: #fff; border-color: #ffffff4d; background: linear-gradient(135deg, #ffffff26, #ffffff08), #20202026; box-shadow: 0 4px 18px #00000014, inset 0 1px 0 #ffffff1a; backdrop-filter: blur(18px) saturate(.45); -webkit-backdrop-filter: blur(18px) saturate(.45); }
.hero__explore:hover { background: linear-gradient(135deg, #ffffff33, #ffffff12), #20202030; }
.hero__explore span { display: none; }
.hero__explore svg { animation: explore-arrow 2s ease-in-out infinite; }
.motion-paused .hero__explore svg, .hero:not(.is-current) .hero__explore svg { animation-play-state: paused; }
@keyframes explore-arrow { 0%, 100% { translate: 0 -3px; opacity: .7; } 55% { translate: 0 3px; opacity: 1; } 80% { translate: 0 6px; opacity: 0; } 81% { translate: 0 -4px; opacity: 0; } }
.section-step--previous { background: #30251db3; border-color: #ffb34b66; color: #ffd8a3; }
.section-step--previous:hover { background: #30251de6; }
.section-step:focus-visible, .section-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.section-nav { position: fixed; z-index: 10; right: max(18px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; gap: 3px; }
.section-nav button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.section-nav span { width: 6px; height: 6px; border-radius: 100px; background: #fff; box-shadow: 0 0 0 1px #003a4940; opacity: .5; transition: height .3s, opacity .3s, background .3s; }
.section-nav [aria-current="true"] span { height: 21px; opacity: 1; }
body[data-active-section="1"] .section-nav span { background: #f49b28; }
.is-loading .section-nav { visibility: hidden; }
.whatsapp-float { position: fixed; z-index: 20; right: max(24px, env(safe-area-inset-right)); bottom: var(--whatsapp-bottom, max(24px, env(safe-area-inset-bottom))); display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #ffffff80; border-radius: 50%; background: #20b95b; color: #fff; box-shadow: 0 5px 18px #00000026; text-decoration: none; transition: background .2s, scale .2s; }
.whatsapp-float svg { width: 31px; height: 31px; }
@media (hover: hover) and (pointer: fine) { .whatsapp-float:hover { background: #149b49; scale: 1.05; } }
.whatsapp-float:active { background: #149b49; scale: .96; }
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #174f32; }
.is-loading .whatsapp-float { visibility: hidden; }
.hero > .motion-toggle { bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px)); }
@media (max-width: 1000px) {
  .whatsapp-float { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 50px; height: 50px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}
.motion-paused .hero__background img, .motion-paused .hero__portrait img, .motion-paused .hero__signature img, .motion-paused .hero__signature video { animation-play-state: paused; }
.hero:not(.is-current) .hero__background img, .hero:not(.is-current) .hero__portrait img, .hero:not(.is-current) .hero__signature img, .hero:not(.is-current) .hero__signature video { animation-play-state: paused; }
@keyframes sky-drift { from { transform: scale(1.02) translate3d(-.4%, 0, 0); } to { transform: scale(1.055) translate3d(.4%, -.5%, 0); } }
@keyframes portrait-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -9px, 0) rotate(-.2deg); } }
@keyframes signature-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.hero__finish { position: absolute; z-index: 3; inset: auto 0 0; height: 13%; pointer-events: none; background: linear-gradient(transparent, #005b6922); }
.motion-toggle { position: absolute; z-index: 4; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #fff4d466; border-radius: 50%; background: #00556538; color: #fff5df; backdrop-filter: blur(12px); cursor: pointer; transition: background .2s, transform .2s; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: #00556570; transform: scale(1.05); }
.motion-toggle:focus-visible { outline: 2px solid #fff5df; outline-offset: 5px; }
.icon-play { display: none; }
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }
.site-loader { display: none; position: fixed; z-index: 100; inset: 0; place-items: center; background: #000; opacity: 1; transition: opacity .5s ease; }
.is-loading .site-loader { display: grid; }
.site-loader__content { width: min(62vw, 290px); text-align: center; }
.site-loader__signature { position: relative; width: 100%; aspect-ratio: 1200 / 586; animation: loader-reveal .95s cubic-bezier(.16,1,.3,1) both; }
.site-loader__signature img, .site-loader__signature video { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.site-loader__video { position: absolute; inset: 0; opacity: 0; }
.site-loader__signature.is-playing .site-loader__video { opacity: 1; }
.site-loader__signature.is-playing .site-loader__still { opacity: 0; }
.site-loader__track { position: relative; width: 90px; height: 2px; margin: 36px auto 0; overflow: hidden; border-radius: 2px; background: #ffffff30; }
.site-loader__track span { display: block; width: 42%; height: 100%; background: #ffe6a9; animation: loader-travel 1.15s ease-in-out infinite; }
.site-loader.is-leaving { opacity: 0; pointer-events: none; }
.is-loading { overflow: hidden; }
.is-loading:not(.is-revealing) .hero__background, .is-loading:not(.is-revealing) .hero__signature, .is-loading:not(.is-revealing) .hero__portrait { animation-play-state: paused; }
@keyframes loader-reveal { from { opacity: .55; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes loader-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@keyframes loader-travel { from { transform: translateX(-110%); } to { transform: translateX(350%); } }
@keyframes background-arrive { from { transform: scale(1.06); } to { transform: scale(1.018); } }
@keyframes signature-arrive { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes portrait-arrive { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }


@media (max-height: 540px) and (orientation: landscape) {
  .hero__signature { top: 5svh; width: 36svh; }
  .hero__portrait { width: 124svh; top: 32svh; }

}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__background { transform: none; }
  .site-sections { scroll-behavior: auto; }
}



.section-nav__label, .section-nav__icon, .section-nav > .motion-toggle { display: none; }
.biography__layout { display: contents; }

.backstage__stage { display: contents; }