@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('./tema.css');
* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    font-size:var(--tamanho-texto-base);
    margin:0;
    color:var(--ink);
    font-family:var(--fonte-texto);
    background:var(--cor-branco)
}

a {
    text-decoration:none;
    color:inherit
}

.wrap {
    width:min(var(--largura-maxima),calc(100% - 48px));
    margin:auto
}

.header {
    height:82px;
    background:var(--cor-cabecalho);
    color:var(--cor-branco);
    border-bottom:1px solid #ffffff17;
    position:relative;
    z-index:20
}

.nav {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--fonte-titulo);
    font-size:16px;
    font-weight:800;
    letter-spacing:.05em;
    line-height:1.1
}

.brand small {
    display:block;
    font-size:9px;
    letter-spacing:.35em;
    font-weight:500;
    color:#9dbfd0;
    margin-top:5px
}

.brandmark {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border:1px solid #3f6680;
    border-radius:13px;
    font-size:19px;
    letter-spacing:-.08em;
    background:#0d3859
}

.brandmark span {
    color:var(--cyan)
}

.menu {
    display:flex;
    align-items:center;
    gap:25px;
    font-size:13px;
    color:#c4d5e1
}

.menu a:hover {
    color:var(--cor-branco)
}

.menu .nav-contact {
    background:var(--cor-botao);
    color:#062338;
    padding:13px 18px;
    border-radius:var(--raio-botao);
    font-weight:700
}

.menu-btn {
    display:none
}

.hero {
    background:linear-gradient(130deg,var(--cor-cabecalho),#0b2944 65%,#09253d);
    color:white;
    overflow:hidden
}

.hero-grid {
    min-height:595px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:30px
}

.eyebrow {
    color:#67cce6;
    font-size:11px;
    font-weight:800;
    letter-spacing:.17em;
    display:flex;
    align-items:center;
    gap:10px
}

.dot {
    height:7px;
    width:7px;
    background:#54e2b7;
    border-radius:50%;
    box-shadow:0 0 0 5px #54e2b719
}

h1,h2,h3,p {
    margin-top:0
}

h1,h2,h3 {
    font-family:var(--fonte-titulo)
}

h1 {
    font-size:clamp(38px,4.1vw,60px);
    line-height:1.16;
    letter-spacing:-.05em;
    margin:24px 0
}

h1 em {
    font-style:normal;
    color:#6ed4ed
}

.hero-lead {
    max-width:530px;
    color:#afc4d4;
    font-size:16px;
    line-height:1.8
}

.actions {
    display:flex;
    gap:12px;
    margin-top:30px;
    flex-wrap:wrap
}

.btn {
    display:inline-flex;
    align-items:center;
    gap:20px;
    justify-content:center;
    padding:16px 23px;
    border-radius:var(--raio-botao);
    font-size:13px;
    font-weight:800;
    transition:transform .2s
}

.btn:hover {
    transform:translateY(-2px)
}

.primary {
    background:var(--cor-botao);
    color:#06273b
}

.ghost {
    border:1px solid #54738c;
    color:var(--cor-branco)
}

.hero-bottom {
    display:flex;
    gap:25px;
    flex-wrap:wrap;
    margin-top:75px;
    color:#6c92ac;
    font-size:10px;
    letter-spacing:.13em;
    font-weight:700
}

.hero-visual {
    height:510px;
    position:relative;
    display:grid;
    place-items:center
}

.visual-grid {
    position:absolute;
    inset:0;
    background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:radial-gradient(circle,#000 30%,transparent 72%)
}

.visual-ring {
    position:absolute;
    border:1px solid #55bbdc36;
    border-radius:50%;
    aspect-ratio:1
}

.ring1 {
    width:340px;
    box-shadow:0 0 100px #35c4e713
}

.ring2 {
    width:455px;
    border-style:dashed;
    animation:rotate 60s linear infinite
}

.visual-center {
    height:270px;
    width:270px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%,#15517a,#092740 70%);
    border:1px solid #3d93ba66;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 75px #25a3d022;
    text-align:center
}

.scan-icon {
    font-size:62px;
    color:#6ddbf1;
    line-height:1
}

.visual-center strong {
    font-family:var(--fonte-titulo);
    font-size:22px;
    line-height:1.15;
    letter-spacing:.18em;
    margin:15px 0
}

.visual-center span {
    font-size:8px;
    letter-spacing:.11em;
    color:#92c9df
}

.visual-label {
    position:absolute;
    right:0;
    bottom:65px;
    font-size:10px;
    color:#8cb5cb;
    letter-spacing:.18em
}

.visual-label b {
    color:#40d3ef;
    font-size:20px;
    margin-left:15px
}

@keyframes rotate {
    to {
        transform:rotate(360deg)
    }

}

.section {
    padding:var(--espacamento-secao) 0
}

.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:15px
}

.eyebrow.dark {
    color:#167fa6
}

h2 {
    font-size:clamp(30px,3vw,43px);
    line-height:1.2;
    letter-spacing:-.04em;
    margin:14px 0
}

.text-link {
    font-size:13px;
    color:#147d9e;
    font-weight:700
}

.intro {
    color:var(--muted);
    max-width:680px;
    line-height:1.7;
    font-size:15px;
    margin-bottom:32px
}

.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.eq-card {
    border:1px solid var(--line);
    border-radius:var(--raio-card);
    overflow:hidden;
    transition:transform .2s,box-shadow .2s;
    background:var(--cor-branco)
}

.eq-card:hover {
    transform:translateY(-5px);
    box-shadow:0 18px 35px #0d2e4812
}

.eq-art {
    height:190px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 55% 45%,#3d829f,#123a55 65%,#0b253d);
    display:grid;
    place-items:center
}

.eq-art-symbol {
    font-size:100px;
    color:#b6e9f2;
    opacity:.65
}

.eq-art-line {
    position:absolute;
    inset:30px;
    border:1px solid #a4d9ed33;
    border-radius:50%;
    transform:scale(1.5)
}

.card-info {
    padding:22px
}

.card-tag {
    font-size:9px;
    color:#1887aa;
    letter-spacing:.15em;
    font-weight:800
}

.card-info h3 {
    font-size:17px;
    min-height:48px;
    margin:10px 0 24px
}

.card-more {
    font-size:12px;
    color:#4c7185;
    display:flex;
    justify-content:space-between
}

.card-more b {
    color:#1387aa
}

.dark-section {
    background:var(--cor-secao-escura);
    color:var(--cor-branco)
}

.dark-section h2 {
    color:var(--cor-branco)
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:40px
}

.service-grid a {
    border:1px solid #35556b;
    padding:32px;
    min-height:245px;
    position:relative;
    transition:background .2s
}

.service-grid a:hover {
    background:#113a56
}

.service-grid a>span {
    font-size:12px;
    color:#55c9e6
}

.service-grid h3 {
    font-size:21px;
    margin:27px 0 12px
}

.service-grid p {
    font-size:14px;
    line-height:1.7;
    color:#a9bfcd
}

.service-grid b {
    position:absolute;
    bottom:28px;
    right:30px;
    color:#56d0eb
}

.portfolio-banner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}

.portfolio-banner p {
    color:var(--muted);
    line-height:1.8;
    max-width:460px;
    margin-bottom:30px
}

.portfolio-art {
    height:300px;
    background:repeating-linear-gradient(45deg,#09243b,#09243b 15px,#0e304b 16px,#0e304b 30px);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#75d7ed
}

.portfolio-art span {
    font-family:var(--fonte-titulo);
    font-size:115px;
    font-weight:800;
    letter-spacing:-.12em
}

.portfolio-art small {
    font-size:10px;
    letter-spacing:.17em
}

.cta {
    background:var(--cor-cta);
    color:var(--cor-branco);
    padding:70px 0
}

.cta-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}

.cta h2 {
    color:white
}

.cta p {
    color:#c4dce9;
    margin:0
}

.light {
    background:white;
    color:#0b3650
}

.footer {
    background:var(--cor-rodape);
    color:#a4b9c7;
    padding:50px 0
}

.foot {
    display:flex;
    justify-content:space-between;
    align-items:start;
    gap:30px
}

.foot strong {
    color:white;
    font-family:var(--fonte-titulo)
}

.foot strong span {
    font-size:10px;
    letter-spacing:.13em
}

.foot p {
    font-size:12px;
    margin-top:13px
}

.foot>div:nth-child(2) {
    display:flex;
    gap:20px;
    font-size:12px
}

.foot small {
    font-size:11px
}

.subhero {
    background:linear-gradient(110deg,#08233b,#145072);
    color:white;
    padding:115px 0;
    min-height:380px
}

.subhero h1 {
    max-width:900px
}

.subhero p {
    color:#c6dce8;
    max-width:680px;
    line-height:1.8
}

.simple-card {
    border:1px solid var(--line);
    border-radius:var(--raio-card);
    padding:25px
}

.simple-card h3 {
    font-size:17px
}

.simple-card span {
    color:#1681a3;
    font-size:13px
}

.contact-note {
    border:1px solid var(--line);
    padding:30px;
    border-radius:var(--raio-card);
    color:var(--muted)
}

@media(max-width:1050px) {
    .menu {
        gap:12px
    }

    .cards {
        grid-template-columns:repeat(2,1fr)
    }

    .hero-grid {
        grid-template-columns:1fr 0.8fr
    }

    .hero-visual {
        transform:scale(.85)
    }

}

@media(max-width:760px) {
    .wrap {
        width:min(100% - 32px,var(--largura-maxima))
    }

    .header {
        height:72px
    }

    .menu-btn {
        display:block;
        background:none;
        border:1px solid #5a8299;
        color:var(--cor-branco);
        border-radius:var(--raio-botao);
        padding:10px
    }

    .menu {
        display:none;
        position:absolute;
        top:72px;
        left:0;
        right:0;
        background:var(--cor-cabecalho);
        padding:22px;
        flex-direction:column;
        align-items:stretch
    }

    .menu.open {
        display:flex
    }

    .hero-grid {
        display:block;
        padding-top:65px;
        padding-bottom:30px
    }

    .hero-visual {
        height:300px;
        transform:scale(.65);
        margin:-20px 0
    }

    .hero-bottom {
        margin-top:45px
    }

    .section {
        padding:65px 0
    }

    .section-head {
        display:block
    }

    .cards {
        grid-template-columns:repeat(2,1fr)
    }

    .service-grid {
        grid-template-columns:1fr
    }

    .portfolio-banner {
        grid-template-columns:1fr;
        gap:30px
    }

    .portfolio-art {
        height:220px
    }

    .cta-inner,.foot {
        display:block
    }

    .cta .btn {
        margin-top:25px
    }

    .foot>div:nth-child(2) {
        margin:25px 0
    }

    .eq-art {
        height:135px
    }

}

@media(max-width:440px) {
    .cards {
        grid-template-columns:1fr
    }

    .hero-bottom {
        gap:13px;
        font-size:9px
    }

    .visual-center {
        height:240px;
        width:240px
    }

    .hero-visual {
        margin-left:-25px
    }

}

/* ETAPA 02 — MOVIMENTO CINEMATOGRAFICO (sem alterar o tema central) */
:root {
    --movimento-intensidade: 1;
    --movimento-duracao: 800ms;
}

.hero {
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.hero::before {
    content:"";
    position:absolute;
    inset:-12% -5%;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse at 75% 43%,rgba(50,186,228,.14),transparent 43%),linear-gradient(120deg,transparent 40%,rgba(46,151,191,.065) 65%,transparent 85%);
    transform:translate3d(0,calc(var(--hero-shift,0px) * .45),0);
}

.hero-visual {
    transform:translate3d(0,var(--hero-shift,0px),0);
    will-change:transform;
}

.hero .visual-ring {
    transition:opacity .4s ease;
}

.hero .ring1 {
    animation:up-breathe 7s ease-in-out infinite;
}

.hero .ring2 {
    animation:up-breathe 7s ease-in-out -3.5s infinite;
}

@keyframes up-breathe {
    0%,100% {
        opacity:.42;
    }

    50% {
        opacity:.85;
    }

}

.dark-section {
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.dark-section::before {
    content:"";
    position:absolute;
    inset:-30%;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(circle at 70% 45%,rgba(54,196,231,.12),transparent 37%),repeating-linear-gradient(90deg,transparent 0 89px,rgba(104,205,236,.035) 90px 91px);
    transform:translate3d(0,var(--section-shift,0px),0);
}

/* A animacao so e aplicada quando JS esta disponivel */
.motion-ready .motion-reveal {
    opacity:0;
    transform:translate3d(0,32px,0);
    transition:opacity var(--movimento-duracao) ease,transform var(--movimento-duracao) cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--reveal-delay,0ms);
}

.motion-ready .motion-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto!important;
    }

    .hero::before,.hero-visual,.dark-section::before {
        transform:none!important;
    }

    .hero .visual-ring {
        animation:none!important;
    }

    .motion-ready .motion-reveal {
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }

}

@media (max-width:767px) {
    .hero-visual {
        transform:none!important;
    }

    .hero::before {
        transform:none!important;
    }

    .dark-section::before {
        transform:none!important;
    }

}


/* ==========================================================
   ETAPA 03 - CABECALHO SEMPRE FIXO
   Mantem o menu visivel durante toda a rolagem.
========================================================== */

body {
    padding-top: 82px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 82px;
    z-index: 1000;

    transition:
        height 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.header .nav {
    height: 100%;
}

.header.scrolled {
    height: 68px;
    background: rgba(17, 66, 89, 0.97);
    border-bottom: 1px solid rgba(76, 212, 235, 0.65);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(76, 212, 235, 0.12);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html {
    scroll-padding-top: 96px;
}

@media (max-width: 760px) {

    body {
        padding-top: 72px;
    }

    .header {
        height: 72px;
    }

    .header.scrolled {
        height: 64px;
    }

    .menu {
        top: 100%;
    }

    .header.scrolled .menu {
        background: rgba(17, 66, 89, 0.98);
    }

    html {
        scroll-padding-top: 80px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .header {
        transition: none;
    }

}


/* ==========================================================
   ETAPA 05 — FOTOGRAFIAS REAIS DA UP SERVICE
   Mantem a identidade e as animacoes ja aprovadas.
   ========================================================== */

.hero-visual-photo {
    min-width: 0;
    padding: 32px 0;
}

.hero-photo-frame {
    position: relative;
    width: min(100%, 470px);
    height: 440px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(114, 214, 241, 0.3);
    background: #102e43;
    box-shadow: 0 28px 70px rgba(0, 7, 20, 0.38);
    isolation: isolate;
}

.hero-photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5, 27, 43, 0.55), transparent 48%);
    pointer-events: none;
}

.hero-equipment-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.035);
    transition: transform 1.1s ease;
}

.hero-photo-frame:hover .hero-equipment-image {
    transform: scale(1.085);
}

.hero-photo-glow {
    position: absolute;
    inset: auto -15% -45% -15%;
    height: 65%;
    background: radial-gradient(ellipse, rgba(38, 197, 231, 0.25), transparent 65%);
    pointer-events: none;
}

.hero-photo-caption {
    position: absolute;
    bottom: 54px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid rgba(153, 225, 241, 0.22);
    border-radius: 10px;
    background: rgba(6, 31, 48, 0.8);
    color: #d4f1f8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    backdrop-filter: blur(10px);
}

.hero-photo-caption-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #59d7e9;
    box-shadow: 0 0 12px rgba(89, 215, 233, 0.8);
}

.eq-art-photo {
    background: #173b51;
}

.eq-art-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.eq-card:hover .eq-art-photo img {
    transform: scale(1.06);
}

.portfolio-art-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: #09243b;
}

.portfolio-art-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.portfolio-art-photo .portfolio-photo-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 11px 15px;
    border-radius: 8px;
    background: rgba(5, 31, 49, 0.86);
    color: #e2f8ff;
    font-family: var(--fonte-texto);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

@media (max-width: 1050px) {
    .hero-visual-photo {
        transform: none;
    }

    .hero-photo-frame {
        height: 390px;
    }
}

@media (max-width: 760px) {
    .hero-visual-photo {
        height: 350px;
        margin: 15px 0 0;
        padding: 0;
        transform: none !important;
    }

    .hero-photo-frame {
        width: 100%;
        height: 330px;
    }

    .hero-photo-caption {
        bottom: 34px;
        left: 12px;
        right: 12px;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-equipment-image,
    .eq-art-photo img {
        transition: none;
    }
}


/* ============================================================
   ETAPA 06 — BANNER COM PROFUNDIDADE TRIDIMENSIONAL
   Utiliza a fotografia original da UP Service, sem alterar
   as caracteristicas tecnicas do equipamento.
   ============================================================ */

.hero-visual-3d {
    --up-rotate-x: 0deg;
    --up-rotate-y: 0deg;
    --up-pointer-x: 50%;
    --up-pointer-y: 50%;
    min-width: 0;
    height: 560px;
    padding: 20px 4px;
    perspective: 1150px;
    transform-style: preserve-3d;
    isolation: isolate;
}

.hero-visual-3d::before {
    content: "";
    position: absolute;
    inset: 4% -9%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(25, 171, 222, 0.22), rgba(5, 25, 48, 0) 68%);
    filter: blur(12px);
    pointer-events: none;
}

.hero-visual-3d::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(85, 193, 227, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(85, 193, 227, 0.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
    pointer-events: none;
}

.hero-3d-stage {
    position: relative;
    z-index: 2;
    width: min(100%, 505px);
    height: 455px;
    transform-style: preserve-3d;
    transform: rotateX(var(--up-rotate-x)) rotateY(var(--up-rotate-y));
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

.hero-3d-photo {
    position: absolute;
    inset: 14px 18px 24px;
    overflow: hidden;
    border: 1px solid rgba(110, 219, 244, 0.42);
    border-radius: 24px;
    background: #0a263c;
    box-shadow: 0 35px 70px rgba(0, 7, 23, 0.52), 0 0 0 9px rgba(40, 157, 194, 0.035), inset 0 0 32px rgba(41, 191, 235, 0.12);
    transform: translateZ(16px);
    backface-visibility: hidden;
}

.hero-visual-3d .hero-equipment-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 46% center;
    transform: scale(1.12);
    filter: saturate(0.88) contrast(1.08);
    transition: transform 850ms ease, filter 850ms ease;
}

.hero-visual-3d:hover .hero-equipment-image {
    transform: scale(1.17);
    filter: saturate(1.02) contrast(1.1);
}

.hero-3d-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 25, 47, 0.14), rgba(5, 24, 43, 0.05) 48%, rgba(3, 19, 36, 0.84)), linear-gradient(105deg, rgba(7, 52, 83, 0.35), transparent 55%);
    pointer-events: none;
}

.hero-3d-orbit {
    position: absolute;
    left: 50%;
    top: 48%;
    border: 1px solid rgba(94, 214, 242, 0.23);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-23deg);
    pointer-events: none;
}

.hero-3d-orbit-outer {
    width: 112%;
    height: 76%;
    border-style: dashed;
    animation: up-orbit-glow 8s ease-in-out infinite;
}

.hero-3d-orbit-inner {
    width: 91%;
    height: 95%;
    border-color: rgba(94, 214, 242, 0.12);
}

.hero-3d-corner {
    position: absolute;
    width: 72px;
    height: 72px;
    border-color: #70e0f6;
    border-style: solid;
    filter: drop-shadow(0 0 9px rgba(75, 209, 239, 0.4));
    transform: translateZ(56px);
    pointer-events: none;
}

.hero-3d-corner-top {
    top: 0;
    left: 4px;
    border-width: 2px 0 0 2px;
    border-radius: 18px 0 0 0;
}

.hero-3d-corner-bottom {
    bottom: 9px;
    right: 0;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 18px 0;
}

.hero-3d-data {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    border: 1px solid rgba(135, 225, 246, 0.4);
    border-radius: 9px;
    background: rgba(4, 28, 48, 0.88);
    box-shadow: 0 12px 30px rgba(0, 12, 30, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #d6f6ff;
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    transform: translateZ(84px);
    pointer-events: none;
}

.hero-3d-data-top {
    top: 42px;
    right: -12px;
    gap: 10px;
    padding: 12px 14px;
}

.hero-3d-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5be8d5;
    box-shadow: 0 0 14px rgba(91, 232, 213, 0.8);
    animation: up-orbit-glow 3s ease-in-out infinite;
}

.hero-3d-data-bottom {
    left: -17px;
    bottom: 46px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 18px;
}

.hero-3d-data-bottom span {
    color: #6ccee9;
    font-size: 9px;
}

.hero-3d-data-bottom strong {
    font-family: var(--fonte-titulo);
    font-size: 12px;
    letter-spacing: 0.075em;
}

.hero-3d-floor {
    position: absolute;
    bottom: 0;
    left: 7%;
    width: 86%;
    height: 85px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(57, 191, 235, 0.27), rgba(6, 36, 62, 0) 68%);
    filter: blur(16px);
    pointer-events: none;
}

.hero-3d-side-label {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: rgba(154, 217, 233, 0.75);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    pointer-events: none;
}

@keyframes up-orbit-glow {
    0%, 100% {
        opacity: 0.35;
    }
    50% {
        opacity: 0.9;
    }
}

@media (max-width: 1050px) {
    .hero-visual-3d {
        height: 480px;
    }

    .hero-3d-stage {
        height: 385px;
    }

    .hero-3d-data-top {
        right: 0;
    }

    .hero-3d-data-bottom {
        left: 0;
    }
}

@media (max-width: 760px) {
    .hero-visual-3d {
        height: 365px;
        margin: 22px 0 0;
        padding: 0;
        perspective: none;
        transform: none !important;
    }

    .hero-3d-stage {
        width: 100%;
        height: 325px;
        transform: none !important;
        will-change: auto;
    }

    .hero-3d-photo {
        inset: 12px 8px 18px;
    }

    .hero-3d-data-top {
        top: 24px;
        right: 0;
        font-size: 8px;
    }

    .hero-3d-data-bottom {
        bottom: 28px;
        left: 0;
        padding: 11px 12px;
    }

    .hero-3d-data-bottom strong {
        font-size: 10px;
    }

    .hero-3d-corner {
        width: 45px;
        height: 45px;
    }

    .hero-3d-side-label {
        bottom: 0;
        right: 8px;
        font-size: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-3d-stage {
        transform: none !important;
        transition: none !important;
    }

    .hero-3d-orbit,
    .hero-3d-pulse {
        animation: none !important;
    }

    .hero-visual-3d .hero-equipment-image {
        transition: none !important;
    }
}


/* ============================================================
   ETAPA 06B - ARTE CINEMATOGRAFICA APROVADA
   Mantem o 3D e o JS. Substitui somente a apresentacao visual.
   ============================================================ */
.hero {
    background: radial-gradient(ellipse at 77% 38%, #10476b 0%, #082a46 38%, #061a2e 85%);
}
.hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 10px;
}
.hero-visual-3d {
    height: 570px;
    overflow: visible;
}
.hero-3d-stage {
    width: min(110%, 585px);
    height: 480px;
}
.hero-3d-photo {
    inset: 0;
    border-radius: 18px;
    border: 1px solid rgba(93, 225, 248, .28);
    box-shadow: 0 30px 95px rgba(0, 8, 23, .55), 0 0 70px rgba(0, 212, 246, .09);
}
.hero-visual-3d .hero-equipment-image {
    object-position: 54% 50%;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.04);
}
.hero-visual-3d:hover .hero-equipment-image {
    transform: scale(1.065);
    filter: saturate(1.13) contrast(1.06);
}
.hero-3d-photo-shade {
    background: linear-gradient(0deg, rgba(3, 21, 37, .5), transparent 30%);
}
.hero-3d-orbit { opacity: .42; }
.hero-3d-floor { opacity: .55; }
@media (max-width: 1050px) {
    .hero-3d-stage { width: 100%; height: 390px; }
    .hero-visual-3d { height: 470px; }
}
@media (max-width: 760px) {
    .hero-grid { display: block; }
    .hero-visual-3d { height: 350px; overflow: visible; }
    .hero-3d-stage { width: 100%; height: 320px; }
    .hero-visual-3d .hero-equipment-image { transform: none; }
    .hero-visual-3d:hover .hero-equipment-image { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-visual-3d .hero-equipment-image { transform: none !important; }
}

/* ==========================================
   AJUSTE DA LOGOMARCA ORIGINAL — UP SERVICE
   ========================================== */

.header .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 260px;
    height: 100%;
}

.header .brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 64px;
    object-fit: contain;
    transition: height 0.3s ease;
}

/* Logo menor quando o cabeçalho encolhe */
.header.scrolled .brand img {
    height: 52px;
}

/* Ajuste para celulares */
@media (max-width: 760px) {
    .header .brand {
        max-width: 190px;
    }

    .header .brand img {
        height: 50px;
    }

    .header.scrolled .brand img {
        height: 44px;
    }
}


/* ============================================================
   ETAPA 07 — EXPERIÊNCIA TECNOLÓGICA NA ROLAGEM
   Nova seção independente. Não modifica o banner aprovado.
   ============================================================ */
.tech-journey {
    position: relative;
    overflow: clip;
    background: #041727;
    color: #fff;
}
.tech-journey-scene {
    --tech-progress: 0;
    position: relative;
    min-height: 740px;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 76% 48%, rgba(15, 114, 154, .35), transparent 47%),
        linear-gradient(125deg, #041522 3%, #092d48 58%, #041827);
}
.tech-journey-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(rgba(94, 197, 227, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 197, 227, .09) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent, #000 65%);
    transform: translateY(calc(var(--tech-progress) * -32px));
}
.tech-journey-glow {
    position: absolute;
    width: 58%;
    height: 85%;
    right: -13%;
    top: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(42, 207, 244, .20), transparent 65%);
    filter: blur(32px);
}
.tech-journey-layout {
    min-height: 740px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 38px;
    padding-top: 95px;
    padding-bottom: 95px;
}
.tech-journey-copy {
    position: relative;
    z-index: 3;
    transform: translateY(calc((1 - var(--tech-progress)) * 25px));
    opacity: calc(.72 + var(--tech-progress) * .28);
}
.tech-journey-eyebrow { font-size: 10px; line-height: 1.6; }
.tech-journey-copy h2 {
    margin: 25px 0;
    font-size: clamp(36px, 3.7vw, 57px);
    line-height: 1.12;
    letter-spacing: -.045em;
    color: #fff;
}
.tech-journey-copy h2 em { font-style: normal; color: #6ed8ef; }
.tech-journey-copy p {
    max-width: 480px;
    color: #b2ccdc;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 30px;
}
.tech-journey-index {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 65px;
    color: #75a6bd;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}
.tech-journey-visual {
    position: relative;
    min-width: 0;
    height: 530px;
    perspective: 1100px;
}
.tech-journey-halo {
    position: absolute;
    inset: 4% 1% 5%;
    border: 1px dashed rgba(91, 219, 245, .30);
    border-radius: 50%;
    transform: rotate(-22deg) scale(calc(.92 + var(--tech-progress) * .10));
    box-shadow: 0 0 90px rgba(26, 171, 218, .09);
}
.tech-journey-halo::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(91, 219, 245, .18);
    border-radius: 50%;
}
.tech-journey-image {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(106, 214, 243, .48);
    background: #092a40;
    box-shadow: 0 32px 75px rgba(0, 8, 20, .52), 0 0 50px rgba(18, 189, 230, .10);
    transition: box-shadow .3s ease;
}
.tech-journey-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tech-journey-image-main {
    z-index: 1;
    top: 7%;
    left: 9%;
    width: 81%;
    height: 78%;
    border-radius: 25px;
    transform: translate3d(0, calc((1 - var(--tech-progress)) * 50px), 0) rotateY(-5deg);
}
.tech-journey-image-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(2, 18, 32, .58));
}
.tech-journey-image-detail {
    z-index: 2;
    right: -2%;
    bottom: 3%;
    width: 44%;
    height: 39%;
    border-radius: 16px;
    transform: translate3d(0, calc((1 - var(--tech-progress)) * 100px), 0) rotateY(-8deg);
}
.tech-journey-hud {
    position: absolute;
    z-index: 3;
    padding: 12px 16px;
    border: 1px solid rgba(111, 215, 241, .40);
    border-radius: 9px;
    background: rgba(4, 30, 48, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 30px rgba(0, 8, 20, .28);
    color: #e0f7fc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}
.tech-journey-hud-top {
    top: 12%;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(calc((1 - var(--tech-progress)) * -28px));
}
.tech-journey-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ce4ce;
    box-shadow: 0 0 12px #5ce4ce;
}
.tech-journey-hud-bottom {
    bottom: 10%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tech-journey-hud-bottom small { color: #66c9e4; font-size: 9px; }
.tech-journey-reticle {
    position: absolute;
    z-index: 3;
    top: 3%;
    left: 5%;
    width: 80px;
    height: 80px;
    border-top: 2px solid #6edaf1;
    border-left: 2px solid #6edaf1;
    border-radius: 18px 0 0 0;
    filter: drop-shadow(0 0 8px rgba(94, 216, 241, .5));
}
.tech-journey-bottomline {
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #6099b3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}
@media (max-width: 900px) {
    .tech-journey-layout { gap: 18px; }
    .tech-journey-visual { height: 440px; }
    .tech-journey-copy h2 { font-size: clamp(30px, 4vw, 42px); }
    .tech-journey-index { margin-top: 35px; }
}
@media (max-width: 760px) {
    .tech-journey-scene { min-height: 0; }
    .tech-journey-layout {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 75px;
        padding-bottom: 100px;
    }
    .tech-journey-copy { opacity: 1; transform: none; }
    .tech-journey-copy h2 { font-size: clamp(32px, 8vw, 44px); }
    .tech-journey-copy p { font-size: 15px; }
    .tech-journey-visual { height: min(92vw, 430px); }
    .tech-journey-image-main { left: 6%; width: 86%; }
    .tech-journey-image-detail { right: 0; width: 45%; }
    .tech-journey-hud { font-size: 8px; padding: 9px 11px; }
    .tech-journey-hud-bottom { left: 1%; }
    .tech-journey-hud-bottom strong { font-size: 9px; }
    .tech-journey-bottomline { font-size: 7px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
    .tech-journey-grid,
    .tech-journey-copy,
    .tech-journey-halo,
    .tech-journey-image-main,
    .tech-journey-image-detail,
    .tech-journey-hud-top { transform: none !important; }
    .tech-journey-copy { opacity: 1 !important; }
}


/* =============================================================
   ETAPA 07B — REVELACAO POR SOBREPOSICAO
   O primeiro banner fica fixo enquanto o segundo sobe e o cobre.
   O cabeçalho original permanece acima de todas as camadas.
   ============================================================= */
.up-overlap-sequence {
    position: relative;
    isolation: isolate;
}
.up-overlap-sequence > .hero {
    position: sticky;
    top: 82px;
    z-index: 1;
}
.up-overlap-sequence > .tech-journey {
    position: relative;
    z-index: 2;
    margin-top: -90px;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    box-shadow: 0 -22px 75px rgba(0, 9, 24, .38);
    background: #0b2e44;
}
/* Borda de luz discreta que marca a passagem de um cenário ao outro. */
.up-overlap-sequence > .tech-journey::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    z-index: 5;
    background: linear-gradient(90deg, transparent, rgba(109, 218, 241, .68), transparent);
    pointer-events: none;
}
/* O segundo cenário fica mais limpo, sem os elementos concorrentes. */
.up-overlap-sequence .tech-journey-grid { opacity: .25; }
.up-overlap-sequence .tech-journey-layout {
    padding-top: 125px;
    padding-bottom: 110px;
}
.up-overlap-sequence .tech-journey-visual {
    height: 470px;
    perspective: none;
}
.up-overlap-sequence .tech-journey-image-main {
    top: 3%;
    left: 2%;
    width: 96%;
    height: 94%;
    border-radius: 22px;
    transform: translate3d(0, calc((1 - var(--tech-progress, 1)) * 18px), 0);
    border: 1px solid rgba(131, 210, 230, .28);
    box-shadow: 0 28px 65px rgba(0, 8, 20, .32);
}
.up-overlap-sequence .tech-journey-image-main img {
    object-position: center;
}
.up-overlap-sequence .tech-journey-copy h2 {
    font-size: clamp(32px, 3.2vw, 49px);
}
@media (max-width: 760px) {
    .up-overlap-sequence > .hero { top: 72px; }
    .up-overlap-sequence > .tech-journey {
        margin-top: -28px;
        border-radius: 20px 20px 0 0;
    }
    .up-overlap-sequence .tech-journey-layout {
        padding-top: 68px;
        padding-bottom: 78px;
    }
    .up-overlap-sequence .tech-journey-visual {
        height: min(82vw, 360px);
    }
    .up-overlap-sequence .tech-journey-image-main {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .up-overlap-sequence > .hero { position: relative; top: auto; }
    .up-overlap-sequence > .tech-journey { margin-top: 0; border-radius: 0; }
    .up-overlap-sequence .tech-journey-image-main { transform: none !important; }
}


/* =============================================================
   ETAPA 07C — TRANSICAO CINEMATOGRAFICA POR DISSOLUCAO
   Um unico palco ocupa a tela. O primeiro cenario desaparece
   gradualmente e revela o segundo, sem empilhar dois banners.
   ============================================================= */
.up-overlap-sequence {
    --up-transition: 0;
    position: relative;
    height: 230svh;
    min-height: 1200px;
    isolation: isolate;
    background: #061b2f;
}
.up-cinematic-stage {
    position: sticky;
    top: 68px;
    height: calc(100svh - 68px);
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
    background: #071e32;
}
.up-overlap-sequence > .up-cinematic-stage > .hero,
.up-overlap-sequence > .up-cinematic-stage > .tech-journey {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.up-overlap-sequence > .up-cinematic-stage > .hero {
    z-index: 2;
    opacity: calc(1 - var(--up-transition));
    pointer-events: auto;
    will-change: opacity;
}
.up-overlap-sequence > .up-cinematic-stage > .tech-journey {
    z-index: 1;
    opacity: var(--up-transition);
    pointer-events: none;
    will-change: opacity;
}
.up-overlap-sequence.is-second-visible > .up-cinematic-stage > .hero {
    pointer-events: none;
}
.up-overlap-sequence.is-second-visible > .up-cinematic-stage > .tech-journey {
    pointer-events: auto;
}
/* Elimina a borda decorativa que separava visualmente os banners. */
.up-overlap-sequence > .up-cinematic-stage > .tech-journey::before {
    display: none;
}
.up-cinematic-stage .hero-grid,
.up-cinematic-stage .tech-journey-layout {
    min-height: 100%;
    height: 100%;
    align-items: center;
}
.up-cinematic-stage .hero-grid { padding-top: 16px; padding-bottom: 16px; }
.up-cinematic-stage .hero-bottom { margin-top: clamp(22px, 5vh, 55px); }
.up-cinematic-stage .hero-visual-3d { height: min(62vh, 570px); }
.up-cinematic-stage .hero-3d-stage { height: min(53vh, 480px); }
.up-cinematic-stage .tech-journey-layout {
    padding-top: 35px;
    padding-bottom: 35px;
    gap: clamp(35px, 5vw, 90px);
}
.up-cinematic-stage .tech-journey-copy { opacity: 1; transform: none; }
.up-cinematic-stage .tech-journey-visual { height: min(56vh, 510px); }
.up-cinematic-stage .tech-journey-image-main { transform: none; }
.up-cinematic-stage .tech-journey-bottomline { bottom: 15px; }
/* A segunda experiencia ganha respiro, com menos texto e controles. */
.up-cinematic-stage .tech-journey-index { display: none; }
@media (max-width: 1050px) {
    .up-cinematic-stage .hero-grid { gap: 20px; }
    .up-cinematic-stage .hero-visual-3d { height: min(55vh, 460px); }
    .up-cinematic-stage .hero-3d-stage { height: min(47vh, 390px); }
}
@media (max-width: 760px) {
    .up-overlap-sequence { height: 205svh; min-height: 950px; }
    .up-cinematic-stage { top: 64px; height: calc(100svh - 64px); min-height: 0; }
    .up-cinematic-stage .hero-grid,
    .up-cinematic-stage .tech-journey-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 16px 0;
    }
    .up-cinematic-stage .hero-grid > div:first-child { flex: 0 0 auto; }
    .up-cinematic-stage .hero h1 { font-size: clamp(29px, 7vw, 43px); margin: 12px 0; }
    .up-cinematic-stage .hero-lead { font-size: 13px; line-height: 1.5; }
    .up-cinematic-stage .actions { margin-top: 14px; }
    .up-cinematic-stage .hero-bottom { display: none; }
    .up-cinematic-stage .hero-visual-3d { height: min(33svh, 300px); width: 100%; margin: 0; }
    .up-cinematic-stage .hero-3d-stage { height: min(30svh, 275px); }
    .up-cinematic-stage .tech-journey-copy h2 { font-size: clamp(29px, 7vw, 43px); }
    .up-cinematic-stage .tech-journey-copy p { font-size: 13px; }
    .up-cinematic-stage .tech-journey-visual { height: min(37svh, 320px); width: 100%; }
    .up-cinematic-stage .tech-journey-layout { padding: 22px 0; }
    .up-cinematic-stage .tech-journey-bottomline { display: none; }
}
@media (max-height: 680px) and (min-width: 761px) {
    .up-cinematic-stage .hero h1 { font-size: clamp(30px, 3.2vw, 48px); margin: 12px 0; }
    .up-cinematic-stage .hero-lead { line-height: 1.5; }
    .up-cinematic-stage .hero-visual-3d { height: 75%; }
    .up-cinematic-stage .hero-3d-stage { height: 100%; }
    .up-cinematic-stage .hero-bottom { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .up-overlap-sequence { height: auto; min-height: 0; }
    .up-cinematic-stage { position: static; height: auto; min-height: 0; overflow: visible; }
    .up-overlap-sequence > .up-cinematic-stage > .hero,
    .up-overlap-sequence > .up-cinematic-stage > .tech-journey {
        position: relative; height: auto; min-height: 0;
        opacity: 1 !important; pointer-events: auto;
    }
    .up-cinematic-stage .hero-grid,
    .up-cinematic-stage .tech-journey-layout { height: auto; min-height: 0; padding: 60px 0; }
}


/* =============================================================
   ETAPA 07D — TROCA VERTICAL DE CENARIOS EM TELA CHEIA
   O primeiro banner desliza sob o menu fixo enquanto desaparece.
   O segundo sobe de baixo, ocupando exatamente o mesmo palco.
   Mantemos os componentes e o 3D aprovados.
   ============================================================= */
.up-overlap-sequence {
    --up-transition: 0;
    --up-enter: 0;
    height: 245svh;
    min-height: 0;
}
.up-cinematic-stage {
    top: 68px;
    height: calc(100svh - 68px);
    min-height: 0;
    overflow: hidden;
}
.up-overlap-sequence > .up-cinematic-stage > .hero,
.up-overlap-sequence > .up-cinematic-stage > .tech-journey {
    inset: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    margin: 0;
    transition: none;
    will-change: transform, opacity;
}
.up-overlap-sequence > .up-cinematic-stage > .hero {
    z-index: 2;
    transform: translate3d(0, calc(-100% * var(--up-transition)), 0);
    opacity: calc(1 - var(--up-transition) * .75);
}
.up-overlap-sequence > .up-cinematic-stage > .tech-journey {
    z-index: 1;
    transform: translate3d(0, calc(100% * (1 - var(--up-transition))), 0);
    opacity: var(--up-enter);
}
/* Segunda cena com o mesmo respiro e altura da primeira. */
.up-cinematic-stage .tech-journey-layout {
    min-height: 100%;
    height: 100%;
    padding-top: clamp(35px, 6vh, 85px);
    padding-bottom: clamp(35px, 6vh, 85px);
    align-items: center;
}
.up-cinematic-stage .tech-journey-visual {
    height: min(64vh, 570px);
}
.up-cinematic-stage .tech-journey-image-main {
    height: 100%;
}
@media (max-width: 760px) {
    .up-overlap-sequence { height: 220svh; min-height: 0; }
    .up-cinematic-stage { top: 64px; height: calc(100svh - 64px); min-height: 0; }
    .up-cinematic-stage .tech-journey-layout {
        height: 100%;
        padding: 18px 0;
        justify-content: center;
    }
    .up-cinematic-stage .tech-journey-visual { height: min(35svh, 330px); }
}
@media (prefers-reduced-motion: reduce) {
    .up-overlap-sequence { height: auto; }
    .up-cinematic-stage { position: static; height: auto; overflow: visible; }
    .up-overlap-sequence > .up-cinematic-stage > .hero,
    .up-overlap-sequence > .up-cinematic-stage > .tech-journey {
        position: relative;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ==============================================================
   ETAPA 07E — SEGUNDO CENARIO INTEGRADO E TELA CHEIA
   Mantem as classes, o cabecalho fixo e os efeitos existentes.
   ============================================================== */
.up-overlap-sequence {
    height: 235svh;
    background: #061b2f;
}

.up-cinematic-stage {
    top: var(--up-header-height, 68px);
    height: calc(100svh - var(--up-header-height, 68px));
    min-height: 0;
}

.up-cinematic-stage > .hero,
.up-cinematic-stage > .tech-journey {
    height: 100%;
    min-height: 0;
}

/* O segundo cenario ocupa todo o palco, sem faixas escuras extras. */
.up-cinematic-stage .tech-journey,
.up-cinematic-stage .tech-journey-scene {
    background: radial-gradient(ellipse at 78% 50%, #075778 0%, #093c58 32%, #06243b 68%, #061b2f 100%);
}

.up-cinematic-stage .tech-journey-scene {
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.up-cinematic-stage .tech-journey-grid,
.up-cinematic-stage .tech-journey-glow {
    opacity: .16;
    pointer-events: none;
}

.up-cinematic-stage .tech-journey-layout {
    position: relative;
    z-index: 2;
    width: min(1400px, calc(100% - 64px));
    max-width: 1400px;
    height: 100%;
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 80px);
    align-items: center;
    padding: clamp(30px, 5vh, 72px) 0;
}

.up-cinematic-stage .tech-journey-copy {
    position: relative;
    z-index: 3;
    max-width: 590px;
}

.up-cinematic-stage .tech-journey-copy h2 {
    font-size: clamp(38px, 3.6vw, 66px);
    line-height: 1.13;
    letter-spacing: -.045em;
}

.up-cinematic-stage .tech-journey-copy p {
    max-width: 510px;
    line-height: 1.8;
}

.up-cinematic-stage .tech-journey-visual {
    position: relative;
    width: 100%;
    height: min(77svh, 730px);
    min-height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.up-cinematic-stage .tech-journey-image-main {
    position: absolute;
    inset: 0 -5% 0 -12%;
    width: 117%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
}

.up-cinematic-stage .tech-journey-image-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center right;
    filter: saturate(.93) contrast(.98);
    transform: none;
}

.up-cinematic-stage .tech-journey-bottomline {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    opacity: .7;
}

/* Suaviza o excesso de contraste do primeiro equipamento. */
.up-cinematic-stage .hero-visual-3d .hero-equipment-image {
    filter: saturate(.84) contrast(.94) brightness(.96);
}
.up-cinematic-stage .hero-visual-3d:hover .hero-equipment-image {
    filter: saturate(.92) contrast(.98) brightness(1);
}
.up-cinematic-stage .hero-3d-photo-shade {
    background: linear-gradient(180deg, rgba(5,25,47,.07), transparent 52%, rgba(3,19,36,.38));
}

@media (max-width: 900px) {
    .up-cinematic-stage .tech-journey-layout {
        width: min(100% - 36px, 900px);
        gap: 14px;
    }
    .up-cinematic-stage .tech-journey-copy h2 {
        font-size: clamp(30px, 4.5vw, 48px);
    }
}

@media (max-width: 760px) {
    .up-overlap-sequence { height: 210svh; }
    .up-cinematic-stage {
        top: var(--up-header-height, 64px);
        height: calc(100svh - var(--up-header-height, 64px));
    }
    .up-cinematic-stage .tech-journey-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: calc(100% - 32px);
        padding: 20px 0;
    }
    .up-cinematic-stage .tech-journey-copy {
        width: 100%;
        flex: 0 0 auto;
    }
    .up-cinematic-stage .tech-journey-copy h2 {
        font-size: clamp(28px, 7vw, 42px);
        margin: 12px 0;
    }
    .up-cinematic-stage .tech-journey-copy p {
        font-size: 13px;
        line-height: 1.5;
    }
    .up-cinematic-stage .tech-journey-visual {
        width: 100%;
        height: min(40svh, 360px);
        flex: 0 1 auto;
    }
    .up-cinematic-stage .tech-journey-image-main {
        inset: 0;
        width: 100%;
        height: 100%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .up-cinematic-stage .tech-journey-image-main img {
        object-fit: contain;
        object-position: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .up-overlap-sequence { height: auto; }
    .up-cinematic-stage { height: auto; }
    .up-cinematic-stage .tech-journey-layout {
        min-height: 580px;
    }
}


/* ================================================================
   ETAPA 07F — DISSOLUCAO CINEMATOGRAFICA COM FUNDO FIXO
   Primeira cena permanece no palco; segunda revela-se por baixo
   do menu, entrando suavemente de baixo para cima.
   ================================================================ */
.up-overlap-sequence {
    --up-fade: 0;
    --up-rise: 0;
    --up-depth: 0;
    height: 245svh;
}
.up-cinematic-stage {
    top: var(--up-header-height, 68px);
    height: calc(100svh - var(--up-header-height, 68px));
    isolation: isolate;
    overflow: hidden;
}
/* Banner inicial não se desloca verticalmente: apenas dissolve. */
.up-overlap-sequence > .up-cinematic-stage > .hero {
    z-index: 1;
    transform: scale(calc(1 + var(--up-depth) * .055));
    transform-origin: center center;
    opacity: calc(1 - var(--up-fade));
    filter: brightness(calc(1 - var(--up-fade) * .12));
    will-change: transform, opacity;
}
/* O segundo cenário sobe sobre o primeiro e ocupa o palco inteiro. */
.up-overlap-sequence > .up-cinematic-stage > .tech-journey {
    z-index: 2;
    transform: translate3d(0, calc((1 - var(--up-rise)) * 100%), 0);
    opacity: var(--up-rise);
    will-change: transform, opacity;
}
.up-cinematic-stage .tech-journey-scene { height: 100%; }
@media (max-width: 760px) {
    .up-overlap-sequence { height: 215svh; }
    .up-cinematic-stage {
        top: var(--up-header-height, 64px);
        height: calc(100svh - var(--up-header-height, 64px));
    }
    .up-overlap-sequence > .up-cinematic-stage > .hero {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .up-overlap-sequence { height: auto; }
    .up-cinematic-stage { position: static; height: auto; overflow: visible; }
    .up-overlap-sequence > .up-cinematic-stage > .hero,
    .up-overlap-sequence > .up-cinematic-stage > .tech-journey {
        position: relative;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }
}


/* ETAPA 07G — isolamento dos textos e movimento da segunda imagem */
.up-overlap-sequence { --up-image-motion: 0; }
/* Fundo opaco no palco da segunda cena: não deixa letras do hero vazarem. */
.up-overlap-sequence > .up-cinematic-stage > .tech-journey {
    background: #061b2f;
    overflow: hidden;
    isolation: isolate;
}
.up-cinematic-stage .tech-journey-scene {
    background: radial-gradient(ellipse at 78% 50%, #075778 0%, #093c58 32%, #06243b 68%, #061b2f 100%);
    isolation: isolate;
}
/* A imagem se move dentro da moldura, sem alterar a dimensão do banner. */
.up-cinematic-stage .tech-journey-image-main img {
    transform: translate3d(calc(var(--up-image-motion) * -10px), calc(var(--up-image-motion) * -16px), 0)
               scale(calc(1.025 + var(--up-image-motion) * .035));
    transform-origin: center center;
    will-change: transform;
    transition: filter .65s ease;
}
@media (prefers-reduced-motion: reduce) {
    .up-cinematic-stage .tech-journey-image-main img {
        transform: none !important;
        will-change: auto;
    }
}


/* ETAPA 07H — movimento perceptivel e continuo no segundo cenario */
.up-cinematic-stage .tech-journey-image-main { overflow: hidden; }
.up-cinematic-stage .tech-journey-image-main img {
    animation: up-second-cinematic-breathe 13s ease-in-out infinite alternate;
    transform-origin: 52% 50%;
}
@keyframes up-second-cinematic-breathe {
    from { transform: translate3d(calc(var(--up-image-motion, 0) * -20px), calc(var(--up-image-motion, 0) * -12px), 0) scale(calc(1.035 + var(--up-image-motion, 0) * .045)); }
    to { transform: translate3d(calc(var(--up-image-motion, 0) * -38px), calc(var(--up-image-motion, 0) * -28px), 0) scale(calc(1.075 + var(--up-image-motion, 0) * .045)); }
}
@media (prefers-reduced-motion: reduce) {
    .up-cinematic-stage .tech-journey-image-main img { animation: none !important; transform: none !important; }
}

/* ETAPA 07I — profundidade interativa do segundo equipamento */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .up-cinematic-stage .tech-journey-visual {
    perspective: 1100px;
    transform-style: preserve-3d;
  }
  .up-cinematic-stage .tech-journey-image-main {
    transform: perspective(1100px) rotateX(var(--up-second-rotate-x, 0deg)) rotateY(var(--up-second-rotate-y, 0deg)) translate3d(0, var(--up-second-lift, 0px), 0);
    transform-origin: center center;
    transition: transform 380ms cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }
  .up-cinematic-stage .tech-journey-image-main img {
    animation: up-second-ken-burns 8s ease-in-out infinite alternate;
    transform-origin: 55% 50%;
  }
  @keyframes up-second-ken-burns {
    from { transform: translate3d(0,0,0) scale(1.025); }
    to { transform: translate3d(-16px,-10px,0) scale(1.085); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .up-cinematic-stage .tech-journey-image-main { transform: none !important; transition: none !important; }
  .up-cinematic-stage .tech-journey-image-main img { animation: none !important; }
}

/* ETAPA 08 — card piloto no site, sem modificar banners aprovados */
#equipamentos .eq-card {border-radius:18px;overflow:hidden;border:1px solid rgba(32,113,147,.18);box-shadow:0 12px 32px rgba(8,36,57,.08);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease;}
#equipamentos .eq-card:hover {transform:translateY(-9px);box-shadow:0 25px 55px rgba(6,40,67,.19);border-color:rgba(35,172,214,.48);}
#equipamentos .eq-art-photo {height:225px;overflow:hidden;background:#06243b;}
#equipamentos .eq-art-photo img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .85s ease;}
#equipamentos .eq-card:hover .eq-art-photo img {transform:scale(1.09);filter:saturate(1.08);}
#equipamentos .card-info {padding:23px;}
@media(max-width:760px){#equipamentos .eq-art-photo{height:190px;}}
@media(prefers-reduced-motion:reduce){#equipamentos .eq-card,#equipamentos .eq-art-photo img{transition:none!important;transform:none!important;}}

/* ETAPA 10 - VIDEO INSTITUCIONAL E SOBRE A EMPRESA */
.up-film-section{background:linear-gradient(150deg,#061a2d,#0b3352 58%,#061c30);color:#fff;padding:90px 0 82px;overflow:hidden}
.up-film-intro{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px}
.up-film-intro>div{max-width:750px}
.up-film-intro h2{font-size:clamp(32px,3.8vw,54px);line-height:1.13;margin:16px 0}
.up-film-intro h2 em{color:#74d9f2;font-style:normal}
.up-film-intro p{color:#b9d3e3;line-height:1.75;max-width:700px;margin:0}
.up-film-intro .btn{flex-shrink:0}
.up-film-frame{position:relative;aspect-ratio:16/9;max-height:690px;overflow:hidden;border:1px solid rgba(121,214,239,.3);border-radius:22px;background:#061d31;box-shadow:0 26px 70px rgba(0,0,0,.35)}
.up-film-video{display:block;width:100%;height:100%;object-fit:cover}
.up-film-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,18,33,.72),transparent 25%,transparent 75%,rgba(2,18,33,.16));pointer-events:none}
.up-film-label,.up-film-disclaimer{position:absolute;z-index:1;bottom:24px;color:#e4f7ff;font-size:11px;letter-spacing:.12em;font-weight:800;text-shadow:0 2px 10px #000}
.up-film-label{left:28px;display:flex;align-items:center;gap:11px}
.up-film-label i{width:6px;height:6px;border-radius:50%;background:#68e1eb;box-shadow:0 0 10px #68e1eb}
.up-film-disclaimer{right:28px;font-size:10px;font-weight:500;letter-spacing:.04em;color:#c7d8e4}
.up-about-section{padding:95px 0;background:#f6fafc}
.up-about-layout{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:80px}
.up-about-identity{position:relative;isolation:isolate;min-height:340px;border-radius:24px;background:radial-gradient(circle at 50% 45%,#145c83,#082b49 55%,#061d32);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 20px 48px rgba(7,39,64,.15)}
.up-about-identity::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(115,208,241,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(115,208,241,.06) 1px,transparent 1px);background-size:35px 35px;z-index:-1}
.up-about-orbit{position:absolute;width:76%;aspect-ratio:1;border:1px solid rgba(90,213,244,.34);border-radius:50%;box-shadow:0 0 70px rgba(50,196,236,.16)}
.up-about-identity strong{font-family:var(--fonte-titulo);font-size:clamp(29px,4vw,48px);letter-spacing:-.05em;text-shadow:0 6px 20px #00192b}
.up-about-identity>span:last-child{color:#9de1f3;font-size:10px;letter-spacing:.17em;font-weight:800;margin-top:10px;text-align:center;padding:0 14px}
.up-about-copy h2{max-width:560px}.up-about-copy p{line-height:1.8;color:var(--muted);max-width:600px}
@media(max-width:760px){.up-film-section{padding:65px 0}.up-film-intro{display:block}.up-film-intro .btn{margin-top:24px}.up-film-frame{border-radius:14px}.up-film-label{bottom:13px;left:13px;font-size:8px}.up-film-disclaimer{right:12px;bottom:13px;font-size:8px}.up-about-section{padding:65px 0}.up-about-layout{grid-template-columns:1fr;gap:30px}.up-about-identity{min-height:250px}}
@media(max-width:440px){.up-film-disclaimer{display:none}}
@media(prefers-reduced-motion:reduce){.up-about-orbit{animation:none!important}}

/* ETAPA 11 — video em largura total, preservando banners e cards */
.up-film-fullbleed{width:100%;max-width:none;margin:0}
.up-film-fullbleed .up-film-frame{width:100%;max-height:none;aspect-ratio:16/7.5;border:0;border-radius:0;box-shadow:none}
.up-film-fullbleed .up-film-video{object-fit:cover;object-position:center}
.up-film-fullbleed .up-film-label{left:max(28px,calc((100vw - var(--largura-maxima))/2))}
.up-film-fullbleed .up-film-disclaimer{right:max(28px,calc((100vw - var(--largura-maxima))/2))}
.up-film-section{padding-bottom:0}
.up-about-copy p strong{color:#0a4161}
@media(max-width:760px){.up-film-fullbleed .up-film-frame{aspect-ratio:16/10}.up-film-fullbleed .up-film-label{left:16px}.up-film-fullbleed .up-film-disclaimer{right:16px}}

/* ETAPA 12 — apresentação de manutenção e fotografia com curva diagonal */
.up-film-intro p{max-width:810px}
.up-about-section{background:linear-gradient(105deg,#f5fafc 0%,#f6fafc 58%,#eaf5fa 100%);overflow:hidden}
.up-about-layout{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(30px,4.2vw,76px);min-height:490px}
.up-about-copy{position:relative;z-index:2;padding:12px 0}
.up-about-copy h2{max-width:650px}
.up-about-copy p{max-width:640px}
.up-about-visual{position:relative;align-self:stretch;min-height:440px;margin-right:calc((min(100vw, var(--largura-maxima)) - 100vw)/2);overflow:hidden;isolation:isolate;background:#092f4b;border-radius:42% 0 0 20% / 70% 0 0 36%;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);box-shadow:-18px 20px 60px rgba(6,54,88,.17)}
.up-about-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:53% center;transform:scale(1.035);transition:transform 1.2s ease}
.up-about-visual:hover img{transform:scale(1.075)}
.up-about-visual-glow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,72,111,.28),transparent 40%),linear-gradient(0deg,rgba(2,22,39,.2),transparent 45%)}
@media(max-width:760px){.up-about-layout{grid-template-columns:1fr;gap:26px}.up-about-visual{min-height:300px;margin:0 -16px;clip-path:none;border-radius:25% 0 0 12% / 32% 0 0 18%}.up-about-copy{padding:0}}
@media(prefers-reduced-motion:reduce){.up-about-visual img{transition:none;transform:none!important}}

/* ETAPA 15 — Landing page técnica Siemens Symbia */
.symbia-detail{background:#f6f9fc}.symbia-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}.symbia-intro p,.symbia-section-title p{color:#526778;line-height:1.85;font-size:15px}.symbia-photo{margin:0;overflow:hidden;border-radius:24px;background:#092c46;box-shadow:0 24px 65px #102f4822}.symbia-photo img{width:100%;height:330px;display:block;object-fit:cover}.symbia-photo figcaption{padding:13px 20px;color:#cce7f3;background:#092c46;font-size:12px}.symbia-section-title{margin:75px 0 25px;max-width:790px}.symbia-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.symbia-tile{padding:30px;border:1px solid #dbe7ee;border-radius:18px;background:white;box-shadow:0 8px 25px #123b5309}.symbia-tile>span{font-size:10px;font-weight:800;letter-spacing:.14em;color:#1386ad}.symbia-tile h3{font-size:20px;line-height:1.35;margin:18px 0 12px;color:#092b42}.symbia-tile p{font-size:14px;line-height:1.8;color:#526778;margin:0}.symbia-closing{display:flex;align-items:center;justify-content:space-between;gap:42px;margin-top:65px;padding:40px;border-radius:22px;background:linear-gradient(110deg,#071f34,#104363);color:white}.symbia-closing>div{max-width:720px}.symbia-closing h2{color:white}.symbia-closing p{color:#d0e4ed;line-height:1.75;margin-bottom:0}.symbia-closing .btn{flex-shrink:0}.symbia-note{margin:24px 0 0;font-size:12px;line-height:1.7;color:#647787}@media(max-width:900px){.symbia-intro{grid-template-columns:1fr;gap:24px}.symbia-grid{grid-template-columns:1fr 1fr}.symbia-closing{display:block}.symbia-closing .btn{margin-top:24px}}@media(max-width:600px){.symbia-grid{grid-template-columns:1fr}.symbia-photo img{height:240px}.symbia-section-title{margin-top:52px}.symbia-closing{padding:25px}.symbia-tile{padding:24px}}

/* ETAPA 16 — barra fixa compacta de atendimento */
body { padding-bottom: 66px; }
.up-contact-bar { position:fixed; z-index:1100; left:0; right:0; bottom:0; min-height:58px; background:rgba(7,35,57,.97); border-top:1px solid rgba(105,195,223,.24); color:#fff; box-shadow:0 -5px 25px rgba(0,0,0,.15); backdrop-filter:blur(10px); }
.up-contact-bar-inner { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.up-contact-bar-copy { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.up-contact-bar-copy strong { font-weight:700; }
.up-contact-bar-copy span { font-size:11px; color:#b9d6e6; }
.up-contact-bar-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#168447; color:white; font-size:12px; font-weight:700; padding:10px 18px; border-radius:22px; white-space:nowrap; transition:background .2s ease,transform .2s ease; }
.up-contact-bar-button:hover,.up-contact-bar-button:focus-visible { background:#0e9b4b; transform:translateY(-1px); }
@media(max-width:600px) { body { padding-bottom:60px; } .up-contact-bar-inner { min-height:54px; } .up-contact-bar-copy strong { font-size:11px; } .up-contact-bar-copy span { display:none; } .up-contact-bar-button { padding:9px 14px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .up-contact-bar-button { transition:none; } }