.content-frame{position:static;width:100%;height:calc(100% - var(--header-height) - var(--safe-area-top) - var(--safe-area-bottom));margin-top:calc(var(--header-height) + var(--safe-area-top))}

/* Portrait is one cinematic scene: title above the DNA, explanation below it,

   all sharing the same full-bleed backdrop. The four services remain visible. */

@media(max-width:1100px) and (orientation:portrait){

 :root{--header-height:62px;--gutter:22px;--mobile-dock:132px}

 html{scrollbar-width:none}html::-webkit-scrollbar{display:none}

 .journey{height:440svh}

 .stage{height:100svh;min-height:0;position:sticky;display:block;overflow:hidden}

 .header{padding-left:var(--gutter);padding-right:var(--gutter);background:linear-gradient(#020202f5,#020202bd);backdrop-filter:blur(12px);border-bottom-color:#ffffff10}

 .brand{min-height:44px}.brand svg{width:102px;height:28px}

 .brand-caption,.edition{display:none}.overview-button{font-size:12px;min-height:44px;gap:8px;padding:0 10px;border:1px solid #ffffff24}

 .film-region{position:absolute;inset:0;overflow:hidden;margin:0;height:auto;pointer-events:none}

 .film-frame{left:-22%;width:144%;top:43%;transform:translateY(-50%)}

 .film-frame video,.film-frame>.poster{mask-image:linear-gradient(180deg,transparent,#000 13%,#000 86%,transparent);mask-composite:add}

 .film-region::after{background:linear-gradient(180deg,#020202bd 0,#02020244 16%,transparent 30%,transparent 53%,#020202b3 67%,#020202f5 85%)}

 .ambient{background:radial-gradient(ellipse at 50% 40%,#17171720,transparent 62%)}

 .copy{position:absolute;inset:calc(var(--header-height) + var(--safe-area-top) + 20px) var(--gutter) calc(var(--mobile-dock) + var(--safe-area-bottom) + 24px);width:auto;max-width:none;margin:0;padding:0;display:flex;flex-direction:column}

 

 

 .copy h1:not(.brand-headline){font-size:clamp(30px,8.8vw,56px);line-height:1.06;min-height:2.12em;margin:0;letter-spacing:-.045em}

 .brand-headline{min-height:0;margin:0}.brand-headline .title-line:first-child{font-size:clamp(105px,29vw,200px);line-height:.85;margin-bottom:16px}

 .brand-headline .title-line.accent{font-size:clamp(17px,4.8vw,33px);line-height:1.2;letter-spacing:-.03em}

 .service-summary{position:relative;margin-top:auto;padding-top:16px;isolation:isolate}

 .service-summary::before{content:'';position:absolute;inset:-14px calc(-1 * var(--gutter)) -12px;z-index:-1;background:linear-gradient(180deg,transparent,#020202e6 32%,#020202f5)}

 .description{font-size:15px;line-height:1.55;color:#e5e3e0;margin:0;min-height:0;max-width:550px;text-wrap:pretty}

 .tags{display:none}

 .actions{display:flex;flex-wrap:nowrap;gap:10px;margin-top:18px;min-height:50px}

 .primary{flex:1;min-width:0;min-height:54px;font-size:13px;gap:8px;padding:5px;border-radius:13px}

 .button-label{flex:1;min-width:0;padding:0 12px;white-space:normal;text-align:left;justify-content:flex-start}

 .primary>.icon{width:40px;height:40px;padding:11px;border-radius:8px}

 /* The four persistent service buttons already provide direct navigation. */

 .next{display:none}

 .next .icon{width:19px;height:19px;transform:none;color:var(--accent)}

 #next-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

 .journey-bottom{position:absolute;inset:auto 0 var(--safe-area-bottom);margin:0;padding:0 var(--gutter);background:linear-gradient(180deg,#02020288,#020202 55%);height:var(--mobile-dock)}

 .nav-intro{display:none}

 .ecosystem-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:1px solid #ffffff26;border-bottom:0;background:transparent;padding-top:14px}

 .ecosystem-button{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;min-height:62px;padding:10px 9px;border:1px solid #ffffff12!important;border-radius:9px;background:#ffffff03;text-align:left}

 .ecosystem-button .nav-number{display:none}.nav-text{gap:5px;align-items:flex-start;max-width:100%;min-width:0}.nav-text strong{font-size:13px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}.nav-text small{display:none}

 .service-emblem{width:34px;height:34px;flex:0 0 34px}

 .nav-name-break{display:inline;height:auto}.nav-name-break::after{content:" "}

 .ecosystem-button[aria-current=true]{background:linear-gradient(180deg,rgba(var(--service-rgb),.12),rgba(var(--service-rgb),.025));border-radius:9px}

 .nav-active{height:2px;top:0;left:10px;right:10px}

 footer{min-height:84px;height:auto;padding:16px 0 22px;gap:8px;align-items:center;font-size:11px}

 .footer-note,.scroll-symbol{display:none}.scroll-hint{font-size:11px;max-width:none}.scroll-hint>span:last-child{font-size:0}.scroll-hint>span:last-child::after{content:'Desliza para explorar';font-size:11px}

 #motion-toggle{font-size:11px;min-height:44px;padding:0;max-width:none;text-align:right}

 .progress-track{height:2px}

 #marker .marker-label{width:155px;min-height:43px;padding:8px 10px;gap:9px;background:linear-gradient(120deg,#0b0b0be8,#070707d9);backdrop-filter:blur(10px)}

 #marker .marker-index{font-size:16px;min-width:25px;padding-right:8px}

 #marker .marker-identity{gap:0}#marker strong{font-size:12px;letter-spacing:-.02em}

 #marker .marker-kicker{display:none}#marker .marker-notch{width:7px;height:7px}

 #marker .target-ring{width:16px;height:16px;box-shadow:0 0 0 4px #06060622}

 #marker .target-ring i{width:4px;height:4px}

 dialog{padding:22px;max-height:calc(100svh - 32px - var(--safe-area-top) - var(--safe-area-bottom));width:calc(100% - 32px)}

 .detail-lead{font-size:16px;line-height:1.5}dialog li{font-size:14px;line-height:1.55;padding:12px 0}

 .static-mode .stage{position:relative}.static-mode .journey{height:auto}

}

@media(max-width:1100px) and (orientation:portrait) and (max-height:740px){

 :root{--header-height:56px;--gutter:18px;--mobile-dock:126px}

 .copy{top:calc(var(--header-height) + var(--safe-area-top) + 12px);bottom:calc(var(--mobile-dock) + var(--safe-area-bottom) + 20px)}

 

 .copy h1:not(.brand-headline){font-size:clamp(29px,8.5vw,44px)}

 .brand-headline .title-line:first-child{font-size:clamp(98px,27vw,155px);margin-bottom:12px}

 .description{line-height:1.45}.service-summary{padding-top:12px}.actions{margin-top:12px;min-height:46px}

 .primary,.next{min-height:50px}.primary>.icon{width:36px;height:36px;padding:9px}.ecosystem-button{min-height:62px;gap:8px}.service-emblem{width:30px;height:30px;flex-basis:30px}

 .film-frame{top:42%}

}

@media(min-width:600px) and (max-width:1100px) and (orientation:portrait){

 :root{--gutter:40px;--header-height:72px;--mobile-dock:152px}

 .copy{top:calc(var(--header-height) + var(--safe-area-top) + 30px);bottom:calc(var(--mobile-dock) + var(--safe-area-bottom) + 28px)}

 .description{font-size:16px}.actions{max-width:550px}.film-frame{left:-10%;width:120%;top:43%}

 .service-emblem{width:42px;height:42px;flex-basis:42px}.ecosystem-button{min-height:70px;gap:12px}.nav-text strong{font-size:16px}

 #marker .marker-label{width:190px;min-height:52px}#marker strong{font-size:15px}

}

/* Short enlarged-text views reflow instead of clipping essential content. */

@media(max-width:1100px) and (orientation:portrait) and (max-height:590px){

 .content-frame{height:auto;margin-top:0}

 .stage{height:auto;min-height:100svh;overflow:visible}.copy{position:relative;inset:auto;margin:0 var(--gutter);padding-top:calc(var(--header-height) + var(--safe-area-top) + 14px);padding-bottom:20px;min-height:420px}

 .service-summary{margin-top:100px}.journey-bottom{position:relative;inset:auto;padding-bottom:var(--safe-area-bottom);height:auto}.film-frame{top:220px}.journey{height:auto}

}

@media(orientation:landscape) and (max-height:430px){.content-frame{height:auto;margin-top:0}}

@media(min-width:761px) and (orientation:landscape) and (min-height:431px) and (max-height:650px){

 .copy{top:calc(var(--header-height) + 16px)}.copy h1:not(.brand-headline){font-size:clamp(34px,4vw,44px)}

 .brand-headline .title-line:first-child{font-size:clamp(98px,10vw,140px)}.description{min-height:0}.actions{margin-top:14px}

 .brand-headline+.service-summary .tags{display:none}

}

@media(orientation:landscape) and (min-width:700px) and (min-height:360px) and (max-height:430px){

 .stage{display:block;height:100svh;min-height:calc(360px + var(--safe-area-top) + var(--safe-area-bottom));overflow:hidden}

 .content-frame{height:calc(100% - var(--header-height) - var(--safe-area-top) - var(--safe-area-bottom));margin-top:calc(var(--header-height) + var(--safe-area-top))}

 .copy{position:absolute;top:calc(var(--header-height) + var(--safe-area-top) + 8px);left:var(--gutter);right:auto;width:49%;max-width:none;margin:0;padding:0}

 .copy h1:not(.brand-headline){font-size:28px;min-height:2.16em;margin-bottom:6px}

 .brand-headline{margin-bottom:8px}.brand-headline .title-line:first-child{font-size:68px;margin-bottom:8px}.brand-headline .title-line.accent{font-size:17px}

 .description{font-size:14px;line-height:1.4;min-height:0;margin:0}

 .actions{margin-top:10px;flex-wrap:nowrap!important}.primary>.icon{width:32px;height:32px;padding:8px}

 .film-region{position:absolute;inset:var(--header-height) 0 104px;height:auto;margin:0}

 .film-frame{left:45%;width:63%;top:50%}.film-region::after{background:linear-gradient(90deg,#020202e6 30%,transparent 65%)}

 .journey-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--safe-area-bottom);margin:0;padding:0}

 .nav-intro{display:none}

}

@media(forced-colors:active) and (max-width:1100px) and (orientation:portrait){

 .service-summary::before{display:none}.description{color:CanvasText}.next{background:ButtonFace;border-color:ButtonText}

 .ecosystem-button{border:1px solid ButtonText!important}.copy{justify-content:space-between}.service-summary{margin-top:16px}

}