@font-face { font-family: Inter; src: url('/assets/fonts/inter-latin-variable-3100e775.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Sora; src: url('/assets/fonts/sora-latin-variable-fa26406e.woff2') format('woff2'); font-display: swap; }
:root { --deep-navy: #071522; --navy: #0b2332; --mist: #f3eee4; --sand: #eadfc9; --muted: #c7d1ce; --digital-teal: #2bb8b3; --line: rgb(232 221 199 / 24%); --gutter: clamp(1.25rem, 4vw, 5rem); --content-max: 88rem; color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: var(--deep-navy); color: var(--mist); }
* { box-sizing: border-box; } html { min-width: 0; scroll-behavior: smooth; background: var(--deep-navy); } body { min-width: 0; margin: 0; overflow-x: clip; background: var(--deep-navy); } a { color: inherit; } .container { width: min(100% - (var(--gutter) * 2), var(--content-max)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 30; top: .75rem; left: .75rem; transform: translateY(-160%); padding: .8rem 1rem; color: var(--deep-navy); background: var(--mist); font-weight: 750; } .skip-link:focus { transform: translateY(0); } a:focus-visible, button:focus-visible { outline: .1875rem solid var(--mist); outline-offset: .25rem; }
.site-header { position: absolute; z-index: 8; inset: 0 0 auto; } .navigation { display: flex; min-height: clamp(4.5rem, 8vw, 5.75rem); align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand-logo { display: block; width: 8.5rem; height: auto; } .nav-links { display: flex; gap: clamp(.8rem, 2vw, 1.75rem); } .nav-links a { color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: clip; } .hero-art, .hero-art img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; } .hero-art img { object-fit: cover; object-position: 61% center; } .hero-art::after, .hero-shade { position: absolute; inset: 0; content: ''; } .hero-art::after { background: linear-gradient(90deg, rgb(3 12 20 / 78%), rgb(3 12 20 / 20%) 62%, rgb(3 12 20 / 54%)); } .hero-shade { z-index: -2; background: linear-gradient(0deg, rgb(3 12 20 / 78%), transparent 58%); } .hero-content { display: flex; min-height: inherit; align-items: flex-end; justify-content: center; padding-block: clamp(7rem, 17svh, 12rem) clamp(3rem, 9svh, 6rem); } .hero-surface { max-width: min(100%, 48rem); padding: clamp(1.25rem, 2.5vw, 2.25rem); border: .0625rem solid rgb(232 221 199 / 21%); background: rgb(7 21 34 / 72%); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%); backdrop-filter: blur(.55rem); margin-inline: auto; text-align: center; } .hero-brand { display: block; width: min(16rem, 80vw); height: auto; margin: 0 auto 1.4rem; object-fit: contain; } .chapter-index { margin: 0 0 1rem; color: var(--digital-teal); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } h1, h2 { margin: 0; font-family: Sora, Inter, sans-serif; font-weight: 620; letter-spacing: -.065em; } h1 { font-size: clamp(2rem, 5.2vw, 5.8rem); line-height: .94; letter-spacing: -.075em; } h1 .headline-line { display: block; color: var(--mist); text-align: center; } h1 .headline-secondary { margin-top: .45em; color: var(--sand); font-size: .64em; letter-spacing: -.04em; } .hero-copy { max-width: 47ch; margin: 1.35rem 0 0; margin-inline: auto; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .text-link, .contact-link { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .7rem; margin-top: 1.5rem; padding: .75rem 1rem; border: .0625rem solid var(--line); font-weight: 800; text-decoration: none; } .text-link { color: var(--mist); background: rgb(7 21 34 / 36%); } .contact-link { border-color: var(--digital-teal); background: var(--digital-teal); color: #06202a; } .hero-microcopy { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; }
.cinematic-section { padding: clamp(4rem, 8vw, 8rem) 0; background: var(--deep-navy); } .cinematic-intro { max-width: min(100% - (var(--gutter) * 2), 56rem); padding-bottom: clamp(1.5rem, 3vw, 2.75rem); text-align: center; } .cinematic-intro h2, .cinematic-products-heading h2, .cinematic-connection-copy h2 { font-size: clamp(2rem, 4.6vw, 4.85rem); line-height: .98; } .cinematic-intro > p:last-child { max-width: 48ch; margin: 1.2rem auto 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; } .cinematic-stage { width: min(100% - (var(--gutter) * 2), 80rem); margin-inline: auto; overflow: hidden; border: .0625rem solid var(--line); background: #02090f; box-shadow: 0 2rem 5.5rem rgb(0 0 0 / 28%); } .cinematic-video { display: block; width: 100%; background: #02090f; } .cinematic-stage .cinematic-video { aspect-ratio: 16 / 9; object-fit: contain; } .cinematic-controls, .story-controls { display: flex; min-height: 5.25rem; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; } .cinematic-control { display: none; min-height: 3rem; align-items: center; justify-content: center; gap: .55rem; padding: .75rem 1rem; border: .0625rem solid rgb(232 221 199 / 36%); color: var(--sand); background: rgb(15 28 46 / 80%); font: 750 .75rem/1 Inter, sans-serif; letter-spacing: .075em; text-transform: uppercase; cursor: pointer; } .cinematic-control:hover { border-color: var(--digital-teal); color: var(--digital-teal); } html.js .cinematic-control:not([hidden]) { display: inline-flex; }
.cinematic-connection { position: relative; display: grid; min-height: clamp(27rem, 50vw, 47rem); margin-top: clamp(3.25rem, 8vw, 8rem); overflow: clip; background: #02090f; isolation: isolate; } .cinematic-connection-video, .cinematic-connection-shade, .cinematic-connection-copy { grid-area: 1 / 1; } .cinematic-connection-video { z-index: -2; height: 100%; object-fit: cover; } .cinematic-connection-shade { z-index: -1; background: linear-gradient(90deg, rgb(15 28 46 / 94%) 0%, rgb(15 28 46 / 72%) 37%, rgb(15 28 46 / 18%) 73%); } .cinematic-connection-copy { align-self: end; padding-block: clamp(3rem, 8vw, 7rem); } .cinematic-connection-copy h2 { max-width: 10ch; } .cinematic-connection-copy > p:not(.chapter-index) { max-width: 31ch; margin: 1.1rem 0 0; color: var(--mist); font-size: clamp(1.03rem, 1.7vw, 1.4rem); line-height: 1.45; } .cinematic-products { padding-top: clamp(4rem, 9vw, 9rem); } .cinematic-products-heading { max-width: 50rem; margin-inline: auto; text-align: center; } .cinematic-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 4vw, 4rem); max-width: 67rem; margin: clamp(2rem, 5vw, 4.5rem) auto 0; } .cinematic-panel { display: grid; overflow: hidden; border: .0625rem solid var(--line); background: rgb(42 47 56 / 55%); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 18%); } .cinematic-portrait { aspect-ratio: 9 / 16; object-fit: cover; } .cinematic-panel-copy { padding: clamp(1.1rem, 2.3vw, 1.75rem); } .cinematic-panel h3 { margin: 0; color: var(--mist); font: 620 clamp(1.25rem, 2vw, 1.7rem)/1.06 Sora, Inter, sans-serif; letter-spacing: -.05em; } .cinematic-panel-copy p { max-width: 30ch; margin: .8rem 0 0; color: var(--muted); font-size: .96rem; line-height: 1.48; } .cinematic-panel-control { width: 100%; margin-top: 1.15rem; }
.story-sequence { background: var(--navy); } .story-stage { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; } .story-fallback, .story-fallback img, .continuous-story-video, .story-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .story-fallback { z-index: -3; } .story-fallback img { object-fit: cover; } .continuous-story-video { z-index: -2; object-fit: cover; opacity: 0; } html.js .continuous-story-video { opacity: 1; } html.js .story-fallback { display: none; } .story-shade { z-index: -1; background: linear-gradient(90deg, rgb(7 21 34 / 90%), rgb(7 21 34 / 35%) 53%, rgb(7 21 34 / 80%)); } .story-beats { display: grid; min-height: 100svh; align-content: center; gap: 2rem; padding-block: 7rem 4rem; } .story-beat { max-width: 41rem; padding: clamp(1rem, 2.5vw, 2.25rem); border: .0625rem solid rgb(232 221 199 / 16%); background: rgb(7 21 34 / 70%); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 18%); backdrop-filter: blur(.45rem); } .story-beat:not(.is-active) { opacity: .5; } .story-beat h2 { max-width: 13ch; font-size: clamp(2.2rem, 5.9vw, 6rem); line-height: .94; } .story-beat p:not(.chapter-index) { max-width: 38ch; margin: 1.25rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.42; } .story-controls { min-height: 4.75rem; background: var(--navy); }
.site-footer { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .75rem; } .anchor-alias { position: absolute; top: 0; }.not-found { display: grid; min-height: 100svh; background: radial-gradient(circle at 76% 24%, rgb(43 184 179 / 22%), transparent 26rem), var(--deep-navy); }.not-found-content { display: flex; min-height: inherit; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 7rem 3rem; }.not-found h1 { max-width: 11ch; font-size: clamp(3rem, 8vw, 7rem); line-height: .94; }.not-found-copy { max-width: 30ch; color: var(--muted); font-size: 1.1rem; }
@media (min-width: 64rem) { .hero-content { transform: translateY(-3.25rem); } .cinematic-connection-copy { padding-left: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); } html.js .story-sequence { min-height: 340svh; } html.js .story-stage { position: sticky; top: 0; } html.js .story-beats { position: absolute; inset: 0; align-content: center; pointer-events: none; } html.js .story-beat { pointer-events: auto; transition: opacity 250ms ease, transform 350ms ease; } html.js .story-beat:nth-child(even) { justify-self: end; } html.js .story-beat:not(.is-active) { transform: translateY(1rem); } }
@media (max-width: 48rem) { .hero { min-height: max(48rem, 100svh); }.hero-art img { object-position: 60% center; }.hero-art::after { background: linear-gradient(180deg, rgb(15 28 46 / 56%), rgb(15 28 46 / 96%)); }.hero-content { align-items: stretch; padding-top: 6.25rem; padding-bottom: max(2.25rem, env(safe-area-inset-bottom)); }.hero-surface { padding: 1.25rem; }.hero-brand { width: min(10rem, 52vw); }.hero-actions { display: grid; }.hero-actions .contact-link, .hero-actions .text-link { margin-top: .5rem; }.cinematic-intro, .cinematic-products-heading { text-align: left; }.cinematic-stage { width: 100%; border-inline: 0; }.cinematic-controls { min-height: 4.75rem; justify-content: flex-start; }.cinematic-controls .cinematic-control { flex: 1 1 11rem; }.cinematic-connection { min-height: clamp(28rem, 120vw, 38rem); }.cinematic-connection-shade { background: linear-gradient(0deg, rgb(15 28 46 / 96%), rgb(15 28 46 / 20%)); }.cinematic-connection-copy { padding-bottom: max(2.25rem, env(safe-area-inset-bottom)); }.cinematic-panels { grid-template-columns: 1fr; max-width: 27rem; }.cinematic-panel { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }.cinematic-portrait { height: 100%; min-height: 21rem; }.story-stage, .story-beats { min-height: 94svh; }.story-shade { background: linear-gradient(0deg, rgb(7 21 34 / 94%), rgb(7 21 34 / 22%)); }.story-beat { padding: 1.25rem; }.story-beat:not(.is-active) { display: none; }.story-controls { justify-content: flex-start; } }
@media (max-width: 23rem) { .cinematic-panel { grid-template-columns: 1fr; }.cinematic-portrait { min-height: 0; aspect-ratio: 9 / 13; }.nav-links a:first-child { display: none; }.site-footer { align-items: flex-start; flex-direction: column; justify-content: center; } }
@media (max-width: 24rem) { .hero-surface { width: 100%; min-width: 0; padding-inline: 1rem; } h1 { max-width: 100%; font-size: clamp(1.8rem, 8.5vw, 2rem); overflow-wrap: break-word; } .hero-copy { max-width: 100%; font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .continuous-story-video { display: none; } html.js .story-fallback { display: block; } }
@media (forced-colors: active) { .hero-art::after, .hero-shade, .story-shade, .cinematic-connection-shade { background: Canvas; opacity: .72; }.contact-link { background: CanvasText; color: Canvas; }.cinematic-panel, .cinematic-control, .story-beat { border-color: CanvasText; background: Canvas; color: CanvasText; } }

/* V10 keeps one visual stage while its four readable beats remain in native scroll flow. */
html.js .story-sequence { position: relative; min-height: 340svh; }
html.js .story-stage { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 100svh; }
html.js .story-beats { position: relative; z-index: 1; display: grid; min-height: 340svh; grid-template-rows: repeat(4, minmax(85svh, 1fr)); align-content: stretch; margin-top: -100svh; padding-block: 0; pointer-events: none; }
html.js .story-beat { display: grid; align-content: center; align-self: stretch; pointer-events: auto; }
@media (min-width: 64rem) { html.js .story-beats { position: relative; inset: auto; } html.js .story-beat:nth-child(even) { justify-self: end; } }
@media (max-width: 48rem) { html.js .story-sequence { min-height: 340svh; } html.js .story-beats { min-height: 340svh; grid-template-rows: repeat(4, minmax(85svh, 1fr)); margin-top: -94svh; } html.js .story-beat:not(.is-active) { display: grid; } }

/* V10.2: the media stays sticky while every beat remains a native, reachable scroll target. */
.story-sequence { position: relative; }
.story-beats { position: relative; display: grid; min-height: 340svh; grid-template-rows: repeat(4, minmax(85svh, 1fr)); align-content: stretch; padding-block: 0; }
.story-beat { display: grid; min-height: 85svh; align-content: center; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; opacity: 1; }
.story-beat:not(.is-active) { display: grid; opacity: 1; }
.story-card { max-width: 41rem; padding: clamp(1rem, 2.5vw, 2.25rem); border: .0625rem solid rgb(232 221 199 / 16%); background: rgb(7 21 34 / 70%); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 18%); backdrop-filter: blur(.45rem); }
.story-beat:nth-child(even) .story-card { margin-left: auto; }
html.js .story-sequence { min-height: 340svh; }
html.js .story-stage { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 100svh; }
html.js .story-beats { position: relative; z-index: 1; min-height: 340svh; grid-template-rows: repeat(4, minmax(85svh, 1fr)); margin-top: -100svh; pointer-events: none; }
html.js .story-beat, html.js .story-beat:not(.is-active) { display: grid; align-self: stretch; transform: none; pointer-events: auto; }
html.js .story-beat:not(.is-active) { opacity: .5; }
@media (max-width: 48rem) { .hero-content { align-items: flex-end; } .story-beats, html.js .story-beats { min-height: 340svh; grid-template-rows: repeat(4, minmax(85svh, 1fr)); margin-top: 0; } html.js .story-beats { margin-top: -100svh; } .story-card, .story-beat:nth-child(even) .story-card { margin-inline: 0; } }
@media (prefers-reduced-motion: reduce) { html.js .story-stage { position: relative; } html.js .story-beats { margin-top: 0; } }

.story-stage .story-controls { position: absolute; z-index: 2; top: max(1rem, env(safe-area-inset-top)); right: var(--gutter); bottom: auto; left: var(--gutter); width: auto; min-height: 3.1875rem; justify-content: flex-start; pointer-events: auto; background: transparent; }
.story-stage .story-controls .cinematic-control { min-height: 3.1875rem; pointer-events: auto; }
html.story-active .story-controls { position: fixed; z-index: 12; top: max(1rem, env(safe-area-inset-top)); right: var(--gutter); bottom: auto; left: auto; min-height: 3.1875rem; pointer-events: auto; }
@media (max-width: 48rem) { html.story-active .story-controls { right: var(--gutter); left: var(--gutter); justify-content: flex-end; } }

/* Ajustes focais de alinhamento — V10.11 */
.hero-actions { justify-content: center; }
.cinematic-connection-shade { background: radial-gradient(circle at center, rgb(15 28 46 / 78%) 0%, rgb(15 28 46 / 48%) 42%, rgb(15 28 46 / 18%) 74%), linear-gradient(180deg, rgb(7 21 34 / 32%), rgb(7 21 34 / 48%)); }
.cinematic-connection-copy { display: grid; align-self: center; justify-items: center; padding-inline: var(--gutter); text-align: center; }
.cinematic-connection-copy h2 { max-width: 13ch; }
.cinematic-connection-copy > p:not(.chapter-index) { max-width: 52ch; margin-inline: auto; font-size: clamp(1.03rem, 1.7vw, 1.32rem); line-height: 1.55; }