/* Direção cinematográfica: luz, profundidade e fotografias integradas. */
.cinematic { --glow: #ffbc24; --glow-soft: #ffc92840; background: #090a09; }
.cinematic main { overflow: clip; }
.cinematic .site-header { background: #090a09e8; border-bottom-color: #ffd34d17; }
.cinematic .site-header.is-scrolled { background: #090a09f5; }
.cinematic .button { position: relative; overflow: hidden; border-radius: 999px; }
.cinematic .button-yellow { box-shadow: 0 6px 35px #ffbd281a, inset 0 1px 0 #fff8; }
.cinematic .button-yellow::before { content: ''; position: absolute; inset: -80% auto -80% -65%; width: 35%; background: linear-gradient(90deg, transparent, #ffffff7a, transparent); transform: skewX(-23deg); pointer-events: none; }
.cinematic.motion-on .button-yellow::before { animation: button-light 7s ease-in-out infinite; }
.cinematic .button-yellow:hover { box-shadow: 0 8px 48px #ffbd2845; transform: translateY(-2px); }
.cinematic .hero { isolation: isolate; background: #090a09; padding-top: clamp(34px, 4.5vw, 70px); }
.hero-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-atmosphere::before { content: ''; position: absolute; inset: -25%; background: radial-gradient(ellipse at var(--light-x, 72%) var(--light-y, 42%), #ffae2026, transparent 44%), radial-gradient(ellipse at 74% 78%, #e8820914, transparent 38%); }
.hero-atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #090a095e, transparent 55%), linear-gradient(0deg, #090a09, transparent 24%); }
.light-column { position: absolute; display: block; width: 180px; height: 145%; top: -46%; right: 12%; background: linear-gradient(90deg, transparent, #ffd05122 35%, #ffe38c4a 50%, #ffd0511c 65%, transparent); filter: blur(21px); transform: rotate(29deg); transform-origin: top center; opacity: .7; }
.light-column.second { right: 30%; width: 45px; height: 130%; filter: blur(10px); opacity: .4; transform: rotate(-22deg); }
.light-column.third { right: 2%; top: -10%; width: 9px; height: 96%; background: linear-gradient(180deg, transparent, #ffce5ac2, transparent); filter: blur(2px); opacity: .45; transform: rotate(43deg); }
.motion-on .hero-atmosphere::before { animation: atmosphere-breathe 10s ease-in-out infinite alternate; }
.motion-on .light-column { animation: studio-light 12s ease-in-out infinite alternate; }
.motion-on .light-column.second { animation: studio-light-secondary 15s ease-in-out infinite alternate; }
.motion-on .light-column.third { animation: fine-light 9s ease-in-out infinite alternate; }
.cinematic .hero-layout { grid-template-columns: 1fr 1.05fr; gap: 0; }
.cinematic .hero-copy { z-index: 5; }
.cinematic .hero h1 { font-size: clamp(4.4rem, 7.9vw, 7.8rem); text-shadow: 0 8px 35px #090a0940; }
.cinematic .hero h1 .accent, .cinematic .accent-word { color: #ffc928; background: linear-gradient(110deg, #ffd44a 10%, #ffbd1d 35%, #fff1b8 48%, #ffd651 59%, #ffb81d 80%); background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cinematic.motion-on .hero h1 .accent { animation: enter-up 1s var(--ease) .22s both, type-light 9s ease-in-out 1.2s infinite; }
.cinematic .hero-description { color: #c4c2b9; max-width: 375px; }
.cinematic .hero-media { position: relative; z-index: 2; min-height: 650px; margin-left: -10%; margin-right: -12%; background: none; border: none; border-radius: 0; overflow: visible; align-self: stretch; }
.cinematic .hero-media::after { display: none; }
.hero-aura { position: absolute; z-index: 0; inset: 4% -6% 0; pointer-events: none; }
.aura-core { position: absolute; width: 82%; height: 76%; top: 6%; left: 6%; border-radius: 50%; background: radial-gradient(ellipse at 58% 48%, #ffb31c2b, #c7770716 48%, transparent 70%); filter: blur(22px); }
.motion-on .aura-core { animation: aura-breathe 8s ease-in-out infinite alternate; }
.light-orbit { position: absolute; inset: 19% 1% 18%; border-radius: 50%; border: 1px solid #ffce432c; transform: rotate(-32deg); box-shadow: 0 0 35px #ffc2220c, inset 0 0 45px #ffbb1312; }
.light-orbit::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid transparent; border-top-color: #ffe5a6ba; border-right-color: #ffc3284d; filter: drop-shadow(0 0 6px #ffb91c); }
.light-orbit::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: radial-gradient(circle at 83% 14%, #fff2cf 0 2px, #ffbd2985 3px, #ffb92b20 10px, transparent 24px); }
.light-orbit.orbit-two { inset: 9% 12% 10%; transform: rotate(27deg); opacity: .52; border-color: #ffca3333; }
.light-orbit.orbit-two::before { border-top-color: transparent; border-right-color: #ffd261bd; border-bottom-color: #ffcc292e; }
.motion-on .light-orbit::before, .motion-on .light-orbit::after { animation: orbit-light 19s linear infinite; transform-origin: center; }
.motion-on .light-orbit.orbit-two { animation: orbit-sway 13s ease-in-out infinite alternate; }
.hero-portrait-wrap { position: absolute; z-index: 2; inset: -1% -3% -3%; }
.hero-foreground { width: 100%; height: 100%; transform: perspective(1200px) translate3d(var(--look-x, 0px), var(--hero-parallax-y, 0px), 0) rotateX(var(--look-rx, 0deg)) rotateY(var(--look-ry, 0deg)); transform-origin: 50% 58%; transition: transform .18s ease-out; }
.cinematic .hero-photo { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; object-position: center bottom; transform: none; filter: drop-shadow(0 20px 24px #0007) drop-shadow(0 0 18px #ffba171a); -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent), linear-gradient(180deg, transparent, #000 13%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent), linear-gradient(180deg, transparent, #000 13%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.motion-on .hero-portrait-wrap { animation: portrait-float 8s ease-in-out infinite; }
.cinematic .hero-tag { z-index: 4; top: 7%; left: auto; right: 7%; background: #1b170b99; color: #ffdf80; border-color: #ffd35366; border-radius: 999px; padding: 11px 17px; box-shadow: 0 0 30px #ffb20b14; letter-spacing: .025em; }
.motion-on .hero-tag { animation: badge-float 6s ease-in-out infinite; }
.cinematic .hero-media figcaption { z-index: 4; bottom: 5%; left: -2%; right: auto; padding: 12px 20px; background: linear-gradient(90deg, #15150eed, #15150e9c); border: 1px solid #ecd17533; border-left: 2px solid #ffd358; border-radius: 0 20px 20px 20px; backdrop-filter: blur(16px); box-shadow: 0 18px 45px #0003; transform: rotate(-3deg); }
.cinematic .hero-media figcaption p { font-size: clamp(1.125rem, 1.8vw, 1.4375rem); }
.cinematic .hero-media figcaption strong { color: #ffe39b; }
.cinematic .photo-mark { display: none; }
.cinematic .hero-bottom { position: relative; z-index: 6; padding-block: 27px 34px; border-top: 1px solid #f7db6817; }
.hero-controls { display: flex; align-items: center; gap: 32px; }
.motion-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 0; color: #c9c8bd; border: none; border-bottom: 1px solid transparent; background: none; font-size: .8125rem; line-height: 1.3; }
.motion-toggle svg { width: 14px; height: 14px; }
.motion-toggle:hover { color: #ffdd76; border-bottom-color: #d6b04d80; }
.motion-toggle[aria-pressed="true"] .pause-symbol, .motion-toggle[aria-pressed="false"] .play-symbol { display: none; }
.cinematic .service-rail { position: relative; z-index: 3; transform: skewY(-1.1deg); margin-block: 13px; padding-block: 22px; background: linear-gradient(100deg, #ffca28, #ffdd68 48%, #ffc223); box-shadow: 0 -4px 35px #ffce1912, 0 12px 40px #ffc0190d; }
.cinematic .rail-group { min-width: 100vw; justify-content: space-around; }
.cinematic .rail-track { transform: none; }
.cinematic.motion-on .rail-track { animation: rail-flow 32s linear infinite; }
.cinematic .services { position: relative; background: radial-gradient(ellipse at 90% 10%, #ffca0905, transparent 42%); }
.cinematic .services-intro .muted { color: #e8ce7d; }
.cinematic .service-row { padding-inline: 18px; margin-inline: -18px; isolation: isolate; border-bottom-color: #eee0a727; border-radius: 10px 10px 0 0; overflow: hidden; }
.cinematic .service-row::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 420px 200px at var(--row-x, 50%) var(--row-y, 50%), #fabb2022, transparent 75%); opacity: 0; transition: opacity .45s; pointer-events: none; }
.cinematic .service-row::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #fff0b7 50%, #ffca29 65%, transparent); transform: translateX(-110%); opacity: 0; pointer-events: none; }
.cinematic .service-row:hover::before, .cinematic .service-row:focus-visible::before { opacity: 1; }
.cinematic .service-row:hover::after, .cinematic .service-row:focus-visible::after { opacity: 1; }
.cinematic.motion-on .service-row:hover::after { animation: service-light 2.8s ease-in-out infinite; }
.cinematic .service-row h3 { transition: color .3s, transform .5s var(--ease); }
.cinematic .service-row:hover h3 { transform: translateX(5px); }
.cinematic .service-arrow { border-color: #c2a04459; color: #efdca1; }
.cinematic .service-row:hover .service-arrow { box-shadow: 0 0 28px #ffcc2840; }
.cinematic .contact-inset { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(125deg, #1d1b13, #11120f 58%, #18170f); border-radius: 28px; border-color: #cfa63645; box-shadow: 0 25px 90px #0004, inset 0 0 70px #ffc92805; }
.cinematic .contact-inset::before { content: ''; position: absolute; z-index: -1; width: 55%; height: 1px; left: -55%; top: 0; background: linear-gradient(90deg, transparent, #fff0a9, #ffc12c, transparent); box-shadow: 0 0 16px #ffbf3570; }
.cinematic.motion-on .contact-inset::before { animation: form-light 9s ease-in-out infinite; }
.cinematic .field input, .cinematic .field select, .cinematic .field textarea { background: #22221899; border-radius: 10px; border-color: #635b3d66; }
.cinematic .field input:focus, .cinematic .field select:focus, .cinematic .field textarea:focus { box-shadow: 0 0 20px #ffc92812; }
.cinematic .field select option { background: #1e1e1a; }
.cinematic .about { position: relative; isolation: isolate; color: #f8f7ed; background: #0d0e0b; border-block: 1px solid #ffdb681a; }
.cinematic .about::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 17% 47%, #dc9b1a24, transparent 52%), radial-gradient(ellipse at 80% 60%, #d9970f08, transparent 55%); }
.cinematic.motion-on .about::before { animation: about-light 11s ease-in-out infinite alternate; }
.cinematic .about-layout { grid-template-columns: 1.1fr 1fr; gap: clamp(26px, 6vw, 94px); }
.cinematic .about-media { position: relative; isolation: isolate; min-height: 515px; margin-left: -13%; margin-right: -7%; overflow: visible; border: 0; border-radius: 0; background: none; transform: rotate(-4deg); }
.cinematic .about-media::before { content: ''; position: absolute; z-index: -1; inset: 7% 0 0 3%; border: 1px solid #c69d4140; border-left-color: #ffe0979c; border-radius: 50%; transform: rotate(-18deg); box-shadow: -9px 0 33px #ffbd160d; }
.cinematic .about-media::after { content: ''; position: absolute; pointer-events: none; z-index: 3; left: 4%; right: 3%; top: 13%; bottom: 15%; border-radius: 50%; background: linear-gradient(120deg, transparent 38%, #ffca4026 47%, #ffe59824 50%, transparent 59%); opacity: .5; -webkit-mask-image: radial-gradient(ellipse, #000, transparent 70%); mask-image: radial-gradient(ellipse, #000, transparent 70%); }
.cinematic.motion-on .about-media::after { animation: photo-light 8s ease-in-out infinite alternate; }
.cinematic .about-photo { position: absolute; inset: -6% -8%; width: 116%; max-width: none; height: 112%; object-fit: cover; object-position: 50% 50%; transform: translate3d(0, var(--about-y, 0px), 0) scale(var(--about-scale, 1.04)); filter: saturate(.91) contrast(1.04); border-radius: 0; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, #000e 57%, transparent 74%); mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, #000e 57%, transparent 74%); }
.cinematic .about-copy { position: relative; z-index: 3; }
.cinematic .about-copy .eyebrow { color: #dec06a; }
.cinematic .about-copy .section-heading { font-size: clamp(2.7rem, 4.6vw, 4.25rem); }
.cinematic .about-description { color: #c3c2b3; }
.cinematic .about-values { border-color: #d5c07c38; }
.cinematic .about-values li { border-color: #d5c07c38; color: #e9e5d5; }
.cinematic .about-values span { color: #b39c57; }
.cinematic .process { background: radial-gradient(ellipse at 50% 100%, #ffcc1709, transparent 62%); }
.cinematic .process-line-fill { box-shadow: 0 0 12px #ffd445ad, 0 0 26px #ffba3f24; }
.cinematic .process-step.is-active::before { box-shadow: 0 0 0 1px #eaca67, 0 0 15px #ffcc299c; }
.cinematic .final-cta { isolation: isolate; background: #ffca28; }
.cinematic .final-cta::before { content: ''; position: absolute; z-index: -1; width: 70%; height: 210%; top: -90%; right: -10%; background: linear-gradient(90deg, transparent 15%, #fff6c373 47%, #ffdc6866 53%, transparent 77%); transform: rotate(35deg); pointer-events: none; }
.cinematic .final-cta::after { content: ''; position: absolute; z-index: -1; width: 700px; height: 700px; right: -240px; bottom: -430px; border: 1px solid #1e1c0838; border-radius: 50%; box-shadow: 0 0 0 50px #392b0810, 0 0 0 110px #392b0809; pointer-events: none; }
.cinematic.motion-on .final-cta::before { animation: final-light 12s ease-in-out infinite alternate; }
.cinematic .site-footer { background: #090a09; }
.cinematic .whatsapp-float { box-shadow: 0 5px 26px #0005, 0 0 22px #ffc92828; }
.cinematic.motion-on .reveal.is-pending { opacity: 0; transform: translate3d(0, 54px, 0) scale(.975); }
.cinematic.motion-on .reveal { transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.cinematic.motion-on .about-media.reveal.is-pending { transform: translate3d(-45px, 35px, 0) rotate(-7deg) scale(.97); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
.tab-hidden *, .tab-hidden *::before, .tab-hidden *::after,
.scene-idle *, .scene-idle *::before, .scene-idle *::after { animation-play-state: paused !important; }
.scene-idle::before, .scene-idle::after { animation-play-state: paused !important; }
.motion-paused .hero-foreground, .motion-paused .hero-photo, .motion-paused .about-photo { transform: none !important; }
.motion-paused .scroll-progress { display: none; }
.motion-paused .reveal { opacity: 1; }
.motion-paused .reveal.is-pending { transform: none; }

@keyframes studio-light { from { transform: rotate(22deg) translateX(-20px); opacity: .4; } to { transform: rotate(37deg) translateX(65px); opacity: .92; } }
@keyframes studio-light-secondary { from { transform: rotate(-26deg); opacity: .2; } to { transform: rotate(-11deg); opacity: .6; } }
@keyframes fine-light { from { transform: rotate(36deg) translateX(-40px); opacity: .12; } to { transform: rotate(46deg) translateX(40px); opacity: .65; } }
@keyframes atmosphere-breathe { from { opacity: .6; transform: scale(1); } to { opacity: 1; transform: scale(1.11); } }
@keyframes aura-breathe { from { opacity: .65; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1.08) translateY(-8px); } }
@keyframes orbit-light { to { transform: rotate(360deg); } }
@keyframes orbit-sway { from { transform: rotate(22deg) scale(.96); } to { transform: rotate(41deg) scale(1.03); } }
@keyframes portrait-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes badge-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); } 50% { transform: translate3d(0, -9px, 0) rotate(1deg); } }
@keyframes type-light { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes button-light { 0%, 62% { left: -65%; } 82%, 100% { left: 145%; } }
@keyframes service-light { 0% { transform: translateX(-105%); opacity: 0; } 25%, 65% { opacity: 1; } 100% { transform: translateX(105%); opacity: 0; } }
@keyframes form-light { 0%, 30% { left: -55%; opacity: 0; } 40%, 65% { opacity: 1; } 80%, 100% { left: 110%; opacity: 0; } }
@keyframes rail-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes about-light { from { opacity: .55; } to { opacity: 1; } }
@keyframes photo-light { from { transform: translateX(-14%) rotate(-5deg); opacity: .12; } to { transform: translateX(14%) rotate(7deg); opacity: .7; } }
@keyframes final-light { from { transform: rotate(29deg) translateX(-50px); opacity: .5; } to { transform: rotate(41deg) translateX(75px); opacity: 1; } }

@media (min-width: 1600px) {
  .cinematic .hero-media { min-height: 700px; }
}
@media (max-width: 1100px) {
  .cinematic .hero-media { min-height: 590px; margin-left: -9%; margin-right: -10%; }
  .cinematic .hero-media figcaption { left: 0; bottom: 3%; }
  .cinematic .hero-tag { right: 2%; font-size: .75rem; }
  .cinematic .about-media { min-height: 455px; }
}
@media (max-width: 800px) {
  .cinematic .hero h1 { font-size: clamp(3.7rem, 8.7vw, 5rem); }
  .cinematic .hero-layout { gap: 0; }
  .cinematic .hero-media { min-height: 550px; margin-left: -14%; margin-right: -16%; }
  .cinematic .hero-tag { right: 6%; top: 8%; font-size: .75rem; padding: 9px 13px; }
  .cinematic .hero-media figcaption { left: 10%; bottom: 7%; padding: 10px 15px; }
  .cinematic .hero-media figcaption p { font-size: 1.125rem; }
  .hero-controls { gap: 22px; }
  .cinematic .about-layout { gap: 28px; }
  .cinematic .about-media { min-height: 450px; margin-left: -24%; margin-right: -14%; }
  .cinematic .about-copy .section-heading { font-size: 2.6rem; }
}
@media (max-width: 580px) {
  .cinematic .hero { padding-top: 12px; }
  .cinematic .hero-layout { grid-template-columns: 1fr; gap: 0; }
  .cinematic .hero h1 { font-size: clamp(4.2rem, 15.2vw, 5.5rem); }
  .cinematic .hero-copy { padding-bottom: 0; }
  .cinematic .hero-description { font-size: 1.0625rem; }
  .cinematic .hero-actions { position: relative; z-index: 8; }
  .cinematic .hero-actions .button { padding-inline: 19px; }
  .hero-atmosphere::before { background: radial-gradient(ellipse at 57% 70%, #ffae202b, transparent 46%); }
  .light-column { top: 20%; right: 9%; height: 95%; width: 135px; }
  .light-column.second { top: 25%; right: 50%; height: 92%; width: 45px; }
  .light-column.third { top: 42%; right: 2%; height: 65%; }
  .cinematic .hero-media { height: auto; aspect-ratio: .88; min-height: 0; margin: 16px -20px -5px; }
  .hero-portrait-wrap { inset: 0 -1% -2%; }
  .hero-aura { inset: 4% -3% 0; }
  .light-orbit { inset: 20% 6% 17%; }
  .light-orbit.orbit-two { inset: 12% 14% 9%; }
  .cinematic .hero-tag { top: 6%; right: 6%; font-size: .75rem; }
  .cinematic .hero-media figcaption { left: 5%; bottom: 5%; padding: 10px 14px; border-radius: 0 17px 17px 17px; }
  .cinematic .hero-media figcaption p { font-size: 1.125rem; }
  .cinematic .hero-bottom { flex-wrap: wrap; gap: 4px 20px; padding-block: 14px 24px; }
  .cinematic .hero-bottom > p { display: none; }
  .hero-controls { width: 100%; justify-content: space-between; gap: 14px; }
  .motion-toggle, .cinematic .scroll-cue { font-size: .8125rem; }
  .cinematic .service-rail { padding-block: 20px; transform: skewY(-2deg); }
  .cinematic.motion-on .rail-track { animation-duration: 38s; }
  .cinematic .service-row { margin-inline: -10px; padding-inline: 10px; }
  .cinematic .contact-inset { border-radius: 24px; padding-inline: 22px; }
  .cinematic .form-submit { font-size: .875rem; }
  .cinematic .about-layout { grid-template-columns: 1fr; gap: 24px; }
  .cinematic .about-copy { grid-row: 1; }
  .cinematic .about-copy .section-heading { font-size: 2.7rem; }
  .cinematic .about-media { min-height: 0; aspect-ratio: 1.05; margin: 0 -24px -14px; max-width: none; }
  .cinematic .about-photo { inset: -8%; height: 116%; }
  .cinematic .about-media::before { inset: 8% 3% 3%; }
  .cinematic .about-description { margin-top: 22px; }
  .cinematic .final-cta::after { width: 450px; height: 450px; right: -250px; bottom: -230px; }
  .cinematic .cookie-banner { border-radius: 18px; }
  .cinematic .hero-photo { filter: drop-shadow(0 10px 17px #0007); }
}
@media (max-width: 360px) {
  .cinematic .hero h1 { font-size: clamp(3.4rem, 17.4vw, 3.9rem); }
  .cinematic .contact-inset { padding-inline: 17px; }
  .cinematic .hero-media { margin-inline: -18px; }
  .cinematic .form-submit { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic *, .cinematic *::before, .cinematic *::after { animation: none !important; transition: none !important; }
  .cinematic .hero-foreground, .cinematic .hero-portrait-wrap, .cinematic .hero-photo, .cinematic .about-photo, .cinematic .rail-track { transform: none !important; }
  .cinematic .reveal, .cinematic .reveal.is-pending { opacity: 1 !important; transform: none !important; }
  .cinematic .about-media { transform: rotate(-4deg); }
  .cinematic .motion-toggle { display: none !important; }
}
