/* FIVE DEMOFILMS v25 · STRUCTURAL CLEANUP ROUND 2 */
:root{--black:#080807;--ink:#11100e;--gold:#b58a3a;--gold2:#d2ad63;--beige:#e9e0d0;--paper:#f2ecdf}
.folio{display:none!important}
main>.scene{position:relative;border-radius:28px 28px 0 0;overflow:clip}
main>.scene:not(:first-child){margin-top:-3.2vh}
main>.scene:nth-child(1){z-index:1}main>.scene:nth-child(2){z-index:2}main>.scene:nth-child(3){z-index:3}main>.scene:nth-child(4){z-index:4}main>.scene:nth-child(5){z-index:5}main>.scene:nth-child(6){z-index:6}main>.scene:nth-child(7){z-index:7}main>.scene:nth-child(8){z-index:8}main>.scene:nth-child(9){z-index:9}
.scene.dark{background:var(--black)!important;color:var(--beige)!important}.scene.light{background:var(--paper)!important;color:var(--ink)!important}
.scene.dark h1,.scene.dark h2,.scene.dark h3,.scene.dark p,.scene.dark small{color:var(--beige)}.scene.light h1,.scene.light h2,.scene.light h3,.scene.light p,.scene.light small{color:var(--ink)}
.scene h1 em,.scene h2 em,.scene h3 em,.scene .section-label span,.scene .service-copy strong{color:var(--gold2)!important}
/* 00 NAV / HERO */
#nav,.nav.scrolled{height:68px!important;background:#080807d9!important;backdrop-filter:blur(15px)!important;border-bottom:1px solid #ffffff0d!important;box-shadow:0 12px 28px #0003!important;transition:none!important;padding:0 5vw!important}
#nav .brand{width:84px!important;height:54px!important;flex:0 0 84px!important}#nav .brand img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:left center!important}
#nav nav{display:flex!important;position:static!important;flex-direction:row!important;align-items:center!important;gap:clamp(12px,2.2vw,30px)!important;padding:0!important;background:none!important;font-size:clamp(8px,.7vw,10px)!important;white-space:nowrap}
#hero{border-radius:0}#hero .hero-copy{transform:none!important;bottom:8vh!important}
#hero .brand-kicker{position:absolute!important;z-index:5;top:clamp(142px,18vh,182px)!important;left:-1vw!important;width:min(47.3vw,759px)!important;margin:0!important;transform:none!important}
#hero .brand-kicker img{display:block;width:100%;height:auto;object-fit:contain}
#hero .hero-media{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(43vw,760px)!important;height:100vh!important;max-height:none!important;overflow:hidden!important}
#hero .hero-media video,#hero .hero-media .media-empty{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
/* 02 SERVICES */
#servicios .service-tabs{border-color:#ffffff1a!important}#servicios .service-tabs button{color:#90897f!important;border-color:#ffffff1a!important}#servicios .service-tabs button.active{background:var(--gold2)!important;color:var(--ink)!important}#servicios .service-copy h3,#servicios .service-copy p{color:var(--beige)!important;text-shadow:none!important}
/* 03 SELECTED MOTION: square media, captions outside, clean status text */
#portfolio{height:205vh!important}#portfolio .portfolio-sticky{padding:7vh 0 5vh 6vw!important;display:flex;flex-direction:column;transform:none!important}#portfolio .portfolio-window{flex:1;min-height:0;margin-top:2vh!important;overflow:hidden}
#portfolio .portfolio-track{display:flex!important;align-items:flex-start!important;height:auto!important;width:max-content!important;gap:25px!important;will-change:transform}
#portfolio .portfolio-track article{width:min(42vw,600px)!important;height:auto!important;max-width:none!important;display:grid!important;grid-template-rows:auto auto auto!important;padding:0!important;background:none!important;overflow:visible!important;position:relative!important}
#portfolio .portfolio-track article>video,#portfolio .portfolio-track article>.asset-placeholder{grid-row:1!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important;background:#16120d!important}
#portfolio .portfolio-track article>.asset-placeholder{position:absolute!important;inset:0 0 auto 0!important;margin:0!important;z-index:1!important}
#portfolio .portfolio-track article>video{position:relative!important;z-index:2!important;display:block!important}
#portfolio .portfolio-track article>p{grid-row:2!important;position:static!important;margin:5px 0 1px!important;padding:0!important;color:var(--gold)!important;background:none!important;line-height:1.1!important}
#portfolio .portfolio-track article>h3{grid-row:3!important;position:static!important;margin:0!important;padding:0!important;color:var(--ink)!important;background:none!important}
#portfolio .motion-status{position:absolute!important;top:12px!important;left:12px!important;z-index:5!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;text-shadow:none!important;color:var(--ink)!important}
/* 04 METHOD, 05 COMPARISON: restore native scroll-driven geometry */
#metodo .method-stage,#metodo .method-progress,#metodo .method-numbers{width:100%!important;box-sizing:border-box!important}#metodo .method-numbers{display:flex!important;justify-content:space-between!important}#metodo .method-numbers button{transform:none!important}
#comparacion .wipe{position:relative!important;overflow:hidden!important}#comparacion #wipeResult{will-change:clip-path}#comparacion #wipeLine{will-change:left}
/* 06 FLEXIBLE */
#flexible{height:250vh!important}#flexible .flexible-sticky{position:sticky!important;top:0!important;height:100vh!important;overflow:hidden!important}#flexible .safe-zone{width:min(48.14%,340px)!important;height:auto!important;aspect-ratio:1/1!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;display:grid!important;place-items:center!important;box-sizing:border-box!important}#flexible .flex-title-line{display:block!important}
/* 07 EXPERIENCE: finite lateral track, softer lower gradient, captions seated low */
#experiencia .cap-window{overflow:hidden!important}#experiencia .cap-track{display:flex!important;width:max-content!important;gap:18px!important;will-change:transform}
#experiencia .cap-track article{position:relative!important;width:min(27vw,390px)!important;min-width:330px!important;aspect-ratio:1/1!important;height:auto!important;padding:18px 20px!important;overflow:hidden!important;background:var(--ink)!important;color:var(--beige)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
#experiencia .cap-track article>video,#experiencia .cap-track article>.asset-placeholder{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important}
#experiencia .cap-track article:after{content:"";position:absolute;inset:50% 0 0!important;z-index:2;background:linear-gradient(0deg,#000c 0,#0005 58%,transparent 100%)!important}
#experiencia .cap-track article>b,#experiencia .cap-track article>p{position:relative!important;z-index:4!important;left:auto!important;right:auto!important;bottom:auto!important;color:var(--beige)!important}
#experiencia .cap-track article>b{margin:0 0 4px!important;font-size:clamp(24px,2.7vw,42px)!important;line-height:1!important}#experiencia .cap-track article>p{margin:0!important;padding:0!important;line-height:1.28!important;font-size:12px!important}
/* 08 CONTACT: exact isolated five-point star, no eccentric trajectory */
#contacto .contact-final-star,#contacto .contact-star{display:none!important}
@keyframes fiveContactSpin{to{transform:rotate(360deg)}}
#contacto .contact-orbit-star{position:absolute!important;right:7vw!important;top:23vh!important;width:clamp(170px,25vw,420px)!important;height:clamp(170px,25vw,420px)!important;display:grid!important;place-items:center!important;z-index:1!important;pointer-events:none!important}
#contacto .contact-orbit-star .star{display:block!important;color:var(--gold)!important;font-size:clamp(170px,25vw,420px)!important;line-height:1!important;filter:drop-shadow(0 0 25px #b58a3a99)!important;transform-origin:50% 50%!important;animation:fiveContactSpin 11s linear infinite!important;will-change:transform!important}
#contacto .contact-copy,#contacto footer{position:relative!important;z-index:2!important}
#estimatorTrigger{position:relative!important;z-index:10!important;background:none!important;border:0!important;padding:8px!important;margin:-8px!important;cursor:pointer!important;display:inline-flex!important;touch-action:manipulation!important}#estimatorTrigger img{pointer-events:none!important}
/* PRIVATE ESTIMATOR */
.private-estimator,.pin-gate{position:fixed;inset:0;z-index:3000}.private-estimator[hidden],.pin-gate[hidden]{display:none!important}.private-estimator-backdrop,.pin-backdrop{position:absolute;inset:0;border:0;background:#000c;backdrop-filter:blur(12px)}.private-estimator-panel{position:absolute;inset:3vh 3vw;background:var(--paper);color:var(--ink);overflow:auto;border:1px solid #b58a3a55;border-radius:18px}.private-estimator-bar{position:sticky;top:0;z-index:4;height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:#080807;color:var(--beige)}.private-estimator-bar p{font-size:10px;letter-spacing:.2em;color:var(--gold2)}.private-estimator-close{border:1px solid var(--gold);background:none;color:var(--beige);padding:9px 13px}.private-budget{min-height:calc(94vh - 64px)!important;margin:0!important;border-radius:0!important}.pin-box{position:absolute;left:50%;top:50%;width:min(360px,88vw);transform:translate(-50%,-50%);padding:34px;background:var(--paper);color:var(--ink);border:1px solid var(--gold)}.pin-box input{width:100%;font-size:30px;letter-spacing:.3em;border:0;border-bottom:1px solid var(--gold);background:none;padding:14px 0}.pin-box button{margin-top:22px;width:100%;padding:13px;border:1px solid var(--gold);background:var(--ink);color:var(--beige)}.pin-box small{display:block;min-height:20px;color:#9b3c2f;margin-top:8px}body.modal-open{overflow:hidden}
/* VERTICAL composition: same nav; smaller cards. */
@media(orientation:portrait){main>.scene:not(:first-child){margin-top:-2.2vh}main>.scene{border-radius:22px 22px 0 0}#nav{padding:0 3vw!important}#nav .brand{width:76px!important;flex-basis:76px!important}#nav nav{gap:clamp(7px,2.1vw,18px)!important;font-size:clamp(6px,1.55vw,9px)!important}#nav .nav-cta{padding:8px 9px!important}#hero .brand-kicker{left:-5vw!important;width:min(71.5vw,550px)!important;top:142px!important}#hero .hero-media{right:0!important;width:min(64vw,620px)!important;height:100vh!important}.services-sticky,.method-sticky,.comparison-sticky{grid-template-columns:1fr!important}.service-copy{color:var(--beige)!important;text-shadow:none!important}#portfolio .portfolio-track article{width:64vw!important}#flexible .flex-copy{width:36vw!important}#experiencia .cap-track article{width:47.6vw!important;min-width:47.6vw!important}#experiencia .cap-track article>b{font-size:clamp(20px,5vw,32px)!important}.private-estimator-panel{inset:1vh 2vw}.private-budget{grid-template-columns:1fr!important;padding:10vh 6vw!important}.private-budget .estimate-result{position:relative!important;top:auto!important}}
@media(orientation:landscape) and (max-height:700px){.scene h2{font-size:clamp(36px,5vw,68px)}#hero .brand-kicker{top:90px!important}.method-sticky,.services-sticky,.comparison-sticky{padding-top:9vh!important;padding-bottom:6vh!important}}
/* =========================================================
FIVE DEMOFILMS v26 · ROUND SOBRE v25
========================================================= */
/* GENERAL */
.section-label{font-size:clamp(17px,1.5vw,24px)!important}
/* 00 */
#nav nav a{font-size:inherit!important}
#hero .brand-kicker{top:auto!important;bottom:calc(8vh + clamp(245px,25vw,390px))!important;left:-1vw!important;width:min(47.3vw,759px)!important}
#hero .intro{max-width:650px!important}
#hero .discover{font-size:20px!important;gap:04px!important;align-items:center!important}
#hero .discover span{font-size:1em!important;line-height:.7!important}
/* 01 */
#oportunidad .lead{margin-left:18%!important;max-width:900px!important}
#oportunidad .lead strong{display:block!important;color:var(--gold2)!important;font-size:clamp(19px,1.65vw,27px)!important;line-height:1.55!important}
/* 02 */
#servicios .service-copy>p:last-child{font-size:clamp(18px,1.55vw,25px)!important}
/* 03 */
#portfolio .portfolio-track article{width:min(29.4vw,420px)!important;display:block!important;position:relative!important;aspect-ratio:1/1!important;overflow:hidden!important}
#portfolio .portfolio-track article>video,#portfolio .portfolio-track article>.asset-placeholder{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important}
#portfolio .motion-caption{position:absolute!important;z-index:4!important;left:0!important;right:0!important;bottom:0!important;padding:22% 20px 16px!important;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.45) 45%,transparent)!important}
#portfolio .motion-caption p{margin:0 0 4px!important;color:var(--gold2)!important;background:none!important}
#portfolio .motion-caption h3{margin:0!important;color:var(--beige)!important;background:none!important;font-size:clamp(25px,2.5vw,40px)!important}
#portfolio .motion-status{color:var(--beige)!important}
/* 04 */
#metodo .method-title .section-intro{font-size:clamp(20px,1.75vw,29px)!important;max-width:680px!important}
/* 05 */
#comparacion .comparison-copy>p:last-child{font-size:clamp(18px,1.55vw,25px)!important;max-width:560px!important}
#comparacion .wipe-label{display:none!important}
/* 06 */
#flexible .flexible-head .section-intro,#flexible .flex-copy>p:last-child{font-size:clamp(16px,1.25vw,21px)!important}
#flexible .safe-zone{width:46%!important;height:auto!important;aspect-ratio:1/1!important;border:0!important;background:transparent!important;box-shadow:0 0 0 100vmax rgba(0,0,0,.42)!important;color:var(--beige)!important;font-size:clamp(11px,1vw,16px)!important;z-index:4!important}
#flexible .flex-stage{overflow:hidden!important}
#flexible .flex-copy h3{white-space:pre-line!important;line-height:.9!important}
/* 07 */
#experiencia .experience-sticky{padding-top:15vh!important}
#experiencia .experience-head .section-intro,#experiencia .experience-claim{font-size:clamp(17px,1.4vw,23px)!important}
#experiencia .facts{margin-top:7vh!important;margin-bottom:7vh!important;transform:translateY(3vh)!important}
#experiencia .cap-track article{width:min(29.7vw,429px)!important;min-width:363px!important}
#experiencia .cap-track article:after{inset:72% 0 0!important;background:linear-gradient(0deg,#000c,transparent)!important}
#experiencia .cap-track article>b{color:var(--gold2)!important;margin-bottom:4px!important}
#experiencia .cap-track article>p{color:var(--beige)!important;font-size:13.2px!important}
/* 08 */
#contacto .contact-orbit-star .star{animation-duration:11s!important}
#estimatorTrigger{pointer-events:auto!important}
@media(orientation:portrait){
#nav nav{font-size:clamp(6px,1.55vw,9px)!important}
#hero .brand-kicker{left:-5vw!important;bottom:calc(8vh + clamp(270px,48vw,420px))!important;width:min(71.5vw,550px)!important}
#hero .discover{font-size:12px!important}
#oportunidad .lead{margin-left:0!important}
#servicios .services-visual{align-self:start!important;margin-top:1vh!important;height:34vh!important}
#servicios .service-copy{bottom:12vh!important}
#portfolio .portfolio-track article{width:44.8vw!important}
#comparacion .wipe{height:40.8vh!important}
#flexible .flex-stage{height:44.8vh!important;margin-top:1vh!important}
#flexible .flex-copy{left:50%!important;right:auto!important;top:auto!important;bottom:13vh!important;transform:translateX(-50%)!important;width:86vw!important;text-align:center!important}
#flexible .flex-copy h3{margin:3px 0!important;line-height:.82!important}
#flexible .flex-copy>p:last-child{margin:2px auto 0!important;max-width:48ch!important;text-align:center!important}
#flexible .flex-tabs{bottom:3.5vh!important}
#experiencia .experience-sticky{padding-top:14vh!important}
#experiencia .facts{transform:translateY(4vh)!important}
#experiencia .cap-track article{width:38.08vw!important;min-width:38.08vw!important}
#experiencia .cap-track article>b{font-size:clamp(24px,6vw,38px)!important}
#experiencia .cap-track article>p{font-size:13.2px!important}
}
/* v27 editorial update and contact library block */
#contacto{min-height:190vh!important}
#contacto .contact-copy{min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#contacto .library-access{position:relative;z-index:3;min-height:78vh;display:grid;grid-template-columns:1fr minmax(280px,.72fr);align-items:center;gap:clamp(30px,7vw,110px);padding:8vh 0;border-top:1px solid var(--line)}
#contacto .library-access h3{font-size:clamp(42px,5.7vw,92px);line-height:.94;letter-spacing:-.045em;font-weight:400;margin:0}
#contacto .library-access h3 em{font:500 italic 1em 'Playfair Display',serif;color:var(--gold2)}
#contacto .library-access p{max-width:590px;margin:28px 0;color:#716a60;font-size:clamp(15px,1.2vw,20px)}
#contacto .library-video{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#18130e}
#contacto .library-video video,#contacto .library-video-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#contacto .library-video video{z-index:2}.library-video-placeholder{z-index:1;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#725528,#21180f 35%,#0b0a09 75%);color:var(--gold2);font-size:10px;letter-spacing:.14em}
#contacto footer{width:100%}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){#contacto{min-height:210vh!important;padding-inline:6vw!important}#contacto .library-access{grid-template-columns:1fr;gap:26px;padding:8vh 0}#contacto .library-access h3{font-size:clamp(38px,12vw,64px)}#contacto .library-video{width:min(72vw,390px)} }
/* =========================================================
FIVE DEMOFILMS v27 · DESKTOP H/V POLISH
========================================================= */
/* 00 */
@media(orientation:landscape){
#hero .brand-kicker{width:min(40vw,640px)!important;bottom:calc(8vh + clamp(255px,23vw,360px))!important;top:auto!important}
#hero .intro{max-width:845px!important;width:130%!important}
}
@media(orientation:portrait){
#hero .hero-media{right:0!important;left:auto!important;transform:none!important;width:64vw!important}
}
/* 01 */
#oportunidad .lead{max-width:720px!important;width:80%!important}
@media(orientation:portrait){
#oportunidad .brand-orbit{top:25vh!important;right:-17vw!important}
}
/* 02 */
@keyframes fiveSwitchIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#servicios .service-copy.switch-fade h3,#servicios .service-copy.switch-fade strong{animation:fiveSwitchIn .5s ease both!important}
#servicios .services-head h2 em{white-space:nowrap}
#servicios .service-copy{min-width:0!important}
#servicios .service-copy>p:first-child{transform:translate(18px,8px)!important}
#servicios .service-copy h3{font-size:clamp(48px,5.7vw,92px)!important}
#servicios .service-copy strong{font-size:clamp(29px,3.2vw,52px)!important}
#servicios .service-copy>p:last-child{font-size:clamp(15px,1.2vw,19px)!important}
@media(orientation:landscape){
#servicios .services-visual{align-self:start!important;margin-top:2vh!important}
#servicios .service-tabs{align-self:start!important}
}
@media(orientation:portrait){
#servicios{height:225vh!important}
#servicios .sticky{height:88vh!important}
}
/* 03 */
#portfolio .portfolio-head .section-intro{font-size:clamp(18px,1.45vw,23px)!important;max-width:49ch!important}
#portfolio .motion-caption{transform:translateY(12px)!important}
#portfolio .motion-caption p{text-transform:uppercase!important;margin-bottom:1px!important;line-height:1!important}
#portfolio .motion-caption h3{line-height:1!important}
#portfolio .motion-status{padding:7px 10px!important;background:rgba(8,8,7,.54)!important;border:1px solid rgba(233,224,208,.24)!important;border-radius:999px!important;backdrop-filter:blur(7px)!important;color:var(--beige)!important}
@media(orientation:portrait){
#portfolio{height:220vh!important}
#portfolio .sticky{height:88vh!important}
#portfolio .motion-caption h3{font-size:clamp(27px,6vw,42px)!important}
#portfolio .motion-caption p{font-size:clamp(9px,2vw,13px)!important}
}
/* 04 */
#metodo .method-content.switch-fade h3{animation:fiveSwitchIn .5s ease both!important}
#metodo .method-numbers button{opacity:1!important;color:#777067!important;visibility:visible!important}
#metodo .method-numbers button.active{color:var(--ink)!important}
/* 05 */
#comparacion .comparison-copy h2 em{white-space:nowrap!important}
@media(orientation:portrait){
#comparacion .comparison-copy h2{font-size:clamp(37px,8.7vw,66px)!important}
}
/* 06 */
#flexible .flex-copy{animation:none!important}
#flexible .flex-copy h3{font-size:clamp(30px,3vw,48px)!important}
#flexible .flex-copy>p:last-child{animation:none!important;transition:none!important}
#flexible .safe-zone{background:var(--black)!important;color:var(--ink)!important;font-size:80%!important;box-shadow:0 0 0 100vmax rgba(8,8,7,.42)!important;transition:opacity .5s ease!important}
#flexible #flexStage:not([data-state="square"]) .safe-zone{opacity:0!important}
@media(orientation:portrait){
#flexible .flex-stage{height:40.3vh!important;margin-top:0!important;transform:translateY(-1.5vh)!important}
#flexible .flex-copy{bottom:14.5vh!important}
#flexible .flex-tabs{bottom:1.4vh!important}
}
/* 07 */
#experiencia{height:275vh!important}
#experiencia .experience-head,#experiencia .facts,#experiencia .cap-window{transform:translateY(-5vh)!important}
#experiencia .facts{margin-top:3vh!important;margin-bottom:4vh!important}
@media(orientation:portrait){
#experiencia{height:220vh!important}
#experiencia .experience-head,#experiencia .facts,#experiencia .cap-window{transform:translateY(-5vh)!important}
}
/* 08 · conventional single viewport with two CTAs */
#contacto{min-height:100vh!important;height:100vh!important;padding:8vh 7vw 0!important;overflow:hidden!important}
#contacto .contact-copy{margin:0!important;max-width:760px!important}
#contacto .library-access{position:absolute!important;left:7vw!important;right:7vw!important;bottom:112px!important;min-height:0!important;height:auto!important;display:grid!important;grid-template-columns:1fr minmax(190px,24vw)!important;gap:28px!important;padding:14px 0 18px!important;align-items:end!important}
#contacto .library-access h3{font-size:clamp(22px,2.5vw,40px)!important;line-height:.96!important}
#contacto .library-access p{font-size:clamp(11px,.85vw,14px)!important;margin:9px 0!important;max-width:550px!important}
#contacto .library-access .button{font-size:8px!important;padding:9px 12px!important}
#contacto .library-video{width:70%!important;max-width:230px!important;justify-self:end!important;position:relative!important}
#contacto .library-video:before{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(180deg,var(--paper),transparent 38%);pointer-events:none}
#contacto footer{min-height:96px!important}
#contacto footer .footer-center-logo{width:min(375px,37.5vw)!important;max-height:110px!important}
@media(orientation:portrait){
#contacto{height:100vh!important;min-height:100vh!important;padding-top:7vh!important}
#contacto .contact-copy h2{font-size:clamp(48px,12vw,78px)!important}
#contacto .library-access{grid-template-columns:1fr minmax(120px,28vw)!important;bottom:105px!important;gap:16px!important}
#contacto .library-access h3{font-size:clamp(19px,4vw,30px)!important}
#contacto .library-video{width:70%!important}
}
/* PRIVATE ESTIMATOR */
.private-estimator-panel,.private-estimator-panel *{font-family:Manrope,FiveSans,Arial,sans-serif!important}
.private-budget .budget-head h2{font-size:clamp(25px,2.6vw,42px)!important;line-height:1!important}
.private-budget .budget-head>p:last-child{font-size:12px!important}
.private-budget .valuation-checks .check span,.private-budget .estimator .check span{color:var(--beige)!important}
.private-budget .estimator{max-height:67vh!important;overflow:auto!important}
@media(orientation:portrait){
.private-estimator-panel{overflow:hidden!important}
.private-budget{height:calc(100vh - 64px)!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important;padding:5vh 5vw 3vh!important}
.private-budget .budget-head{grid-row:1!important}
.private-budget .estimator{grid-row:2!important;max-height:none!important;overflow:auto!important}
.private-budget .estimate-result{grid-row:3!important;position:relative!important;max-height:28vh!important;overflow:auto!important}
}
/* =========================================================
FIVE DEMOFILMS v29 · RESPONSIVE POLISH + ESTIMATOR FIX
========================================================= */
/* 00 HERO */
@media (orientation:landscape){
#hero .brand-kicker{bottom:calc(8vh + clamp(360px,31vw,485px))!important;max-height:19vh!important;overflow:hidden!important}
#hero .hero-copy{z-index:6!important}
}
@media (orientation:portrait){
#hero .hero-media{inset:0!important;width:100vw!important;height:100svh!important;max-width:none!important}
#hero .hero-media video,#hero .hero-media .media-empty{width:100%!important;height:100%!important;object-fit:cover!important;object-position:right center!important}
#hero .brand-kicker{z-index:6!important}
}
/* 03 + 07: equal optical gutters, clipping only at viewport edges */
#portfolio .portfolio-window{margin-left:-6vw!important;padding-left:6vw!important;width:calc(100% + 6vw)!important}
#portfolio .portfolio-track:after,#experiencia .cap-track:after{content:"";display:block;flex:0 0 6vw;width:6vw;height:1px}
#portfolio .motion-caption{transform:translateY(0)!important;padding-bottom:clamp(22px,2.2vh,32px)!important}
#portfolio .motion-caption h3{font-size:clamp(22px,2.15vw,35px)!important}
@media (orientation:portrait){
#portfolio .portfolio-head h2{font-size:clamp(36px,8.8vw,58px)!important}
#portfolio .motion-caption{padding-bottom:clamp(20px,3vh,28px)!important}
#portfolio .motion-caption h3{font-size:clamp(18px,4.2vw,29px)!important}
#portfolio .motion-caption p{font-size:clamp(7px,1.4vw,9px)!important}
}
/* 05 COMPARISON */
@media (orientation:portrait){
#comparacion{height:205vh!important}
#comparacion .comparison-sticky{padding-top:7vh!important;padding-bottom:3vh!important;align-content:start!important;gap:1.5vh!important}
#comparacion .wipe{height:min(39vh,390px)!important;margin-top:0!important;align-self:start!important}
}
/* 06 FLEXIBLE */
#flexible .safe-zone{background:transparent!important;color:var(--beige)!important;white-space:nowrap!important;font-size:clamp(8px,.82vw,13px)!important;line-height:1!important;text-align:center!important}
@media (orientation:portrait){
#flexible .flexible-sticky{padding-top:5vh!important}
#flexible .flexible-head{transform:translateY(-3vh)!important}
#flexible .flex-stage{position:absolute!important;left:6vw!important;right:6vw!important;top:31vh!important;bottom:28vh!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;transform:none!important}
#flexible .crop-window{width:90%!important;height:90%!important;max-width:none!important;max-height:none!important;margin:auto!important;position:absolute!important;inset:0!important}
#flexible .flex-copy{bottom:10.5vh!important;width:88vw!important}
#flexible .flex-tabs{bottom:1.2vh!important}
#flexible .safe-zone{font-size:clamp(6px,1.6vw,10px)!important;max-width:72%!important}
}
/* 07 EXPERIENCE */
#experiencia .experience-head,#experiencia .facts,#experiencia .cap-window{transform:translateY(-1.5vh)!important}
#experiencia .experience-head{gap:3vw!important}
#experiencia .facts{margin-top:5vh!important;margin-bottom:5.5vh!important}
#experiencia .cap-window{margin-left:-6vw!important;padding-left:6vw!important;width:calc(100% + 12vw)!important;margin-right:-6vw!important}
#experiencia .cap-track article:after{inset:62% 0 0!important;background:linear-gradient(0deg,rgba(0,0,0,.98) 0,rgba(0,0,0,.73) 52%,transparent 100%)!important}
#experiencia .cap-track article{padding-bottom:clamp(28px,4vh,44px)!important}
#experiencia .cap-track article>b{font-size:clamp(20px,2.15vw,34px)!important}
#experiencia .cap-track article>p{font-size:10.5px!important}
@media (orientation:portrait){
#experiencia .experience-sticky{padding-top:16vh!important}
#experiencia .experience-head,#experiencia .facts,#experiencia .cap-window{transform:none!important}
#experiencia .facts{margin-top:5vh!important;margin-bottom:6vh!important}
#experiencia .cap-track article{padding-bottom:32px!important}
#experiencia .cap-track article>b{font-size:clamp(18px,4.5vw,28px)!important}
#experiencia .cap-track article>p{font-size:10px!important}
}
/* 08 CONTACT */
#contacto{height:112vh!important;min-height:112vh!important}
#contacto .library-access{bottom:105px!important;grid-template-columns:1fr minmax(250px,29vw)!important}
#contacto .library-access-copy{position:relative!important;z-index:5!important}
#contacto .library-access .button{position:absolute!important;right:-2vw!important;bottom:4px!important;transform:translateX(100%)!important;white-space:nowrap!important;z-index:6!important}
#contacto .library-video{width:100%!important;max-width:270px!important}
#contacto .library-video:before{background:linear-gradient(90deg,rgba(242,236,223,.88) 0,rgba(242,236,223,.24) 35%,transparent 68%)!important}
#contacto footer{position:relative!important;z-index:20!important;background:var(--paper)!important}
#estimatorTrigger{z-index:30!important;pointer-events:auto!important}
@media (orientation:portrait){
#contacto{height:118vh!important;min-height:118vh!important}
#contacto .library-access{bottom:112px!important;grid-template-columns:1fr minmax(130px,32vw)!important}
#contacto .library-access .button{right:-1vw!important;bottom:0!important;font-size:7px!important;padding:7px 9px!important}
}
/* PRIVATE ESTIMATOR */
.private-estimator{touch-action:pan-y!important}
.private-estimator-panel{overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
.private-estimator-bar p{font-size:8px!important}
.private-budget .budget-head .section-label{font-size:clamp(10px,.9vw,14px)!important}
.private-budget .budget-head h2{font-family:Manrope,FiveSans,Arial,sans-serif!important;font-size:clamp(22px,2.15vw,35px)!important;font-weight:300!important;line-height:1.08!important}
.private-budget .budget-head h2 em{font-family:'Playfair Display',serif!important;font-style:italic!important;font-weight:500!important;color:var(--gold2)!important}
.private-budget .estimate-result strong{font-family:'Playfair Display',serif!important;font-style:italic!important;font-weight:500!important;color:#17130e!important}
@media (orientation:portrait){
.private-estimator-panel{overflow-y:auto!important;overflow-x:hidden!important;inset:0!important;border-radius:0!important;touch-action:pan-y!important}
.private-budget{height:auto!important;min-height:calc(100svh - 64px)!important;display:block!important;overflow:visible!important;padding:4vh 5vw 6vh!important}
.private-budget .budget-head{margin-bottom:20px!important}
.private-budget .estimator{max-height:none!important;overflow:visible!important}
.private-budget .estimate-result{max-height:none!important;overflow:visible!important;margin-top:22px!important}
}
/* =========================================================
FIVE DEMOFILMS v30 · FINAL RESPONSIVE REFINEMENT
========================================================= */
/* 00 */
@media (orientation:landscape){
#hero .brand-kicker{max-height:none!important;overflow:visible!important;bottom:calc(8vh + clamp(340px,29vw,455px))!important}
}
@media (orientation:portrait){
#hero .hero-media{left:auto!important;right:0!important;width:64vw!important;height:100svh!important;inset-block:0!important;overflow:hidden!important}
#hero .hero-media video,#hero .hero-media .media-empty{width:100%!important;height:100%!important;object-fit:cover!important;object-position:right center!important}
#hero .hero-copy h1{font-size:clamp(44px,12.4vw,72px)!important;line-height:.88!important}
#hero .hero-copy h1 em{white-space:nowrap!important;font-size:.88em!important;letter-spacing:-.065em!important}
}
/* 02 */
@media (orientation:portrait){#oportunidad .brand-orbit{top:10vh!important;right:-9vw!important}}
/* 03 */
#portfolio .portfolio-sticky{padding-top:10vh!important;padding-bottom:7vh!important}
#portfolio .portfolio-window{padding-bottom:3vh!important}
#portfolio .motion-caption{padding-bottom:clamp(16px,1.7vh,24px)!important}
@media (orientation:portrait){
#portfolio .sticky{height:91vh!important}
#portfolio .motion-caption p{font-size:clamp(8.5px,1.7vw,11px)!important}
}
/* 05 */
@media (orientation:portrait){
#comparacion .wipe{height:min(50.7vh,507px)!important;width:100%!important}
}
/* 06 */
#flexible .safe-zone{background:transparent!important;color:var(--ink)!important;box-shadow:0 0 0 100vmax rgba(8,8,7,.42)!important}
#flexible .flex-copy h3{white-space:nowrap!important}
@media (min-width:851px) and (max-aspect-ratio:4/3) and (orientation:landscape){
#flexible .flexible-sticky{grid-template-columns:.75fr 1.15fr .8fr!important;gap:2vw!important}
#flexible .flex-stage{--master:min(44vh,34vw)!important}
#flexible .flex-copy{width:auto!important;left:auto!important;right:auto!important;transform:none!important;text-align:left!important}
}
@media (orientation:portrait){
#flexible .flexible-sticky{padding:8vh 6vw 0!important;display:block!important}
#flexible .flexible-head{position:absolute!important;top:8vh!important;left:6vw!important;right:6vw!important;transform:none!important;z-index:7!important}
#flexible .flex-stage{--master:min(48vh,82vw)!important;position:absolute!important;left:6vw!important;right:6vw!important;top:30vh!important;bottom:30vh!important;display:grid!important;place-items:center!important;overflow:hidden!important}
#flexible .crop-window{position:relative!important;margin:0!important;inset:auto!important;transition:width .5s ease,height .5s ease!important}
#flexible #flexStage[data-state="square"] .crop-window{width:var(--master)!important;height:var(--master)!important}
#flexible #flexStage[data-state="wide"] .crop-window{width:var(--master)!important;height:calc(var(--master)*.5625)!important}
#flexible #flexStage[data-state="vertical"] .crop-window{width:calc(var(--master)*.5625)!important;height:var(--master)!important}
#flexible .crop-window video,#flexible .flex-ph{width:var(--master)!important;height:var(--master)!important}
#flexible .flex-copy{position:absolute!important;top:auto!important;bottom:9vh!important;left:50%!important;transform:translateX(-50%)!important;width:88vw!important;text-align:center!important}
#flexible .flex-tabs{bottom:1.2vh!important}
}
/* 07 */
#experiencia .experience-head{transform:translateY(-3vh)!important}
#experiencia .cap-track article>p{font-size:13px!important}
@media (orientation:portrait){
#experiencia .experience-head{transform:translateY(-3vh)!important}
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(1vh)!important}
#experiencia .cap-track article>p{font-size:12.5px!important}
}
/* 08 */
#contacto .contact-copy{padding-bottom:5vh!important;border-bottom:1px solid var(--line)!important}
#contacto .library-access{border-top:0!important;padding-top:0!important;align-items:start!important}
#contacto .library-access-copy{justify-self:end!important;width:min(430px,36vw)!important;text-align:left!important;align-self:start!important;padding-top:0!important}
#contacto .library-access h3{font-size:clamp(28px,3.15vw,50px)!important}
#contacto .library-access p{font-size:clamp(15px,1.2vw,20px)!important;line-height:1.7!important}
#contacto .library-access .button{position:static!important;transform:none!important;font-size:10px!important;padding:16px 22px!important;display:inline-block!important}
#contacto .library-video{justify-self:end!important}
@media (orientation:portrait){
#contacto{height:122vh!important;min-height:122vh!important}
#contacto .contact-copy{padding-bottom:2vh!important;border-bottom:0!important}
#contacto .library-access{display:grid!important;grid-template-columns:1fr 32vw!important;gap:14px!important;bottom:110px!important}
#contacto .library-access-copy{grid-column:1!important;grid-row:1!important;width:auto!important;justify-self:stretch!important;padding-top:0!important}
#contacto .library-video{grid-column:2!important;grid-row:1!important;width:32vw!important;max-width:160px!important}
#contacto .library-access h3{font-size:clamp(22px,5vw,32px)!important}
#contacto .library-access p{font-size:clamp(13px,3vw,16px)!important;line-height:1.5!important}
#contacto .library-access .button{font-size:9px!important;padding:13px 15px!important}
#contacto footer{height:96px!important;min-height:96px!important;max-height:96px!important;grid-template-columns:1fr 1fr 1fr!important;padding:0!important;gap:8px!important;overflow:visible!important}
#contacto footer img,#contacto footer .footer-center-logo{max-height:72px!important;width:auto!important;max-width:100%!important;object-fit:contain!important}
#contacto footer p:nth-child(2){text-align:center!important}#contacto footer p:last-child{text-align:right!important}
#contacto:after{content:"";position:absolute;left:7vw;right:7vw;bottom:206px;border-top:1px solid var(--line);z-index:2}
}
/* ESTIMATOR */
@media (orientation:portrait){
.private-estimator-panel{overflow:hidden!important}
.private-budget{height:calc(100svh - 64px)!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(190px,1fr) auto!important;gap:12px!important;overflow:hidden!important;padding:3vh 5vw 2vh!important}
.private-budget .budget-head{margin:0!important;max-height:20vh!important;overflow:hidden!important}
.private-budget .estimator{max-height:none!important;height:100%!important;min-height:0!important;overflow-y:scroll!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;padding:18px!important}
.private-budget .estimate-result{max-height:27vh!important;overflow-y:auto!important;margin:0!important;padding:20px!important}
}
/* =========================================================
FIVE DEMOFILMS v28 · FINAL H/V GEOMETRY PASS
========================================================= */
/* 00 V: hero media flush right/top/bottom, crop only on left */
@media (orientation:portrait){
#hero .hero-media{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(64vw,620px)!important;height:100svh!important;margin:0!important;transform:none!important;overflow:hidden!important}
#hero .hero-media video,#hero .hero-media .media-empty{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:right center!important;margin:0!important;transform:none!important}
}
/* 06 H/V: one fixed master frame for all states */
#flexible .flex-stage{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:min(42vw,650px)!important;height:min(58vh,650px)!important;display:grid!important;place-items:center!important;overflow:hidden!important}
#flexible .crop-window{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0!important;transition:width .45s ease,height .45s ease,aspect-ratio .45s ease!important}
#flexible #flexStage[data-state="square"] .crop-window{width:min(58vh,42vw)!important;height:auto!important;aspect-ratio:1/1!important}
#flexible #flexStage[data-state="wide"] .crop-window{width:min(42vw,650px)!important;height:auto!important;aspect-ratio:16/9!important}
#flexible #flexStage[data-state="vertical"] .crop-window{width:auto!important;height:min(58vh,650px)!important;aspect-ratio:9/16!important}
#flexible .crop-window video,#flexible .crop-window .flex-ph{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;transform:none!important}
#flexible .flex-copy{width:min(19vw,275px)!important;right:2vw!important;left:auto!important;top:35vh!important;bottom:auto!important;transform:none!important}
#flexible .flex-copy h3{font-size:clamp(20px,2vw,31px)!important;line-height:.88!important;white-space:pre-line!important}
#flexible .flex-copy>p:first-child{font-size:9px!important}
#flexible .flex-copy>p:last-child{font-size:clamp(11px,.88vw,14px)!important;line-height:1.3!important;max-width:25ch!important}
#flexible .safe-zone{display:grid!important;place-items:center!important;text-align:center!important;padding:12%!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important}
#flexible .flex-tabs{z-index:40!important}
@media (orientation:landscape){
#flexible .safe-zone{font-size:clamp(8px,.68vw,11px)!important}
}
@media (orientation:portrait){
#flexible .flex-stage{left:50%!important;top:35vh!important;transform:translate(-50%,-50%)!important;width:86vw!important;height:44vh!important}
#flexible #flexStage[data-state="square"] .crop-window{width:min(42vh,72vw)!important}
#flexible #flexStage[data-state="wide"] .crop-window{width:min(82vw,620px)!important}
#flexible #flexStage[data-state="vertical"] .crop-window{height:min(42vh,560px)!important}
#flexible .flex-copy{position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:7.5vh!important;transform:translateX(-50%)!important;width:88vw!important;text-align:center!important}
#flexible .flex-copy h3{font-size:clamp(22px,5vw,34px)!important;line-height:.86!important;margin:2px 0!important}
#flexible .flex-copy>p:first-child{margin:0!important}
#flexible .flex-copy>p:last-child{font-size:clamp(12px,2.7vw,16px)!important;line-height:1.2!important;max-width:52ch!important;margin:3px auto 0!important;text-align:center!important}
#flexible .flex-tabs{position:absolute!important;left:6vw!important;right:6vw!important;bottom:1.2vh!important;margin:0!important}
#flexible .safe-zone{font-size:clamp(12px,2.8vw,18px)!important;padding:10%!important}
}
/* 07: heading down two fingers; landscape cards flex to available height */
#experiencia .experience-head{transform:translateY(-2vh)!important}
@media (orientation:landscape){
#experiencia .cap-track article{width:min(29.7vw,429px)!important;min-width:330px!important;height:min(34vh,360px)!important;aspect-ratio:1/1!important}
#experiencia .cap-window{transform:translateY(-5vh)!important;padding-bottom:2vh!important}
}
/* 08: CTA2 moves right to meet the media; no separator */
#contacto .library-access{grid-template-columns:minmax(0,1fr) minmax(190px,24vw)!important;column-gap:8px!important}
#contacto .library-access-copy{justify-self:end!important;width:min(48vw,640px)!important;padding-right:0!important}
#contacto .library-video{justify-self:start!important}
#contacto .library-access{border-top:0!important}
#contacto:after{display:none!important;content:none!important}
@media (orientation:portrait){
#contacto .contact-orbit-star{top:calc(23vh + 64px)!important}
#contacto .library-access-copy{width:auto!important;justify-self:stretch!important}
}
/* =========================================================
FIVE DEMOFILMS v31 · FINAL 00 / 06 / 08 PASS
========================================================= */
/* 00 V: full-screen media centered, always fully visible */
@media (orientation:portrait){
#hero .hero-media{inset:0!important;width:100vw!important;height:100svh!important;max-width:none!important;background:var(--black)!important;display:grid!important;place-items:center!important;overflow:hidden!important}
#hero .hero-media video,#hero .hero-media .media-empty{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;transform:none!important;margin:0!important}
}
/* 06: stable source plate. Only the crop window changes ratio. */
#flexible .crop-window{transition:none!important}
#flexible .crop-window video,#flexible .crop-window .flex-ph{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:min(58vh,42vw)!important;height:min(58vh,42vw)!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;transform:translate(-50%,-50%)!important;transition:none!important}
@media (orientation:landscape){
#flexible .flex-copy{left:auto!important;right:0!important;top:50%!important;bottom:auto!important;width:min(19vw,275px)!important;transform:translateY(-50%)!important;text-align:left!important}
}
@media (orientation:portrait){
#flexible .flexible-head{top:7vh!important}
#flexible .flex-stage{left:50%!important;top:47vh!important;bottom:auto!important;width:88vw!important;height:42vh!important;transform:translate(-50%,-50%)!important;overflow:hidden!important}
#flexible #flexStage[data-state="square"] .crop-window{width:min(42vh,72vw)!important;height:auto!important;aspect-ratio:1/1!important}
#flexible #flexStage[data-state="wide"] .crop-window{width:min(82vw,620px)!important;height:auto!important;aspect-ratio:16/9!important}
#flexible #flexStage[data-state="vertical"] .crop-window{width:auto!important;height:min(42vh,560px)!important;aspect-ratio:9/16!important}
#flexible .crop-window video,#flexible .crop-window .flex-ph{width:min(42vh,72vw)!important;height:min(42vh,72vw)!important}
}
/* 08: remove every stray separator and rebalance both CTAs */
#contacto .contact-copy,#contacto .library-access,#contacto footer{border-top:0!important;border-bottom:0!important}
#contacto:before,#contacto:after,#contacto .contact-copy:before,#contacto .contact-copy:after,#contacto .library-access:before,#contacto .library-access:after{content:none!important;display:none!important;border:0!important}
@media (orientation:landscape){
#contacto .library-access{transform:translateY(-8vh)!important}
}
@media (orientation:portrait){
#contacto .contact-copy{transform:translateY(8vh)!important}
#contacto .library-access{bottom:190px!important;transform:none!important}
}
/* =========================================================
FIVE DEMOFILMS v33 · SLIDE 06 CORRECCION EFECTIVA
Neutraliza los overrides posteriores de v32.
========================================================= */
#flexible .flex-stage{
position:absolute!important;
left:50%!important;
top:50%!important;
width:min(42vw,650px)!important;
height:min(58vh,650px)!important;
transform:translate(-50%,-50%)!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
margin:0!important;
}
#flexible .crop-window{
position:relative!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
margin:0!important;
transform:none!important;
overflow:hidden!important;
}
#flexible #flexStage[data-state="square"] .crop-window{
width:min(58vh,42vw)!important;height:auto!important;aspect-ratio:1/1!important;
}
#flexible #flexStage[data-state="wide"] .crop-window{
width:min(42vw,650px)!important;height:auto!important;aspect-ratio:16/9!important;
}
#flexible #flexStage[data-state="vertical"] .crop-window{
width:auto!important;height:min(58vh,650px)!important;aspect-ratio:9/16!important;
}
#flexible .crop-window video,#flexible .crop-window .flex-ph{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;
max-width:none!important;max-height:none!important;
object-fit:cover!important;object-position:center center!important;
transform:none!important;transition:none!important;
}
#flexible .flex-copy{
position:absolute!important;left:auto!important;right:2vw!important;
top:50%!important;bottom:auto!important;
width:min(19vw,275px)!important;
transform:translateY(-50%)!important;text-align:left!important;
}
#flexible .flex-copy h3{font-size:clamp(20px,2vw,31px)!important;line-height:.88!important;white-space:pre-line!important}
#flexible .flex-copy>p:first-child{font-size:9px!important}
#flexible .flex-copy>p:last-child{font-size:clamp(11px,.88vw,14px)!important;line-height:1.3!important;max-width:25ch!important}
#flexible .safe-zone{
display:grid!important;place-items:center!important;text-align:center!important;
padding:10%!important;line-height:1.15!important;white-space:normal!important;
overflow-wrap:anywhere!important;
}
@media(orientation:portrait){
#flexible .flex-stage{
left:50%!important;top:36vh!important;width:88vw!important;height:42vh!important;
transform:translate(-50%,-50%)!important;
}
#flexible #flexStage[data-state="square"] .crop-window{width:min(40vh,72vw)!important;height:auto!important;aspect-ratio:1/1!important}
#flexible #flexStage[data-state="wide"] .crop-window{width:min(82vw,620px)!important;height:auto!important;aspect-ratio:16/9!important}
#flexible #flexStage[data-state="vertical"] .crop-window{width:auto!important;height:min(40vh,540px)!important;aspect-ratio:9/16!important}
#flexible .crop-window video,#flexible .crop-window .flex-ph{width:100%!important;height:100%!important;inset:0!important;transform:none!important}
#flexible .flex-copy{
left:50%!important;right:auto!important;top:auto!important;bottom:7.2vh!important;
width:88vw!important;transform:translateX(-50%)!important;text-align:center!important;
}
#flexible .flex-copy h3{font-size:clamp(22px,5vw,34px)!important;line-height:.86!important;margin:2px 0!important}
#flexible .flex-copy>p:first-child{margin:0!important}
#flexible .flex-copy>p:last-child{font-size:clamp(12px,2.7vw,16px)!important;line-height:1.2!important;max-width:52ch!important;margin:3px auto 0!important;text-align:center!important}
#flexible .flex-tabs{position:absolute!important;left:6vw!important;right:6vw!important;bottom:1.2vh!important;margin:0!important;z-index:40!important}
#flexible .safe-zone{font-size:clamp(12px,2.8vw,18px)!important}
}
/* =========================================================
FIVE DEMOFILMS v34 · 06 FIXED PLATE + OPTICAL ALIGNMENT
========================================================= */
/* Shared: the stage and the source image never change size or position. */
#flexible .flex-stage{
--plate:min(58vh,42vw);
left:50%!important;top:50%!important;
width:min(42vw,650px)!important;height:min(58vh,650px)!important;
transform:translate(-50%,-50%)!important;
overflow:visible!important;
}
#flexible .crop-window{
position:absolute!important;left:50%!important;top:50%!important;
transform:translate(-50%,-50%)!important;margin:0!important;
overflow:hidden!important;transition:none!important;
border:1px solid rgba(181,138,58,.72)!important;
box-sizing:border-box!important;
}
#flexible #flexStage[data-state="square"] .crop-window{width:var(--plate)!important;height:var(--plate)!important;aspect-ratio:auto!important}
#flexible #flexStage[data-state="wide"] .crop-window{width:var(--plate)!important;height:calc(var(--plate)*.5625)!important;aspect-ratio:auto!important}
#flexible #flexStage[data-state="vertical"] .crop-window{width:calc(var(--plate)*.5625)!important;height:var(--plate)!important;aspect-ratio:auto!important}
#flexible .crop-window video,#flexible .crop-window .flex-ph{
position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
width:var(--plate)!important;height:var(--plate)!important;
transform:translate(-50%,-50%)!important;
object-fit:cover!important;object-position:center center!important;
max-width:none!important;max-height:none!important;transition:none!important;
}
/* Safe-use guide is a fixed-size overlay, independent from crop ratio. */
#flexible .safe-zone{
position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
width:clamp(150px,13vw,190px)!important;height:clamp(150px,13vw,190px)!important;
aspect-ratio:1/1!important;transform:translate(-50%,-50%)!important;
padding:18px!important;box-sizing:border-box!important;
opacity:1!important;transition:none!important;
}
#flexible #flexStage:not([data-state="square"]) .safe-zone{opacity:1!important}
/* H: larger copy, optically centered in the free column on the right. */
@media (orientation:landscape){
#flexible .flex-copy{
left:74vw!important;right:3vw!important;top:50%!important;bottom:auto!important;
width:auto!important;max-width:360px!important;
transform:translateY(-50%)!important;text-align:left!important;
}
#flexible .flex-copy>p:first-child{font-size:clamp(11px,.9vw,15px)!important;margin:0 0 10px!important}
#flexible .flex-copy h3{font-size:clamp(28px,2.65vw,43px)!important;line-height:.92!important;margin:0 0 16px!important}
#flexible .flex-copy>p:last-child{font-size:clamp(15px,1.2vw,20px)!important;line-height:1.45!important;max-width:30ch!important;margin:0!important}
}
/* V: heading lower, plate centered, fixed safe guide; lower controls untouched. */
@media (orientation:portrait){
#flexible .flexible-head{top:12vh!important;transform:none!important}
#flexible .flex-stage{
--plate:min(40vh,72vw);
left:50%!important;top:53vh!important;width:88vw!important;height:42vh!important;
transform:translate(-50%,-50%)!important;overflow:visible!important;
}
#flexible .safe-zone{width:clamp(132px,36vw,168px)!important;height:clamp(132px,36vw,168px)!important;font-size:clamp(10px,2.35vw,14px)!important;padding:14px!important}
}
/* =========================================================
FIVE DEMOFILMS v35 · 06 PROPORTIONAL SAFE ZONE
========================================================= */
/* The safe area follows the exact crop-window ratio and occupies 46% of it. */
#flexible .flex-stage{
--crop-w:var(--plate);
--crop-h:var(--plate);
}
#flexible #flexStage[data-state="square"]{--crop-w:var(--plate);--crop-h:var(--plate)}
#flexible #flexStage[data-state="wide"]{--crop-w:var(--plate);--crop-h:calc(var(--plate)*.5625)}
#flexible #flexStage[data-state="vertical"]{--crop-w:calc(var(--plate)*.5625);--crop-h:var(--plate)}
#flexible .safe-zone{
position:absolute!important;
left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
width:calc(var(--crop-w)*.46)!important;
height:calc(var(--crop-h)*.46)!important;
aspect-ratio:auto!important;
transform:translate(-50%,-50%)!important;
display:grid!important;place-items:center!important;
padding:6%!important;box-sizing:border-box!important;
background:transparent!important;
box-shadow:0 0 0 100vmax rgba(8,8,7,.42)!important;
color:var(--ink)!important;
font-size:clamp(12px,1.15vw,18px)!important;
line-height:1.12!important;text-align:center!important;
white-space:normal!important;overflow-wrap:normal!important;
opacity:1!important;transition:none!important;
z-index:4!important;
}
#flexible #flexStage:not([data-state="square"]) .safe-zone{opacity:1!important}
@media(orientation:portrait){
#flexible .safe-zone{
width:calc(var(--crop-w)*.46)!important;
height:calc(var(--crop-h)*.46)!important;
font-size:clamp(12px,2.8vw,18px)!important;
padding:6%!important;
}
}
/* =========================================================
FIVE DEMOFILMS v36 · 06 SQUARE SAFE ZONE + CLEAN CROPS
========================================================= */
/* In 1:1 the protected zone is square and 46% of the master.
Its side therefore equals the full visible height in 16:9
and the full visible width in 9:16. */
#flexible .safe-zone{
left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
width:calc(var(--plate)*.46)!important;
height:calc(var(--plate)*.46)!important;
aspect-ratio:1/1!important;
transform:translate(-50%,-50%)!important;
padding:6%!important;
display:grid!important;place-items:center!important;
text-align:center!important;
font-size:clamp(12px,1.15vw,18px)!important;
line-height:1.12!important;
background:transparent!important;
box-shadow:0 0 0 100vmax rgba(8,8,7,.42)!important;
opacity:1!important;
visibility:visible!important;
transition:opacity .22s ease,visibility 0s linear 0s!important;
pointer-events:none!important;
}
#flexible #flexStage[data-state="wide"] .safe-zone,
#flexible #flexStage[data-state="vertical"] .safe-zone{
opacity:0!important;
visibility:hidden!important;
transition:opacity .22s ease,visibility 0s linear .22s!important;
}
@media(orientation:landscape){
#flexible .safe-zone{font-size:clamp(14px,1.25vw,20px)!important}
}
@media(orientation:portrait){
#flexible .safe-zone{
width:calc(var(--plate)*.46)!important;
height:calc(var(--plate)*.46)!important;
font-size:clamp(12px,2.8vw,18px)!important;
}
/* Lift the complete lower information block without touching the media. */
#flexible .flex-copy{bottom:13.2vh!important}
#flexible .flex-tabs{bottom:5.2vh!important}
}
/* =========================================================
FIVE DEMOFILMS v34 · SLIDE 06 MASK BOUNDED TO PLACEHOLDER
========================================================= */
/* The crop window clips the protection mask, so the shading can never
invade the headline or the right-hand copy in horizontal layouts. */
#flexible .crop-window{
overflow:hidden!important;
isolation:isolate!important;
}
#flexible .safe-zone{
z-index:5!important;
/* Square side equals the full visible height of the 16:9 crop. */
width:calc(var(--plate)*.5625)!important;
height:calc(var(--plate)*.5625)!important;
max-width:100%!important;
max-height:100%!important;
aspect-ratio:1/1!important;
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%)!important;
overflow:hidden!important;
box-sizing:border-box!important;
box-shadow:0 0 0 100vmax rgba(8,8,7,.42)!important;
}
#flexible #flexStage[data-state="wide"] .safe-zone,
#flexible #flexStage[data-state="vertical"] .safe-zone{
opacity:0!important;
visibility:hidden!important;
}
@media(orientation:landscape){
#flexible .safe-zone{
font-size:clamp(13px,1.05vw,17px)!important;
padding:8%!important;
}
}
/* =========================================================
FIVE DEMOFILMS v39 · NEW NARRATIVE STRUCTURE
========================================================= */
#oportunidad .section-label{margin-bottom:24px!important}
#oportunidad .lead{max-width:860px!important}
#servicios .services-head{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(280px,.52fr)!important;column-gap:5vw!important;align-items:end!important}
#servicios .services-head .section-label,#servicios .services-head h2{grid-column:1!important}
#servicios .services-head .section-intro{grid-column:2!important;grid-row:1/3!important;align-self:end!important;max-width:430px!important;margin:0 0 .75em!important;color:#aaa196!important;font-size:clamp(15px,1.2vw,20px)!important;line-height:1.6!important}
#portfolio .portfolio-head{position:relative!important;padding-right:17vw!important}
#portfolio .portfolio-library-link{position:absolute!important;right:6vw!important;bottom:4px!important;border-bottom:1px solid var(--gold)!important;padding:0 0 8px!important;color:var(--ink)!important;font-size:10px!important;letter-spacing:.17em!important}
#portfolio .portfolio-library-link span{color:var(--gold)!important;font-size:1.25em!important;margin-left:8px!important}
#flexible .campaign-applications{margin:17px 0 10px!important;color:var(--gold2)!important;font-size:clamp(9px,.78vw,12px)!important;letter-spacing:.16em!important;line-height:1.55!important;max-width:68ch!important}
#comparacion .comparison-copy>p:last-child{font-size:clamp(16px,1.3vw,21px)!important}
@media(orientation:portrait){
#servicios .services-head{display:block!important}
#servicios .services-head .section-intro{margin:12px 0 0!important;max-width:80vw!important;font-size:clamp(13px,3vw,17px)!important}
#portfolio .portfolio-head{padding-right:6vw!important}
#portfolio .portfolio-library-link{position:static!important;display:inline-block!important;margin-top:14px!important}
#flexible .campaign-applications{font-size:clamp(8px,2vw,11px)!important;max-width:88vw!important;margin-top:10px!important}
}
/* =========================================================
FIVE DEMOFILMS v40 · HORIZONTAL RHYTHM AND TYPE HIERARCHY
========================================================= */
/* Shared hierarchy: index, section support text, selector support text. */
.section-label{font-size:clamp(17px,1.5vw,24px)!important;line-height:1.2!important;white-space:nowrap!important}
.section-intro,#experiencia .experience-claim{font-size:clamp(18px,1.45vw,23px)!important;line-height:1.55!important}
.service-copy>p:last-child,.method-content>p:last-child,.flex-copy>p:last-child,#experiencia .cap-track article>p,#contacto .library-access p{font-size:clamp(13px,1.02vw,16px)!important;line-height:1.45!important}
/* 00: force the intro into two lines on normal landscape widths. */
#hero .intro{width:min(760px,64vw)!important;max-width:760px!important;text-align:left!important}
/* 01: wider, left-aligned support copy and more air below the index. */
#oportunidad .section-label{transform:translateY(-4vh)!important;margin-bottom:clamp(34px,4vh,58px)!important}
#oportunidad .lead{margin-left:0!important;width:min(980px,78vw)!important;max-width:980px!important;text-align:left!important}
/* 02: one-line title, support copy below it, selector content lifted. */
#servicios .services-head{display:block!important}
#servicios .services-head h2{white-space:nowrap!important;font-size:clamp(39px,4.65vw,76px)!important}
#servicios .services-head .section-intro{display:block!important;margin:12px 0 0!important;width:min(720px,58vw)!important;max-width:720px!important;color:#aaa196!important;font-size:clamp(15px,1.2vw,19px)!important;line-height:1.45!important;text-align:left!important}
#servicios .service-copy{transform:translateY(-4vh)!important}
/* 03: larger cards and progressively lower editorial blocks. */
#portfolio .portfolio-sticky{padding-top:12vh!important}
#portfolio .portfolio-head .section-label{transform:translateY(2.5vh)!important}
#portfolio .portfolio-head h2{transform:translateY(5vh)!important}
#portfolio .portfolio-head .section-intro{transform:translateY(7.5vh)!important}
#portfolio .portfolio-library-link{transform:translateY(7.5vh)!important}
#portfolio .portfolio-window{transform:translateY(10vh)!important}
#portfolio .portfolio-track article{width:min(33.8vw,483px)!important}
/* 04: corrected support line and captions seated nearer the lower edge. */
#experiencia .experience-claim{max-width:650px!important;color:#716a60!important}
#experiencia .cap-track article{padding-bottom:clamp(14px,2vh,24px)!important}
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(2vh)!important}
/* 05: preserve the preferred hierarchy and keep selector text to two lines. */
#metodo .method-title .section-intro{font-size:clamp(18px,1.45vw,23px)!important;line-height:1.55!important;max-width:720px!important}
#metodo .method-content{width:min(760px,52vw)!important;max-width:760px!important}
#metodo .method-content>p:last-child{max-width:720px!important;width:100%!important}
/* 06: protect “PUNTO DE PARTIDA” as a single unit. */
#comparacion .section-label{font-size:clamp(15px,1.23vw,21px)!important;letter-spacing:.15em!important}
#comparacion .section-label span{margin-right:12px!important}
/* 07: stronger applications line; centered PH scales inside its own column. */
#flexible .section-label{font-size:clamp(15px,1.23vw,21px)!important;letter-spacing:.15em!important}
#flexible .section-label span{margin-right:12px!important}
#flexible .campaign-applications{font-size:clamp(12px,1vw,16px)!important;line-height:1.45!important}
@media(orientation:landscape){
#flexible .flexible-head{width:29vw!important;max-width:430px!important}
#flexible .flex-stage{left:50%!important;width:min(36vw,580px)!important;height:min(55vh,580px)!important;--plate:min(55vh,36vw)!important}
}
/* 08: larger CTA support texts, secondary copy nearer its PH, larger copyright. */
#contacto .contact-copy>p:not(.section-label){font-size:clamp(18px,1.45vw,23px)!important;line-height:1.55!important;max-width:720px!important}
#contacto .library-access-copy{transform:translateX(80px)!important}
#contacto .library-access p{font-size:clamp(13px,1.02vw,16px)!important;line-height:1.45!important}
#contacto footer>p:last-child{font-size:12px!important}
/* Responsive safety: remove desktop offsets and allow fluid wrapping. */
@media(orientation:portrait){
.section-label{white-space:nowrap!important;font-size:clamp(11px,2.8vw,16px)!important}
#hero .intro{width:min(88vw,650px)!important}
#oportunidad .section-label{transform:translateY(-2vh)!important;margin-bottom:30px!important}
#oportunidad .lead{width:88vw!important}
#servicios .services-head h2{white-space:normal!important;font-size:clamp(36px,8.5vw,58px)!important}
#servicios .services-head .section-intro{width:86vw!important;font-size:clamp(13px,3vw,17px)!important}
#servicios .service-copy{transform:translateY(-2vh)!important}
#portfolio .portfolio-head .section-label{transform:translateY(1vh)!important}
#portfolio .portfolio-head h2{transform:translateY(2vh)!important}
#portfolio .portfolio-head .section-intro,#portfolio .portfolio-library-link{transform:translateY(3vh)!important}
#portfolio .portfolio-window{transform:translateY(5vh)!important}
#portfolio .portfolio-track article{width:51.5vw!important}
#metodo .method-content{width:88vw!important;max-width:88vw!important}
#comparacion .section-label,#flexible .section-label{font-size:clamp(10px,2.5vw,14px)!important;letter-spacing:.1em!important}
#contacto .library-access-copy{transform:none!important}
#contacto .contact-copy>p:not(.section-label){font-size:clamp(15px,3.6vw,19px)!important}
#contacto footer>p:last-child{font-size:8px!important}
}
/* =========================================================
FIVE DEMOFILMS v41 · QUICK SPACING AND TYPE REFINEMENT
========================================================= */
/* Restored hierarchy. Primary support text is larger; selector support is
slightly smaller, but both retain the same Manrope family and weight. */
.section-intro,
#oportunidad .lead,
#experiencia .experience-claim,
#comparacion .comparison-copy>p:last-child,
#contacto .contact-copy>p:not(.section-label){
font-family:Manrope,FiveSans,Arial,sans-serif!important;
font-size:clamp(19px,1.55vw,25px)!important;
line-height:1.5!important;
font-weight:300!important;
}
#servicios .service-copy>p:last-child,
#metodo .method-content>p:last-child,
#flexible .flex-copy>p:last-child,
#experiencia .cap-track article>p,
#contacto .library-access p{
font-family:Manrope,FiveSans,Arial,sans-serif!important;
font-size:clamp(16px,1.28vw,21px)!important;
line-height:1.45!important;
font-weight:300!important;
}
/* 00: wider measure to avoid a third line on panoramic windows. */
#hero .intro{width:min(920px,72vw)!important;max-width:920px!important}
/* 03: support line nearer the title; carousel lifted 2–3 fingers. */
#portfolio .portfolio-head .section-intro{transform:translateY(5.2vh)!important;max-width:760px!important}
#portfolio .portfolio-library-link{transform:translateY(5.2vh)!important}
#portfolio .portfolio-window{transform:translateY(6.2vh)!important}
/* 04: heading group lower, cards 15% larger and slightly lower. */
#experiencia .experience-head{transform:translateY(1vh)!important}
#experiencia .experience-claim{transform:translateY(2.8vh)!important}
#experiencia .facts{transform:translateY(2vh)!important}
#experiencia .cap-window{transform:translateY(2vh)!important}
#experiencia .cap-track article{width:min(34.15vw,493px)!important;min-width:380px!important}
#experiencia .cap-track article>b,
#experiencia .cap-track article>p{transform:translateY(1vh)!important}
/* 05: this slide remains the reference hierarchy. */
#metodo .method-title .section-intro{font-size:clamp(19px,1.55vw,25px)!important;line-height:1.5!important;max-width:760px!important}
#metodo .method-content{width:min(820px,56vw)!important;max-width:820px!important}
#metodo .method-content>p:last-child{font-size:clamp(16px,1.28vw,21px)!important;max-width:780px!important}
/* 06: index lifted one finger. */
#comparacion .section-label{transform:translateY(-2vh)!important}
/* 07: move the complete centred PH system two fingers to the right. */
@media(orientation:landscape){
#flexible .flex-stage{left:54vw!important}
}
/* 08: lower only the secondary library button. */
#contacto .library-access .button{transform:translateY(2vh)!important}
@media(orientation:portrait){
.section-intro,
#oportunidad .lead,
#experiencia .experience-claim,
#comparacion .comparison-copy>p:last-child,
#contacto .contact-copy>p:not(.section-label){font-size:clamp(16px,3.8vw,20px)!important}
#servicios .service-copy>p:last-child,
#metodo .method-content>p:last-child,
#flexible .flex-copy>p:last-child,
#experiencia .cap-track article>p,
#contacto .library-access p{font-size:clamp(14px,3.25vw,17px)!important}
#hero .intro{width:91vw!important;max-width:91vw!important}
#portfolio .portfolio-head .section-intro,#portfolio .portfolio-library-link{transform:translateY(2vh)!important}
#portfolio .portfolio-window{transform:translateY(3.5vh)!important}
#experiencia .experience-head{transform:translateY(-1vh)!important}
#experiencia .experience-claim{transform:translateY(1.5vh)!important}
#experiencia .facts,#experiencia .cap-window{transform:translateY(1vh)!important}
#experiencia .cap-track article{width:43.8vw!important;min-width:43.8vw!important}
#metodo .method-content{width:88vw!important;max-width:88vw!important}
#comparacion .section-label{transform:translateY(-1vh)!important}
#flexible .flex-stage{left:50%!important}
#contacto .library-access .button{transform:translateY(1.2vh)!important}
}
/* =========================================================
FIVE DEMOFILMS v42 · DEFINITIVE SUBTEXT CATEGORIES
Category 1 follows the Method Five section introduction.
Category 2 follows the Method Five selector description.
========================================================= */
/* CATEGORY 1: main editorial support text. */
#hero .intro,
#oportunidad .lead,
#servicios .services-head .section-intro,
#portfolio .portfolio-head .section-intro,
#experiencia .experience-claim,
#metodo .method-title .section-intro,
#comparacion .comparison-copy>p:last-child,
#flexible .flexible-head .section-intro{
font-family:Manrope,FiveSans,Arial,sans-serif!important;
font-size:clamp(19px,1.55vw,25px)!important;
line-height:1.5!important;
font-weight:300!important;
}
/* CATEGORY 2: selector descriptions and concise supporting details. */
#servicios .service-copy>p:last-child,
#metodo .method-content>p:last-child,
#flexible .flex-copy>p:last-child,
#experiencia .facts span,
#experiencia .cap-track article>p{
font-family:Manrope,FiveSans,Arial,sans-serif!important;
font-size:clamp(13px,1.02vw,16px)!important;
line-height:1.45!important;
font-weight:300!important;
}
/* 04: lower the title only, keep support hierarchy, and restore true 1:1 cards. */
#experiencia .experience-head h2{transform:translateY(4vh)!important}
@media(orientation:landscape){
#experiencia .cap-track article{
width:min(34.15vw,493px)!important;
min-width:380px!important;
height:auto!important;
aspect-ratio:1/1!important;
}
}
/* Portrait values preserve the same two-level hierarchy without clipping. */
@media(orientation:portrait){
#hero .intro,
#oportunidad .lead,
#servicios .services-head .section-intro,
#portfolio .portfolio-head .section-intro,
#experiencia .experience-claim,
#metodo .method-title .section-intro,
#comparacion .comparison-copy>p:last-child,
#flexible .flexible-head .section-intro{
font-size:clamp(16px,3.8vw,20px)!important;
}
#servicios .service-copy>p:last-child,
#metodo .method-content>p:last-child,
#flexible .flex-copy>p:last-child,
#experiencia .facts span,
#experiencia .cap-track article>p{
font-size:clamp(12px,2.8vw,15px)!important;
}
#experiencia .experience-head h2{transform:translateY(2vh)!important}
#experiencia .cap-track article{
width:43.8vw!important;
min-width:43.8vw!important;
height:auto!important;
aspect-ratio:1/1!important;
}
}
/* =========================================================
FIVE DEMOFILMS v44 · GALAXY A53 / PORTRAIT REVIEW
Desktop only where explicitly requested.
========================================================= */
/* 03 all formats: library access becomes a visible house-style button. */
#portfolio .portfolio-library-link{
border:1px solid var(--gold)!important;
border-bottom:1px solid var(--gold)!important;
padding:12px 16px!important;
background:transparent!important;
display:inline-flex!important;
align-items:center!important;
width:max-content!important;
color:var(--ink)!important;
}
#portfolio .portfolio-track article>p,#portfolio .motion-caption p{color:#d2ad63!important}
#portfolio .motion-status{font-size:60%!important;padding:5px 7px!important}
/* Desktop finishing notes. */
@media (orientation:landscape){
/* Category 2 increase requested in 02, 05 and 07. */
#servicios .service-copy>p:last-child,
#metodo .method-content>p:last-child,
#flexible .flex-copy>p:last-child{font-size:clamp(16px,1.28vw,21px)!important}
/* 02: keep the PH clear of the lower selector. */
#servicios .services-visual{height:min(55vh,590px)!important;max-height:calc(100vh - 260px)!important}
#servicios .service-tabs{bottom:2.5vh!important}
/* 03 and 04 ribbons remain fully inside the sticky viewport. */
#portfolio .portfolio-window{max-height:52vh!important;padding-bottom:1vh!important}
#experiencia .cap-window{max-height:52vh!important;padding-bottom:1vh!important}
/* 08: separate CTA2 from CTA1 and seat it toward the footer. */
#contacto .library-access{bottom:96px!important;transform:none!important}
}
@media (orientation:portrait){
/* Stable mobile viewport and usable safe edges. */
main>.scene{min-height:100svh!important}
/* 00: lock full wordmark to hero title, left aligned and clear of “Real”. */
#hero .brand-kicker{
position:absolute!important;
left:6vw!important;
top:auto!important;
bottom:calc(11vh + clamp(245px,67vw,355px))!important;
width:min(58vw,310px)!important;
height:auto!important;
margin:0!important;
transform:none!important;
z-index:7!important;
}
#hero .brand-kicker img{width:100%!important;height:auto!important;object-position:left center!important}
/* 02: compact upper editorial block, 16:9 PH, counter inside PH, smaller service name. */
#servicios{height:230vh!important}
#servicios .sticky{height:100svh!important;min-height:100svh!important;padding:8.2vh 6vw 0!important;display:block!important}
#servicios .services-head{position:relative!important;margin:0!important}
#servicios .services-head .section-label{margin:0 0 1vh!important}
#servicios .services-head h2{font-size:clamp(29px,7.2vw,42px)!important;line-height:.95!important;white-space:nowrap!important;margin:0!important}
#servicios .services-head h2 em{display:inline!important;white-space:nowrap!important}
#servicios .services-head .section-intro{margin:1vh 0 0!important;width:88vw!important;max-width:88vw!important;line-height:1.32!important}
#servicios .services-visual{position:absolute!important;left:6vw!important;right:6vw!important;top:26.5vh!important;width:auto!important;height:auto!important;aspect-ratio:16/9!important;margin:0!important;overflow:hidden!important}
#servicios .services-visual video,#servicios .service-placeholder{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
#servicios .service-copy{position:absolute!important;left:6vw!important;right:6vw!important;top:26.5vh!important;bottom:auto!important;height:auto!important;transform:none!important;pointer-events:none!important}
#servicios .service-copy #serviceCounter{position:absolute!important;left:12px!important;top:calc(49.5vw - 32px)!important;margin:0!important;z-index:6!important;color:var(--beige)!important;font-size:10px!important}
#servicios .service-copy h3{position:absolute!important;left:0!important;top:calc(49.5vw + 10px)!important;margin:0!important;font-size:clamp(18px,4.2vw,24px)!important;line-height:1!important}
#servicios .service-copy strong{position:absolute!important;left:0!important;top:calc(49.5vw + 42px)!important;margin:0!important;font-size:clamp(31px,8vw,46px)!important;line-height:.95!important}
#servicios .service-copy>p:last-child{position:absolute!important;left:0!important;top:calc(49.5vw + 91px)!important;width:88vw!important;margin:0!important;line-height:1.3!important;text-align:left!important}
#servicios .service-tabs{position:absolute!important;left:6vw!important;right:6vw!important;bottom:max(2.8vh,env(safe-area-inset-bottom))!important;margin:0!important}
/* 03: title fits four controlled lines, content rises, cards retain lower edge. */
#portfolio .sticky{height:100svh!important;padding-top:7.5vh!important;padding-bottom:2.5vh!important}
#portfolio .portfolio-head .section-label{transform:none!important;margin:0 0 1vh!important}
#portfolio .portfolio-head h2{font-size:clamp(32px,7.8vw,46px)!important;line-height:.94!important;transform:none!important;margin:0!important}
#portfolio .portfolio-head .section-intro{transform:none!important;margin:1.2vh 0 0!important;line-height:1.3!important}
#portfolio .portfolio-library-link{position:absolute!important;right:6vw!important;top:7.7vh!important;margin:0!important;transform:none!important;font-size:8px!important;padding:10px 12px!important}
#portfolio .portfolio-window{transform:none!important;margin-top:2vh!important;max-height:50vh!important;padding-bottom:1vh!important}
#portfolio .portfolio-track article{width:52vw!important}
#portfolio .motion-caption{padding:18% 14px 18px!important}
#portfolio .motion-caption p{font-size:8px!important}
#portfolio .motion-caption h3{font-size:clamp(17px,4.1vw,24px)!important;color:#f1e7d5!important}
/* 04 experience: move the complete stack up and match card scale to 03. */
#experiencia .experience-sticky{padding-top:7.5vh!important;height:100svh!important}
#experiencia .experience-head{transform:none!important}
#experiencia .experience-head .section-label{margin:0 0 1vh!important}
#experiencia .experience-head h2{transform:none!important;font-size:clamp(32px,7.8vw,46px)!important;line-height:.94!important;margin:0!important}
#experiencia .experience-claim{transform:none!important;margin:1.2vh 0 0!important;line-height:1.3!important}
#experiencia .facts{transform:none!important;margin:1.5vh 0 1.8vh!important}
#experiencia .cap-window{transform:none!important;max-height:50vh!important;padding-bottom:1vh!important}
#experiencia .cap-track article{width:52vw!important;min-width:52vw!important;padding:16px 14px 25px!important}
#experiencia .cap-track article>b{font-size:clamp(17px,4.1vw,24px)!important;text-align:left!important}
#experiencia .cap-track article>p{font-size:10px!important;line-height:1.2!important;text-align:left!important;max-width:none!important}
/* 06 comparison: index below header, two-line title, full 1:1 PH. */
#comparacion .comparison-sticky{height:100svh!important;padding:8.5vh 6vw 2vh!important;display:block!important}
#comparacion .comparison-copy .section-label{transform:none!important;margin:0 0 1vh!important}
#comparacion .comparison-copy h2{font-size:clamp(34px,8.1vw,48px)!important;line-height:.94!important;margin:0!important}
#comparacion .comparison-copy h2 em{white-space:nowrap!important}
#comparacion .comparison-copy>p:last-child{margin:1.2vh 0 0!important;line-height:1.3!important}
#comparacion .wipe{position:absolute!important;left:6vw!important;right:6vw!important;top:34vh!important;width:auto!important;height:auto!important;aspect-ratio:1/1!important;margin:0!important}
/* 07 flexible: preserve the entire PH/safe-zone block; remove slide counter everywhere. */
#flexible .flexible-sticky{height:100svh!important;padding:0!important}
#flexible .flexible-head{top:7.8vh!important;left:6vw!important;right:6vw!important}
#flexible .flexible-head h2{font-size:clamp(31px,7.6vw,45px)!important;line-height:.94!important;margin:0!important}
#flexible .campaign-applications{font-size:clamp(7px,1.75vw,9px)!important;white-space:nowrap!important;margin:1vh 0 0!important;letter-spacing:.1em!important}
#flexible .flexible-head .section-intro{font-size:clamp(13px,3vw,16px)!important;line-height:1.25!important;margin:.8vh 0 0!important}
#flexible .flex-stage{top:49vh!important;left:50%!important;width:88vw!important;height:42vh!important}
#flexible .flex-copy{bottom:10.5vh!important}
#flexible .flex-copy>p:first-child{display:none!important}
#flexible .flex-tabs{bottom:max(2.2vh,env(safe-area-inset-bottom))!important}
/* 08: separate CTAs diagonally, footer logo left without losing estimator button. */
#contacto{height:122svh!important;min-height:122svh!important;padding:7vh 6vw 0!important}
#contacto .contact-copy{position:absolute!important;top:7vh!important;left:6vw!important;right:6vw!important;transform:none!important;margin:0!important;min-height:0!important;align-items:flex-start!important}
#contacto .library-access{position:absolute!important;left:6vw!important;right:6vw!important;bottom:105px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 34vw!important;gap:12px!important;align-items:end!important}
#contacto .library-access-copy{grid-column:1!important;align-self:end!important}
#contacto .library-video{grid-column:2!important;justify-self:end!important;width:34vw!important}
#contacto footer{grid-template-columns:auto 1fr auto!important}
#contacto footer #estimatorTrigger{justify-self:start!important;margin-left:0!important}
/* Estimator: compact vertical composition without clipping result CTA. */
.private-estimator-bar{height:56px!important;padding:0 18px!important}
.private-budget{height:calc(100svh - 56px)!important;padding:2vh 5vw 1.5vh!important;grid-template-rows:auto minmax(170px,1fr) auto!important;gap:8px!important}
.private-budget .budget-head{max-height:none!important;margin:0 0 8px!important}
.private-budget .budget-head .section-label{margin:0 0 5px!important}
.private-budget .budget-head h2{font-size:clamp(21px,5.2vw,31px)!important;margin:0!important}
.private-budget .budget-head>p:last-child{font-size:10px!important;line-height:1.25!important;margin:6px 0 0!important}
.private-budget .estimator{padding:14px!important;font-size:80%!important}
.private-budget .estimate-result{max-height:30vh!important;padding:15px!important;font-size:80%!important;overflow:auto!important}
.private-budget .estimate-result a{display:inline-block!important;margin-top:8px!important}
}
/* =========================================================
FIVE DEMOFILMS v45 · DEVICE PASS 2
========================================================= */
@media (orientation:landscape){
/* 02: scale square PH by available height, preserving a black buffer above selector. */
#servicios .services-visual{
width:min(38vw,calc(100vh - 390px))!important;
height:auto!important;
max-width:560px!important;
max-height:none!important;
aspect-ratio:1/1!important;
margin-top:1vh!important;
}
#servicios .service-tabs{bottom:3.2vh!important}
/* 03/04: cards scale with low windows, never clipping at the lower edge. */
#portfolio .portfolio-window,#experiencia .cap-window{height:clamp(260px,43vh,493px)!important;max-height:43vh!important;overflow:hidden!important;padding-bottom:0!important}
#portfolio .portfolio-track article,#experiencia .cap-track article{width:clamp(260px,43vh,493px)!important;min-width:clamp(260px,43vh,493px)!important;height:clamp(260px,43vh,493px)!important;aspect-ratio:1/1!important}
/* 05 Method: reduce the common working width by about 10%. */
#metodo .method-stage,#metodo .method-progress,#metodo .method-numbers{width:90%!important;max-width:90%!important}
#metodo .method-content{width:min(738px,50.4vw)!important;max-width:738px!important}
/* 08: PH two fingers right, copy five fingers right, deliberate overlap. */
#contacto .library-video{transform:translateX(4vw)!important}
#contacto .library-access-copy{transform:translateX(10vw)!important;position:relative!important;z-index:6!important}
}
@media (orientation:portrait){
/* Smaller mobile header and corrected STAR logo. */
#nav,#nav.nav.scrolled{height:36px!important;min-height:36px!important;padding:0 3vw!important}
#nav .brand{width:53px!important;height:38px!important;flex:0 0 53px!important;overflow:visible!important}
#nav .brand img{width:80%!important;height:100%!important;object-fit:contain!important;object-position:left center!important}
#nav nav{gap:clamp(5px,1.7vw,13px)!important;font-size:clamp(6px,1.4vw,8px)!important}
#nav .nav-cta{padding:6px 7px!important}
/* 00: the full FIVE wordmark is anchored above and to the left of the title. */
#hero .brand-kicker{left:6vw!important;right:auto!important;top:auto!important;bottom:calc(8vh + clamp(250px,71vw,370px))!important;width:min(68vw,360px)!important;transform:none!important;margin:0!important}
#hero .brand-kicker img{display:block!important;width:100%!important;height:auto!important;object-position:left center!important}
/* Shared mobile top safe position. */
#servicios .sticky,#portfolio .sticky,#experiencia .experience-sticky,#comparacion .comparison-sticky{padding-top:7.4vh!important}
/* 02: lower editorial and selector blocks; thinner tabs; larger READY label. */
#servicios .services-head .section-label{display:block!important;margin-bottom:.7vh!important}
#servicios .services-head h2{font-size:clamp(28px,7vw,40px)!important}
#servicios .services-head .section-intro{margin-top:1.4vh!important}
#servicios .services-visual,#servicios .service-copy{top:29vh!important}
#servicios .service-copy #serviceCounter{top:calc(49.5vw + 5px)!important;left:0!important;color:var(--gold2)!important}
#servicios .service-copy h3{top:calc(49.5vw + 28px)!important;font-size:clamp(28px,5.5vw,32px)!important}
#servicios .service-copy strong{top:calc(49.5vw + 67px)!important}
#servicios .service-copy>p:last-child{top:calc(49.5vw + 118px)!important}
#servicios .service-tabs{bottom:max(5.2vh,env(safe-area-inset-bottom))!important;height:34px!important;min-height:34px!important}
#servicios .service-tabs button{padding:6px 8px!important;font-size:9px!important;line-height:1!important}
/* 03: all top elements visible; carousel seated at lower safe edge. */
#portfolio .sticky{padding-top:7.4vh!important;padding-bottom:3vh!important}
#portfolio .portfolio-head{padding-right:0!important}
#portfolio .portfolio-head .section-label{display:block!important;margin:0 0 .7vh!important}
#portfolio .portfolio-head h2{font-size:clamp(30px,7.2vw,42px)!important}
#portfolio .portfolio-head .section-intro{margin-top:1vh!important}
#portfolio .portfolio-library-link{position:static!important;display:inline-flex!important;margin-top:1vh!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;font-size:9px!important;padding:12px 15px!important;transform:none!important}
#portfolio .portfolio-window{position:absolute!important;left:0!important;right:0!important;bottom:3.5vh!important;height:auto!important;max-height:none!important;margin:0!important;padding-bottom:0!important;transform:none!important}
#portfolio .portfolio-track article{width:min(50vw,42vh)!important;min-width:min(50vw,42vh)!important;height:auto!important}
#portfolio .motion-caption{padding-bottom:12px!important;transform:translateY(3px)!important}
#portfolio .motion-status{font-size:50%!important;padding:4px 6px!important}
/* 04: tighter facts, visible index, carousel slightly lifted. */
#experiencia .experience-sticky{padding-top:7.4vh!important}
#experiencia .experience-head .section-label{display:block!important}
#experiencia .facts{margin:1vh 0 1.1vh!important;gap:2vw!important}
#experiencia .facts li,#experiencia .facts div{margin:0!important;padding:0!important}
#experiencia .cap-window{position:absolute!important;left:0!important;right:0!important;bottom:3.5vh!important;height:auto!important;max-height:none!important;margin:0!important;padding-bottom:0!important}
#experiencia .cap-track article{width:min(50vw,42vh)!important;min-width:min(50vw,42vh)!important;height:auto!important}
/* 06 comparison: full header/index, true two-line title, smaller support, PH at bottom safe margin. */
#comparacion .comparison-sticky{padding-top:7.4vh!important;padding-bottom:3.5vh!important}
#comparacion .comparison-copy .section-label{display:block!important;margin:0 0 .8vh!important}
#comparacion .comparison-copy h2{font-size:clamp(29px,7vw,40px)!important;line-height:.92!important;max-width:88vw!important}
#comparacion .comparison-copy>p:last-child{font-size:clamp(13px,3vw,16px)!important;line-height:1.28!important;margin-top:1vh!important}
#comparacion .wipe{top:auto!important;bottom:3.8vh!important;left:6vw!important;right:6vw!important;width:auto!important;height:auto!important;max-height:53vh!important;aspect-ratio:1/1!important}
/* 07: move header down and PH block close to lower ratio selector. */
#flexible .flexible-head{top:7.4vh!important}
#flexible .flex-stage{top:auto!important;bottom:8.5vh!important;transform:translateX(-50%)!important;height:42vh!important}
#flexible .flex-copy{bottom:11.7vh!important}
/* 08: smaller footer, correct STAR/FIVE hierarchy, CTA1 safe top, CTA2 40% downscale. */
#contacto{height:118svh!important;min-height:118svh!important;padding-top:0!important}
#contacto .contact-copy{top:7.4vh!important;left:6vw!important;right:6vw!important}
#contacto .contact-copy h2{font-size:clamp(40px,10vw,62px)!important}
#contacto .library-access{bottom:68px!important;grid-template-columns:minmax(0,1fr) 28vw!important;gap:8px!important}
#contacto .library-access-copy{transform:scale(.6)!important;transform-origin:right bottom!important;width:115%!important;justify-self:end!important}
#contacto .library-video{width:28vw!important;max-width:125px!important}
#contacto footer{height:68px!important;min-height:68px!important;max-height:68px!important;padding:0 3vw!important}
#contacto footer #estimatorTrigger{width:48px!important;height:48px!important;padding:3px!important;margin:0!important}
#contacto footer #estimatorTrigger img{width:100%!important;height:100%!important;object-fit:contain!important}
#contacto footer .footer-center-logo{width:min(48vw,230px)!important;max-height:58px!important}
}
/* =========================================================
FIVE DEMOFILMS v46 · MOBILE SPACING + MP4 RESTORE
========================================================= */
@media (orientation:portrait){
/* 00: logo-dark anchored left, lifted and 10% larger. */
#hero .brand-kicker{left:3vw!important;bottom:calc(8vh + clamp(270px,75vw,395px))!important;width:min(74.8vw,396px)!important}
/* 01: lower the complete opportunity composition by two fingers. */
#oportunidad .opportunity-sticky,#oportunidad .sticky{transform:translateY(4vh)!important}
/* 02: add breathing room below the PH and between service label and claim. */
#servicios .service-copy h3{top:calc(49.5vw + 11px)!important}
#servicios .service-copy strong{top:calc(49.5vw + 15px)!important}
#servicios .service-copy>p:last-child{top:calc(49.5vw + 146px)!important}
/* 03: lower editorial block, open vertical rhythm, lift carousel three fingers. */
#portfolio .sticky{padding-top:11.5vh!important}
#portfolio .portfolio-head .section-label{margin-bottom:1.5vh!important}
#portfolio .portfolio-head h2{margin-bottom:1.8vh!important}
#portfolio .portfolio-head .section-intro{margin-top:0!important;line-height:1.4!important}
#portfolio .portfolio-library-link{margin-top:1.7vh!important}
#portfolio .portfolio-window{bottom:8.5vh!important}
/* 04: lower upper stack, restore thin fact dividers, compact facts, lift carousel. */
#experiencia .experience-sticky{padding-top:11.5vh!important}
#experiencia .experience-head .section-label{margin-bottom:1.4vh!important}
#experiencia .experience-head h2{margin-bottom:1.6vh!important}
#experiencia .experience-claim{margin-top:0!important;line-height:1.4!important}
#experiencia .facts{margin:1.1vh 0!important;gap:0!important}
#experiencia .facts>*{padding:0 2.5vw!important;margin:0!important;border:0!important;border-right:1px solid rgba(17,16,14,.22)!important;background:none!important}
#experiencia .facts>*:first-child{padding-left:0!important}
#experiencia .facts>*:last-child{border-right:0!important;padding-right:0!important}
#experiencia .cap-window{bottom:8.5vh!important}
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(2.2vh)!important}
/* 06: lower and separate text, lift square PH three fingers. */
#comparacion .comparison-sticky{padding-top:11.5vh!important}
#comparacion .comparison-copy .section-label{margin-bottom:1.5vh!important}
#comparacion .comparison-copy h2{margin-bottom:1.8vh!important}
#comparacion .comparison-copy>p:last-child{margin-top:0!important;line-height:1.38!important}
#comparacion .wipe{bottom:5.8vh!important}
/* 07: PH stays above selector and category-2 copy. */
#flexible .flex-stage{top:48.5vh!important;bottom:auto!important;transform:translate(-50%,-46%)!important;height:38vh!important}
#flexible .flex-copy{bottom:14.5vh!important}
#flexible .flex-tabs{bottom:max(2.2vh,env(safe-area-inset-bottom))!important}
/* 08: lower CTA1; CTA2 remains untouched. Footer logo hierarchy corrected. */
#contacto .contact-copy{top:12.5vh!important}
#contacto footer{grid-template-columns:64px 1fr 64px!important;align-items:center!important}
#contacto footer #estimatorTrigger{justify-self:start!important;width:48px!important;height:48px!important}
#contacto footer .footer-center-logo{display:block!important;width:min(24vw,115px)!important;max-height:40px!important;margin:0 auto!important;object-fit:contain!important}
#contacto footer p:nth-child(2){justify-self:center!important;text-align:center!important;width:100%!important}
}
/* =========================================================
FIVE DEMOFILMS v47 · MOBILE FINAL SPACING PASS
Corrections are portrait-only. Desktop remains v46.
========================================================= */
@media (orientation:portrait){
/* 00 · Presentation logo: truly centred and 25% larger than v46. */
#hero .brand-kicker{
left:50%!important;
right:auto!important;
width:min(93.5vw,495px)!important;
transform:translateX(-50%)!important;
}
#hero .brand-kicker img{object-position:center center!important}
/* 01 · Keep composition lowered, but lift only the index into free space. */
#oportunidad .section-label{
position:relative!important;
transform:translateY(-10vh)!important;
}
/* 02 · More title/index rhythm. Lower claim, separate category-2 copy,
and lift selector one finger for a safe lower margin. */
#servicios .services-head .section-label{margin-bottom:1.8vh!important}
#servicios .service-copy strong{top:calc(49.5vw + 64px)!important}
#servicios .service-copy>p:last-child{top:calc(49.5vw + 115px)!important}
#servicios .service-tabs{bottom:max(7.2vh,env(safe-area-inset-bottom))!important}
/* 03 · Index stays fixed. Lower the remaining editorial block four fingers;
lift carousel three further fingers for safety. */
#portfolio .portfolio-head h2{transform:translateY(2vh)!important}
#portfolio .portfolio-head .section-intro{transform:translateY(3vh)!important}
#portfolio .portfolio-library-link{transform:translateY(4vh)!important}
#portfolio .portfolio-window{bottom:14.5vh!important}
/* 04 · Restore the three horizontal fact cells and their fine dividers.
Compact them, enlarge labels 15%, keep index fixed, lower upper copy. */
#experiencia .experience-head h2{transform:translateY(2vh)!important}
#experiencia .experience-claim{transform:translateY(2vh)!important}
#experiencia .facts{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:0!important;
margin:7vh 0 1vh!important;
background:transparent!important;
}
#experiencia .facts>*{
display:flex!important;
align-items:center!important;
gap:8px!important;
min-width:0!important;
padding:3px 2vw!important;
margin:0!important;
border:0!important;
border-right:1px solid rgba(17,16,14,.22)!important;
background:transparent!important;
}
#experiencia .facts>*:first-child{padding-left:0!important}
#experiencia .facts>*:last-child{border-right:0!important;padding-right:0!important}
#experiencia .facts strong{font-size:clamp(24px,6.2vw,36px)!important;line-height:1!important}
#experiencia .facts span{font-size:clamp(13.8px,3.22vw,17.25px)!important;line-height:1.15!important}
#experiencia .cap-window{bottom:10vh!important}
/* 06 · Index fixed, upper title/support down three fingers. */
#comparacion .comparison-copy h2{transform:translateY(4vh)!important}
#comparacion .comparison-copy>p:last-child{transform:translateY(4vh)!important}
/* 07 · Index one finger lower. Header PH has clear air above/below.
Copy goes down two fingers while controls rise two fingers. */
#flexible .flexible-head .section-label{transform:translateY(2vh)!important}
#flexible .flex-stage{top:56.5vh!important}
#flexible .flex-copy{bottom:12.5vh!important}
#flexible .flex-tabs{bottom:max(2.2vh,env(safe-area-inset-bottom))!important}
/* 08 · CTA1 much lower so its index enters the mobile safe area.
CTA2 is untouched. */
#contacto .contact-copy{top:32.5vh!important}
#contacto footer #estimatorTrigger img{
transform:scale(1.8)!important;
transform-origin:left center!important;
}
}
/* =========================================================
FIVE DEMOFILMS v49 · ORIENTATION, RIBBONS, SERVICES 16:9
Keeps the approved portrait composition and changes only the systems below.
========================================================= */
/* 02 · The service placeholder is definitively 16:9 on every layout. */
#servicios .services-visual{
aspect-ratio:16/9!important;
height:auto!important;
}
#servicios .services-visual video,
#servicios .service-placeholder{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
@media (orientation:landscape) and (min-width:851px){
/* Sized by both width and available height; shifted optically right. */
#servicios .services-visual{
width:min(48vw,900px,calc((100vh - 430px) * 1.77778))!important;
max-width:none!important;
max-height:none!important;
margin:1vh 0 0 4vw!important;
align-self:start!important;
}
}
@media (orientation:portrait){
/* Mobile PH remains between the approved upper copy and lower selector. */
#servicios .services-visual{
left:6vw!important;
right:6vw!important;
width:auto!important;
height:auto!important;
aspect-ratio:16/9!important;
margin:0!important;
}
/* 04 · Mobile facts: vertical stack with horizontal separators, as in v43. */
#experiencia .facts{
display:flex!important;
flex-direction:column!important;
grid-template-columns:none!important;
gap:0!important;
width:100%!important;
background:transparent!important;
}
#experiencia .facts>*{
display:flex!important;
width:100%!important;
align-items:center!important;
gap:10px!important;
padding:5px 0!important;
margin:0!important;
border:0!important;
border-bottom:1px solid rgba(17,16,14,.22)!important;
background:transparent!important;
}
#experiencia .facts>*:first-child,
#experiencia .facts>*:last-child{padding-left:0!important;padding-right:0!important}
#experiencia .facts>*:last-child{border-bottom:0!important}
/* 03/04 · Equal optical end gutters on touch ribbons. */
#portfolio .portfolio-track:after,
#experiencia .cap-track:after{
content:""!important;
display:block!important;
flex:0 0 12vw!important;
width:12vw!important;
min-width:12vw!important;
height:1px!important;
}
}
/* 03/04 · Preserve 1440p; scale only shorter desktop/tablet-keyboard viewports. */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#portfolio .portfolio-window{
height:clamp(260px,36vh,430px)!important;
max-height:36vh!important;
padding-bottom:0!important;
}
#portfolio .portfolio-track article{
width:clamp(260px,36vh,430px)!important;
min-width:clamp(260px,36vh,430px)!important;
height:clamp(260px,36vh,430px)!important;
aspect-ratio:1/1!important;
}
#experiencia .cap-window{
height:clamp(250px,33vh,410px)!important;
max-height:33vh!important;
padding-bottom:0!important;
}
#experiencia .cap-track article{
width:clamp(250px,33vh,410px)!important;
min-width:clamp(250px,33vh,410px)!important;
height:clamp(250px,33vh,410px)!important;
aspect-ratio:1/1!important;
}
}
/* Phones in landscape receive a rotate message. Tablets/keyboard devices remain enabled. */
.rotate-device-notice{display:none}
@media (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none) and (pointer:coarse){
body>header,body>main,body>.progress{visibility:hidden!important}
.rotate-device-notice{
position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
padding:8vw;background:var(--black);color:var(--beige);text-align:center;
}
.rotate-device-notice p{max-width:430px;margin:0;font-size:clamp(18px,4vw,30px);line-height:1.35}
.rotate-device-notice strong{display:block;color:var(--gold2);font-size:.55em;letter-spacing:.18em;margin-bottom:16px}
}
/* =========================================================
FIVE DEMOFILMS v50 · EXPERIENCE MOBILE CORRECTION
Header and all other approved v49 systems remain unchanged.
========================================================= */
@media (orientation:portrait){
/* Facts: 30% smaller and seated directly under the support text. */
#experiencia .facts{
margin:3.8vh 0 1vh!important;
transform:none!important;
}
#experiencia .facts>*{
min-height:0!important;
padding:3px 0!important;
gap:7px!important;
}
#experiencia .facts strong{
font-size:clamp(17px,4.35vw,25px)!important;
line-height:1!important;
}
#experiencia .facts span{
font-size:clamp(9.5px,2.25vw,12px)!important;
line-height:1.08!important;
}
/* The experience window extends 12vw beyond the canvas.
18vw of terminal track space leaves a real 6vw white gutter visible. */
#experiencia .cap-track:after{
content:""!important;
display:block!important;
flex:0 0 18vw!important;
width:18vw!important;
min-width:18vw!important;
height:1px!important;
}
}
/* v52 */
[data-library-disabled="true"]{cursor:default!important;pointer-events:none!important;opacity:.7!important}
#servicios .service-tabs,#flexible .flex-tabs{position:relative!important;isolation:isolate!important;overflow:hidden!important;--selector-progress:0}
#servicios .service-tabs::before,#flexible .flex-tabs::before{content:"";position:absolute;z-index:0;left:0;top:0;bottom:0;width:33.333333%;background:var(--gold2);transform:translate3d(calc(var(--selector-progress)*200%),0,0);pointer-events:none;will-change:transform}
#servicios .service-tabs button,#flexible .flex-tabs button{position:relative!important;z-index:1!important;background:transparent!important;cursor:pointer!important;touch-action:manipulation!important}
#servicios .service-tabs button.active,#flexible .flex-tabs button.active{background:transparent!important;color:var(--ink)!important}
#metodo .method-numbers button,#comparacion .wipe{cursor:pointer!important;touch-action:none!important}
.scene.dark h1 em,.scene.dark h2 em,.scene.dark h3 em,#metodo .method-content.is-select h3{text-shadow:0 0 28px rgba(210,173,99,.34)!important}
#flexible #flexName .flex-ratio{font-size:1em!important;white-space:nowrap!important}#flexible #flexName .flex-master-label{font-size:.58em!important;letter-spacing:.035em!important;white-space:nowrap!important}
@media(orientation:landscape){#flexible #flexName{display:flex!important;align-items:baseline!important;gap:.22em!important;white-space:nowrap!important}}
/* =========================================================
FIVE DEMOFILMS v53 · DEFINITIVE PRIVATE ESTIMATOR
Public-site geometry remains v52.
========================================================= */
.private-budget{grid-template-columns:minmax(0,1.5fr) minmax(290px,.72fr)!important;align-items:start!important;gap:clamp(20px,3vw,52px)!important;padding:clamp(28px,5vh,70px) clamp(24px,5vw,80px)!important}
.private-budget .budget-head{grid-column:1/-1!important;margin-bottom:4px!important}
.estimator-v53{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;max-height:64vh!important;padding-right:8px!important}
.estimator-v53 .field-service,.estimator-v53 .estimator-common,.estimator-v53 .estimator-branch{grid-column:1/-1!important}
.estimator-v53 .estimator-branch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.estimator-v53 .estimator-branch[hidden]{display:none!important}
.estimator-v53 .estimator-field,.estimator-v53 .valuation-checks,.estimator-v53 .estimator-fixed{margin:0!important;padding:14px!important;border:1px solid rgba(181,138,58,.28)!important;background:#11100e!important;color:var(--beige)!important;min-width:0!important}
.estimator-v53 .estimator-field-wide{grid-column:1/-1!important}
.estimator-v53 label,.estimator-v53 legend,.estimator-v53 .estimator-fixed span{display:block!important;color:var(--gold2)!important;font-size:9px!important;letter-spacing:.13em!important;text-transform:uppercase!important;margin-bottom:8px!important}
.estimator-v53 select,.estimator-v53 input[type=number]{width:100%!important;min-height:42px!important;border:1px solid rgba(233,224,208,.22)!important;background:#080807!important;color:var(--beige)!important;padding:9px 10px!important;border-radius:0!important}
.estimator-v53 .field-note{display:block!important;margin-top:8px!important;color:#aaa196!important;font-size:10px!important;line-height:1.35!important}
.estimator-v53 .estimator-fixed{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}.estimator-v53 .estimator-fixed span{margin:0!important}.estimator-v53 .estimator-fixed strong{color:var(--gold2)!important;font-size:22px!important}
.estimator-v53 .valuation-checks{padding:13px 14px!important}.estimator-v53 .check{display:flex!important;align-items:flex-start!important;gap:9px!important;margin:7px 0!important}.estimator-v53 .check span{font-size:11px!important;line-height:1.3!important;color:var(--beige)!important}.estimator-v53 .check input{margin-top:2px!important}
.private-budget .estimate-result{position:sticky!important;top:78px!important;padding:24px!important;max-height:64vh!important;overflow:auto!important;background:var(--paper)!important;border:1px solid rgba(181,138,58,.4)!important}
.estimate-breakdown{margin:18px 0!important;border-top:1px solid rgba(17,16,14,.16)!important}.estimate-breakdown div{display:flex!important;justify-content:space-between!important;gap:14px!important;padding:9px 0!important;border-bottom:1px solid rgba(17,16,14,.1)!important;font-size:11px!important}.estimate-breakdown b{white-space:nowrap!important;color:var(--ink)!important}
@media(orientation:portrait){.private-budget{display:block!important;height:auto!important;min-height:calc(100svh - 56px)!important;overflow:visible!important;padding:22px 5vw 34px!important}.estimator-v53{grid-template-columns:1fr!important;max-height:none!important;overflow:visible!important;padding-right:0!important}.estimator-v53 .estimator-branch{grid-template-columns:1fr!important}.estimator-v53 .estimator-field-wide{grid-column:1!important}.private-budget .estimate-result{position:relative!important;top:auto!important;max-height:none!important;margin-top:18px!important}}
/* v54 · logo replacement only: preserve all approved v53 geometry */
#nav .brand{display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;flex:0 0 auto!important;overflow:visible!important}
#nav .brand .header-number-logo{width:54px!important;height:54px!important;flex:0 0 54px!important;object-fit:contain!important;object-position:center!important}
#nav .brand .header-letters-logo{width:clamp(92px,8vw,128px)!important;height:auto!important;max-height:25px!important;flex:0 1 auto!important;object-fit:contain!important;object-position:left center!important}
@media(orientation:portrait),(max-width:850px){#nav .brand .header-letters-logo{display:none!important}#nav .brand .header-number-logo{width:42px!important;height:38px!important;flex-basis:42px!important}}
/* =========================================================
FIVE DEMOFILMS v55 · LOGO SCALE AND FOOTER HEIGHT ONLY
All approved v54 interactions and public geometry remain unchanged.
========================================================= */
/* Header home symbol: +10%. Header letters: +50%, balanced beside symbol. */
#nav .brand{gap:10px!important}
#nav .brand .header-number-logo{width:59.4px!important;height:59.4px!important;flex-basis:59.4px!important}
#nav .brand .header-letters-logo{width:clamp(138px,12vw,192px)!important;max-height:37.5px!important}
/* Hero full lockup: -25%. Its existing anchor stays fixed, creating more air above the title. */
#hero .brand-kicker{width:min(30vw,480px)!important}
/* Footer: shorter strip, compact full logo and 20% smaller letters logo. */
#contacto footer{height:72px!important;min-height:72px!important;max-height:72px!important}
#contacto footer #estimatorTrigger{width:66px!important;height:66px!important;padding:5px!important;margin:0!important;display:inline-grid!important;place-items:center!important}
#contacto footer #estimatorTrigger img.footer-main-logo{width:59.4px!important;height:59.4px!important;max-width:59.4px!important;max-height:59.4px!important;object-fit:contain!important;transform:none!important}
#contacto footer .footer-center-logo{width:min(300px,30vw)!important;max-height:72px!important;object-fit:contain!important}
@media(orientation:portrait),(max-width:850px){
#nav .brand .header-letters-logo{display:none!important}
#nav .brand .header-number-logo{width:46.2px!important;height:41.8px!important;flex-basis:46.2px!important}
#hero .brand-kicker{width:min(70.1vw,371px)!important}
#contacto .library-access{bottom:58px!important}
#contacto footer{height:58px!important;min-height:58px!important;max-height:58px!important;padding:0 3vw!important}
#contacto footer #estimatorTrigger{width:52px!important;height:52px!important;padding:3px!important}
#contacto footer #estimatorTrigger img.footer-main-logo{width:46.2px!important;height:46.2px!important;max-width:46.2px!important;max-height:46.2px!important;transform:none!important}
#contacto footer .footer-center-logo{width:min(19.2vw,92px)!important;max-height:32px!important}
}
/* FIVE DEMOFILMS v56 · controlled responsive corrections */
#hero .veil{display:block!important;position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(8,8,7,.96) 0%,rgba(8,8,7,.78) 25%,rgba(8,8,7,.32) 49%,rgba(8,8,7,0) 70%)!important}
#hero .brand-kicker{width:min(25.5vw,408px)!important}
#portfolio .portfolio-library-link{left:6vw!important;right:auto!important}
.estimator-production-warning{grid-column:1/-1;margin:0!important;padding:11px 13px;border:1px solid rgba(181,138,58,.45);color:var(--gold2)!important;background:rgba(181,138,58,.08);font-size:11px;line-height:1.4}.estimator-production-warning[hidden]{display:none!important}.mobile-menu-toggle{display:none}
@media(orientation:portrait),(max-width:850px){
#nav,#nav.nav.scrolled{height:52px!important;min-height:52px!important;padding:0 3vw!important;overflow:visible!important}#nav .brand{gap:7px!important;min-width:0!important}#nav .brand .header-number-logo{width:42px!important;height:42px!important;flex:0 0 42px!important}#nav .brand .header-letters-logo{display:block!important;width:min(34vw,145px)!important;max-height:28px!important}.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;border:1px solid rgba(210,173,99,.38);background:rgba(8,8,7,.78);color:var(--gold2);padding:8px 10px;font-size:8px;letter-spacing:.16em;cursor:pointer}#nav nav{display:none!important;position:absolute!important;top:52px!important;right:3vw!important;left:auto!important;width:min(238px,82vw)!important;padding:8px!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;background:rgba(8,8,7,.98)!important;border:1px solid rgba(210,173,99,.25)!important;box-shadow:0 18px 45px rgba(0,0,0,.45)!important}#nav nav.is-open{display:flex!important}#nav nav a{display:block!important;padding:12px 10px!important;border-bottom:1px solid rgba(210,173,99,.13)!important;font-size:10px!important;text-align:left!important}#nav nav a:last-child{border-bottom:0!important}
#hero .veil{background:linear-gradient(90deg,rgba(8,8,7,.92),rgba(8,8,7,.62) 32%,rgba(8,8,7,.12) 67%,transparent 88%)!important}#hero .brand-kicker{width:min(55vw,290px)!important;bottom:calc(10vh + clamp(285px,76vw,405px))!important}
#servicios .sticky{height:100svh!important;min-height:100svh!important}#servicios .service-tabs{position:absolute!important;left:6vw!important;right:6vw!important;top:auto!important;bottom:max(3.5vh,env(safe-area-inset-bottom))!important;height:34px!important;min-height:34px!important;margin:0!important;transform:none!important}
#portfolio .portfolio-library-link{position:static!important;left:auto!important;right:auto!important;align-self:flex-start!important}#portfolio .portfolio-window{bottom:7vh!important;height:min(47vh,72vw)!important;min-height:250px!important;max-height:47vh!important}#portfolio .portfolio-track article{width:clamp(250px,62vw,390px)!important;min-width:clamp(250px,62vw,390px)!important;height:clamp(250px,62vw,390px)!important}
#flexible .flex-tabs{position:absolute!important;left:6vw!important;right:6vw!important;top:auto!important;bottom:max(3.5vh,env(safe-area-inset-bottom))!important;height:34px!important;min-height:34px!important;margin:0!important;transform:none!important}#flexible .flex-copy{bottom:10.5vh!important}
#experiencia .facts{margin:2.4vh 0 2vh!important;row-gap:0!important}#experiencia .facts>*{padding:7px 0!important;gap:10px!important;line-height:1.25!important}#experiencia .facts span{line-height:1.25!important}#experiencia .cap-window{bottom:7vh!important;height:min(43vh,68vw)!important;min-height:245px!important;max-height:43vh!important}#experiencia .cap-track article{width:clamp(245px,60vw,375px)!important;min-width:clamp(245px,60vw,375px)!important;height:clamp(245px,60vw,375px)!important}
#contacto{height:100svh!important;min-height:100svh!important;padding-top:0!important}#contacto .contact-copy{top:10vh!important}#contacto .library-access{bottom:72px!important;grid-template-columns:minmax(0,1fr) 34vw!important;gap:12px!important;align-items:center!important}#contacto .library-access-copy{transform:scale(.82)!important;transform-origin:left bottom!important;width:118%!important;justify-self:start!important}#contacto .library-video{width:34vw!important;max-width:150px!important}#contacto footer{height:58px!important;min-height:58px!important;max-height:58px!important}
}
/* =========================================================
FIVE DEMOFILMS v57 · targeted review pass over approved v56
========================================================= */
@media (orientation:landscape) and (min-width:851px){
/* 00: raise and reduce FULL WT. */
#hero .brand-kicker{width:min(21.5vw,344px)!important;bottom:calc(8vh + clamp(382px,32vw,505px))!important}
/* 02 / 06: selectors continue changing content while the gold pill stays fixed. */
#servicios .service-tabs::before,#flexible .flex-tabs::before{transform:none!important;left:0!important}
/* 02: media scales down before meeting the selector. */
#servicios .services-visual{width:min(45vw,820px,calc((100vh - 485px)*1.77778))!important;max-height:calc(100vh - 485px)!important}
/* 03: lower library button and carousel. */
#portfolio .portfolio-library-link{transform:translateY(8vh)!important}
#portfolio .portfolio-window{transform:translateY(10vh)!important}
}
@media (orientation:portrait),(max-width:850px){
/* 07: clearer spacing and larger milestones. */
#experiencia .facts{margin:3.6vh 0 2.8vh!important}
#experiencia .facts>*{padding:8px 0!important;gap:13px!important}
#experiencia .facts strong{font-size:clamp(22px,5.6vw,31px)!important;min-width:72px!important}
#experiencia .facts span{font-size:clamp(11.5px,2.8vw,15px)!important;line-height:1.28!important}
#experiencia .cap-window{bottom:10vh!important;height:min(42vh,70vw)!important;max-height:42vh!important}
#experiencia .cap-track article{padding:16px 16px 38px!important}
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(-1.2vh)!important}
#experiencia .cap-track article>b{font-size:clamp(22px,5.5vw,31px)!important}
#experiencia .cap-track article>p{font-size:clamp(12px,3vw,15px)!important;line-height:1.28!important}
/* 08: CTA2 and media grow and align to the right; footer remains visible. */
#contacto{height:100svh!important;min-height:100svh!important;padding-bottom:58px!important}
#contacto .library-access{left:6vw!important;right:6vw!important;bottom:74px!important;grid-template-columns:minmax(0,1fr) 42vw!important;gap:14px!important;justify-items:end!important}
#contacto .library-access-copy{width:100%!important;transform:none!important;justify-self:end!important;text-align:right!important}
#contacto .library-access h3{font-size:clamp(27px,6.4vw,39px)!important}
#contacto .library-access p{margin-left:auto!important;font-size:clamp(14px,3.3vw,17px)!important}
#contacto .library-access .button{font-size:10px!important;padding:14px 17px!important}
#contacto .library-video{width:42vw!important;max-width:190px!important;justify-self:end!important}
/* Estimator: visible independent scrollbars and persistent result card. */
.private-estimator-panel{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable!important}
.private-budget{display:block!important;height:auto!important;min-height:calc(100svh - 56px)!important;overflow:visible!important;padding:20px 5vw 34px!important}
.private-budget .estimator,.estimator-v53{display:grid!important;max-height:52svh!important;overflow-y:scroll!important;overflow-x:hidden!important;scrollbar-gutter:stable!important;padding-right:10px!important}
.private-budget .estimate-result{display:block!important;position:relative!important;top:auto!important;max-height:31svh!important;overflow-y:scroll!important;scrollbar-gutter:stable!important;margin-top:16px!important;padding:18px!important}
.private-estimator-panel,.private-budget .estimator,.private-budget .estimate-result{scrollbar-width:auto!important;scrollbar-color:var(--gold) rgba(17,16,14,.15)!important}
}
/* =========================================================
FIVE DEMOFILMS v58 · focused correction pass over v57
========================================================= */
@media (orientation:landscape) and (min-width:851px){
/* 01: FULL WT higher and about three fingers to the right. */
#hero .brand-kicker{left:4vw!important;bottom:calc(8vh + clamp(410px,34vw,535px))!important}
/* Darken only the left half of the video, reaching 50% at the left edge. */
#hero .hero-media{isolation:isolate!important}
#hero .hero-media::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:4!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(8,8,7,.50) 0%,rgba(8,8,7,.32) 25%,rgba(8,8,7,0) 52%,rgba(8,8,7,0) 100%)!important}
/* 02 and 06: fixed first-third gold field. State/content still changes. */
#servicios .service-tabs,#flexible .flex-tabs{background:linear-gradient(90deg,var(--gold2) 0 33.333333%,transparent 33.333333% 100%)!important}
#servicios .service-tabs::before,#flexible .flex-tabs::before{content:none!important;display:none!important;transform:none!important}
#servicios .service-tabs button,#flexible .flex-tabs button,#servicios .service-tabs button.active,#flexible .flex-tabs button.active{background:transparent!important}
/* 03: button shares the exact left edge of the supporting paragraph. */
#portfolio .portfolio-library-link{left:0!important;right:auto!important}
}
/* Estimator: explicit optional capture and aligned half/full-day rows. */
#bOriginalCapture{display:block!important}
.original-capture-field{display:flex!important;flex-direction:column!important}
.estimator-v53 .estimator-field:has(#bHalfDays),
.estimator-v53 .estimator-field:has(#bFullDays),
.estimator-v53 .estimator-field:has(#bCustomDeliverHalf),
.estimator-v53 .estimator-field:has(#bCustomDeliver),
.estimator-v53 .estimator-field:has(#bOriginalHalfDays),
.estimator-v53 .estimator-field:has(#bOriginalFullDays),
.estimator-v53 .estimator-field:has(#bOriginalDeliverHalf),
.estimator-v53 .estimator-field:has(#bOriginalDeliver){display:flex!important;flex-direction:column!important;justify-content:flex-end!important;min-height:104px!important}
.estimator-v53 .estimator-field:has(#bHalfDays) input,
.estimator-v53 .estimator-field:has(#bFullDays) input,
.estimator-v53 .estimator-field:has(#bCustomDeliverHalf) input,
.estimator-v53 .estimator-field:has(#bCustomDeliver) input,
.estimator-v53 .estimator-field:has(#bOriginalHalfDays) input,
.estimator-v53 .estimator-field:has(#bOriginalFullDays) input,
.estimator-v53 .estimator-field:has(#bOriginalDeliverHalf) input,
.estimator-v53 .estimator-field:has(#bOriginalDeliver) input{margin-top:auto!important}
@media (orientation:portrait),(max-width:850px){
/* 07: tighter line-height but visibly separated milestone rows. */
#experiencia .facts{margin:3vh 0 2.4vh!important;gap:7px!important;row-gap:7px!important}
#experiencia .facts>*{min-height:48px!important;padding:4px 0 7px!important;gap:12px!important;line-height:1.05!important}
#experiencia .facts strong{line-height:.92!important}
#experiencia .facts span{line-height:1.12!important}
/* Previous lift was -1.2vh; retain only half. */
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(-.6vh)!important}
/* 08: footer exactly the desktop height; CTA2 rises and sits next to video. */
#contacto{padding-bottom:72px!important}
#contacto footer{height:72px!important;min-height:72px!important;max-height:72px!important}
#contacto .library-access{bottom:92px!important;grid-template-columns:minmax(0,1fr) 42vw!important;column-gap:4px!important;align-items:end!important}
#contacto .library-access-copy{justify-self:end!important;align-self:end!important;text-align:right!important;padding-right:0!important}
#contacto .library-access .button{display:inline-flex!important;margin-top:8px!important;transform:none!important;white-space:nowrap!important}
#contacto .library-video{justify-self:start!important;margin-left:0!important;width:42vw!important;max-width:190px!important}
/* Estimator: lift headings and reserve permanent windows for form/results. */
.private-estimator-panel{overflow:hidden!important;inset:0!important}
.private-estimator-bar{height:56px!important}
.private-budget{height:calc(100svh - 56px)!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) minmax(178px,29svh)!important;gap:8px!important;overflow:hidden!important;padding:10px 4vw 10px!important}
.private-budget .budget-head{margin:0!important;max-height:none!important;overflow:visible!important}
.private-budget .budget-head .section-label{margin:0 0 2px!important;font-size:9px!important}
.private-budget .budget-head h2{font-size:clamp(18px,4.7vw,25px)!important;line-height:1!important;margin:0!important}
.private-budget .budget-head>p:last-child{font-size:9px!important;line-height:1.15!important;margin:3px 0 0!important}
.private-budget .estimator,.estimator-v53{grid-row:2!important;display:grid!important;max-height:none!important;height:100%!important;min-height:0!important;overflow-y:scroll!important;overflow-x:hidden!important;scrollbar-gutter:stable!important;padding:10px!important}
.private-budget .estimate-result{grid-row:3!important;display:block!important;position:relative!important;top:auto!important;max-height:none!important;height:100%!important;min-height:0!important;overflow-y:scroll!important;scrollbar-gutter:stable!important;margin:0!important;padding:14px!important}
.estimator-v53 .estimator-field:has(#bHalfDays),
.estimator-v53 .estimator-field:has(#bFullDays),
.estimator-v53 .estimator-field:has(#bCustomDeliverHalf),
.estimator-v53 .estimator-field:has(#bCustomDeliver),
.estimator-v53 .estimator-field:has(#bOriginalHalfDays),
.estimator-v53 .estimator-field:has(#bOriginalFullDays),
.estimator-v53 .estimator-field:has(#bOriginalDeliverHalf),
.estimator-v53 .estimator-field:has(#bOriginalDeliver){min-height:112px!important}
}
/* =========================================================
FIVE DEMOFILMS v59 · clean integration from v20 + v55
========================================================= */
/* 00: preserve the exact approved v20 hero shading; neutralize v58 duplicate. */
#hero .hero-media::after{content:none!important;display:none!important}
#hero .veil{display:block!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;background:linear-gradient(90deg,#000e 0,#0008 43%,#0001 76%),linear-gradient(0deg,#000b,transparent 50%)!important}
#hero .hero-copy{z-index:3!important}
#hero .brand-kicker{z-index:5!important}
/* 02 + 06: restore v55 magnetic gold selector, not a fixed field. */
#servicios .service-tabs,#flexible .flex-tabs{position:relative!important;isolation:isolate!important;overflow:hidden!important;--selector-progress:0;background:transparent!important}
#servicios .service-tabs::before,#flexible .flex-tabs::before{content:""!important;display:block!important;position:absolute!important;z-index:0!important;left:0!important;top:0!important;bottom:0!important;width:33.333333%!important;background:var(--gold2)!important;transform:translate3d(calc(var(--selector-progress)*200%),0,0)!important;pointer-events:none!important;will-change:transform!important}
#servicios .service-tabs button,#flexible .flex-tabs button,#servicios .service-tabs button.active,#flexible .flex-tabs button.active{position:relative!important;z-index:1!important;background:transparent!important}
/* Estimator: exploration base and optional capture remain separate. */
[data-service-panel="original"]>.estimator-fixed{grid-column:1/-1!important}
.original-capture-field{grid-column:1/-1!important}
.estimator-v53 .estimator-field:has(#bHalfDays),.estimator-v53 .estimator-field:has(#bCustomDeliverHalf),.estimator-v53 .estimator-field:has(#bOriginalHalfDays),.estimator-v53 .estimator-field:has(#bOriginalDeliverHalf){padding-top:28px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
.estimator-v53 .estimator-field:has(#bHalfDays) input,.estimator-v53 .estimator-field:has(#bCustomDeliverHalf) input,.estimator-v53 .estimator-field:has(#bOriginalHalfDays) input,.estimator-v53 .estimator-field:has(#bOriginalDeliverHalf) input{margin-top:auto!important}
/* 07: captions two fingers lower. */
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(2.4vh)!important}
/* 08: CTA2/media rise together; media matches copy height and sits to its right. */
#contacto .library-access{transform:translateY(-10vh)!important;grid-template-columns:minmax(0,1fr) minmax(190px,24vw)!important;column-gap:8px!important;align-items:stretch!important}
#contacto .library-access-copy{align-self:stretch!important;justify-self:end!important}
#contacto .library-video{height:100%!important;min-height:0!important;aspect-ratio:auto!important;justify-self:end!important;align-self:stretch!important}
@media (orientation:portrait),(max-width:850px){
/* Keep magnetic selectors visible. Only their vertical position changes. */
#servicios .service-tabs,#flexible .flex-tabs{top:auto!important;bottom:max(6vh,env(safe-area-inset-bottom))!important;transform:none!important}
/* 07: same requested two-finger descent in portrait. */
#experiencia .cap-track article>b,#experiencia .cap-track article>p{transform:translateY(1.6vh)!important}
/* 08: exact same footer height and internal scale as landscape. */
#contacto{padding-bottom:72px!important}
#contacto footer{height:72px!important;min-height:72px!important;max-height:72px!important;padding:0!important;grid-template-columns:1fr 1fr 1fr!important}
#contacto footer #estimatorTrigger{width:66px!important;height:66px!important;padding:5px!important;margin:0!important}
#contacto footer #estimatorTrigger img.footer-main-logo{width:59.4px!important;height:59.4px!important;max-width:59.4px!important;max-height:59.4px!important;transform:none!important}
#contacto footer .footer-center-logo{width:min(300px,30vw)!important;max-height:72px!important}
#contacto .library-access{bottom:92px!important;transform:translateY(-8vh)!important;grid-template-columns:minmax(0,1fr) 38vw!important;column-gap:5px!important;align-items:stretch!important}
#contacto .library-access-copy{width:100%!important;transform:none!important;text-align:right!important;justify-self:end!important}
#contacto .library-video{width:38vw!important;max-width:175px!important;height:100%!important;aspect-ratio:auto!important;justify-self:end!important}
}
/* =========================================================
FIVE DEMOFILMS v60 · PORTRAIT SELECTOR ANCHOR FIX
Cause: the generic v59 selector rule changed position:absolute to
position:relative after the portrait rules had already been declared.
The bottom offset therefore acted on an element in normal flow, which
could rise outside the visible sticky viewport and be clipped.
========================================================= */
@media (orientation:portrait),(max-width:850px){
#servicios .service-tabs,
#flexible .flex-tabs{
position:absolute!important;
top:auto!important;
left:6vw!important;
right:6vw!important;
bottom:max(4.5vh,calc(env(safe-area-inset-bottom) + 12px))!important;
width:auto!important;
height:34px!important;
min-height:34px!important;
margin:0!important;
transform:none!important;
z-index:60!important;
flex-shrink:0!important;
}
/* Keep the moving magnetic pill inside the selector itself. */
#servicios .service-tabs::before,
#flexible .flex-tabs::before{
top:0!important;
bottom:0!important;
height:auto!important;
}
}
/* =========================================================
FIVE DEMOFILMS v61 · MINOR FINAL GEOMETRY ADJUSTMENTS
========================================================= */
/* Estimator modal uses the full available viewport width. */
.private-estimator-panel{inset:0!important;width:100vw!important;max-width:none!important;border-radius:0!important}
.private-budget{width:100%!important;max-width:none!important;box-sizing:border-box!important}
/* 07 H: lift only the copy inside carousel videos by one finger. */
@media(orientation:landscape) and (min-width:851px){
#experiencia .cap-track article>b,
#experiencia .cap-track article>p{transform:translateY(-2.2vh)!important}
}
@media(orientation:portrait),(max-width:850px){
/* 02 and 06: selectors slightly higher so the complete border remains visible. */
#servicios .service-tabs,
#flexible .flex-tabs{bottom:max(7.2vh,calc(env(safe-area-inset-bottom) + 28px))!important}
/* 08: compact footer, matching the visual height intended for landscape. */
#contacto{padding-bottom:48px!important}
#contacto footer{height:48px!important;min-height:48px!important;max-height:48px!important;padding:0 3vw!important}
#contacto footer #estimatorTrigger{width:42px!important;height:42px!important;padding:2px!important}
#contacto footer #estimatorTrigger img.footer-main-logo{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important}
#contacto footer .footer-center-logo{max-height:26px!important}
#contacto .library-access{bottom:68px!important}
/* CTA2 video is a true square and cannot inherit a rectangular height. */
#contacto .library-video{width:min(42vw,190px)!important;height:min(42vw,190px)!important;min-width:0!important;max-width:190px!important;max-height:190px!important;aspect-ratio:1/1!important;overflow:hidden!important}
#contacto .library-video video,
#contacto .library-video-placeholder{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important}
/* Estimator: maximize both working windows across the available width. */
.private-estimator-panel{inset:0!important;width:100vw!important;max-width:none!important}
.private-budget{width:100vw!important;max-width:none!important;padding-left:2vw!important;padding-right:2vw!important}
.private-budget .estimator,
.estimator-v53,
.private-budget .estimate-result{width:100%!important;max-width:none!important;box-sizing:border-box!important}
}
/* ==================================================
FIVE DEMOFILMS v62 · corregido
(el bloque original quedó con @media anidadas sin cerrar: el fix de
servicios-visual y el del selector móvil nunca llegaban a aplicarse
porque acababan exigiendo condiciones contradictorias. Mismas reglas,
aplanadas y con las condiciones que se pretendían.)
================================================== */
@media (orientation:portrait),(max-width:850px){
#nav nav a{
border:0!important;
outline:0!important;
box-shadow:none!important;
}
}
/* v62 · 00.3 FULL WT más grande en tablets verticales */
@media (orientation:portrait) and (min-width:700px){
#hero .brand-kicker{
width:min(95vw,320px)!important;
}
}
/* v62 · 02.6 Selector móvil: objetivo táctil de 64px.
Antes quedaba anidado dentro de min-width:700px a la vez que
max-width:700px: una condición que solo se cumple a los 700px
exactos, así que en la práctica nunca se aplicaba. */
@media (max-width:700px){
#servicios .service-tabs{
min-height:64px!important;
align-items:center!important;
}
#servicios .service-tabs button{
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-height:64px!important;
line-height:1!important;
}
}
/* =========================================================
FIVE DEMOFILMS v63 · 00 VEIL EN EH + 02 MATRIZ/PH SELECTOR
========================================================= */
/* ---- 00 · El veil del vídeo hero no se nota en EH ----
En horizontal el vídeo ocupa solo la franja derecha (min(43vw,760px));
el degradado de #hero .veil oscurece la izquierda y ya es
transparente a partir del 70-76% del ancho, así que sobre el propio
vídeo no se ve nada. En vertical y en móvil el vídeo ocupa el 100%
del ancho y el mismo degradado sí cae sobre él, por eso allí se ve
bien. v58 ya había resuelto esto con un velo propio pegado al vídeo,
pero v59 lo anuló (content:none) sin sustituto. Se restaura, solo
para EH. */
@media (orientation:landscape) and (min-width:851px){
#hero .hero-media{isolation:isolate!important}
#hero .hero-media::after{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
z-index:4!important;
pointer-events:none!important;
background:linear-gradient(90deg,rgba(8,8,7,.55) 0%,rgba(8,8,7,.30) 30%,rgba(8,8,7,.08) 62%,rgba(8,8,7,0) 100%)!important;
}
}
/* ---- 02 · Matriz del selector (READY/CUSTOM/ORIGINAL) incompleta y
con letras poco legibles ----
La base solo define border-top en el contenedor y border-right en
cada botón: faltan la línea inferior y la izquierda del recuadro.
El color de texto heredado (#90897f) tiene poco contraste sobre el
fondo oscuro de la sección; se sube a beige y solo se atenúa la
pestaña inactiva. */
#servicios .service-tabs{
border-bottom:1px solid #ffffff1a!important;
border-left:1px solid #ffffff1a!important;
}
#servicios .service-tabs button{
color:var(--beige)!important;
}
#servicios .service-tabs button:not(.active){
opacity:.6!important;
}
/* ---- 02 · El contenedor de vídeo sube al redimensionar en EH ----
align-self:start (v27) fija el bloque arriba de su celda del grid;
al recalcularse la altura disponible (55vh / 100vh-260px) el vídeo
no vuelve a centrarse verticalmente. Se restaura align-self:center. */
@media (orientation:landscape){
#servicios .services-visual{
align-self:center!important;
margin-top:0!important;
}
}
/* ---- 02 · PH de lado a lado en EV y M, sin solapar el texto ----
El intento de v62 usaba un truco de márgenes que no funciona sobre
position:absolute (el left/right:6vw explícito seguía ganando) y
además solo llegaba a aplicarse en tablets ≥700px por el anidamiento
roto. Aquí se sustituyen left/right directamente y se recalculan las
posiciones del texto inferior para la nueva altura del vídeo
(100vw·9/16 = 56.25vw, antes 88vw·9/16 = 49.5vw), para que no queden
huecos ni solapes. */
@media (orientation:portrait){
#servicios .services-visual{
left:0!important;
right:0!important;
width:100vw!important;
}
#servicios .service-copy #serviceCounter{top:calc(56.25vw - 32px)!important}
#servicios .service-copy h3{top:calc(56.25vw + 10px)!important}
#servicios .service-copy strong{top:calc(56.25vw + 42px)!important}
#servicios .service-copy>p:last-child{top:calc(56.25vw + 91px)!important}
}
/* =========================================================
FIVE DEMOFILMS v64 · ronda 2 (02 a 08)
========================================================= */
/* ---- 02 · el interlineado de READY/CUSTOM/ORIGINAL se solapaba en EV ----
La causa: cada línea (contador, título, claim, párrafo) se
posicionaba con position:absolute y un desplazamiento en PÍXELES
fijo copiado de la versión de vídeo estrecho (88vw). Al pasar el
vídeo a ancho completo (v63) los saltos de línea reales del texto
ya no encajaban con esos huecos fijos y las líneas se pisaban.
Se sustituye por flujo normal: el vídeo reserva su alto real con
padding-top y el resto se apila solo, sin depender de píxeles
adivinados. */
@media (orientation:portrait){
#servicios .service-copy{
display:block!important;
padding-top:calc(56.25vw + 18px)!important;
}
#servicios .service-copy #serviceCounter,
#servicios .service-copy h3,
#servicios .service-copy strong,
#servicios .service-copy>p:last-child{
position:static!important;
left:auto!important;
top:auto!important;
width:auto!important;
margin:0 0 6px!important;
}
#servicios .service-copy>p:last-child{margin-bottom:0!important}
}
/* ---- 02/04/06 · matriz del selector completa, letra al doble y
centrada, sin recortes ----
#flexible .flex-tabs no tenía borde alguno definido (la base solo
le daba border-color, sin border-width/style, así que no se veía
nada); además su altura fija de 34px cortaba cualquier texto más
grande. Se iguala al tratamiento de #servicios .service-tabs y se
dobla el tamaño de letra, centrado en cada casilla. */
#servicios .service-tabs,
#flexible .flex-tabs{
border-top:1px solid #ffffff1a!important;
border-right:1px solid #ffffff1a!important;
border-bottom:1px solid #ffffff1a!important;
border-left:1px solid #ffffff1a!important;
height:auto!important;
min-height:58px!important;
}
#servicios .service-tabs button,
#flexible .flex-tabs button{
border-right:1px solid #ffffff1a!important;
height:auto!important;
min-height:58px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
color:var(--beige)!important;
font-size:clamp(16px,1.7vw,24px)!important;
line-height:1.15!important;
letter-spacing:.1em!important;
}
#flexible .flex-tabs button:not(.active){opacity:.6!important}
#servicios .service-tabs button:last-child,
#flexible .flex-tabs button:last-child{border-right:0!important}
@media (orientation:portrait){
#servicios .service-tabs,
#flexible .flex-tabs{min-height:62px!important}
#servicios .service-tabs button,
#flexible .flex-tabs button{
min-height:62px!important;
font-size:clamp(15px,4vw,19px)!important;
}
}
/* ---- 03 · el carrusel del laboratorio baja para no pisar el botón
de biblioteca en M (mismo ajuste que 07) ---- */
@media (orientation:portrait){
#portfolio .portfolio-window{bottom:4vh!important}
}
/* ---- 05 · el wipe solo debe arrastrar desde su manejador, no desde
todo el cuadro de vídeo (si no, hacer scroll sobre el vídeo se
vuelve imposible). El JS ya solo escucha en #wipeLine; aquí se
ajustan cursor/touch-action a juego. ---- */
#comparacion .wipe{cursor:default!important;touch-action:pan-y!important}
#comparacion #wipeLine{
cursor:ew-resize!important;
touch-action:none!important;
pointer-events:none!important;
}
#comparacion #wipeLine i{pointer-events:auto!important}
/* ---- 05 · cuadro de comparación a ancho completo en EV y M ---- */
@media (orientation:portrait){
#comparacion .wipe{left:0!important;right:0!important;width:100vw!important}
}
/* ---- 06 · flexible: el stage/safe-zone estaba muy abajo en EV/M.
Se sube el conjunto (stage + texto emergente) y se despeja hueco
arriba, sin tocar EH. ---- */
@media (orientation:portrait){
#flexible .flex-stage{
top:46vh!important;
height:38vh!important;
transform:translate(-50%,-50%)!important;
}
#flexible .flex-copy{bottom:13.5vh!important}
}
/* ---- 07 · el carrusel de experiencia baja al margen inferior en
EV/M para no pisar los datos (facts) justo encima ---- */
@media (orientation:portrait){
#experiencia .cap-window{bottom:4vh!important}
}
/* ---- 08 · footer bajo y logos grandes también en EV/M (iguala el
tratamiento que ya funcionaba en EH) ---- */
@media (orientation:portrait){
#contacto{padding-bottom:72px!important}
#contacto footer{height:72px!important;min-height:72px!important;max-height:72px!important}
#contacto footer #estimatorTrigger img.footer-main-logo{width:59.4px!important;height:59.4px!important;max-width:59.4px!important;max-height:59.4px!important}
#contacto footer .footer-center-logo{width:min(300px,30vw)!important;max-height:72px!important}
}
/* ---- 08 · CTA2 (biblioteca) se solapa con el texto en M: el vídeo
medía más que la columna que el grid le reservaba y se desbordaba
sobre el texto. Se reduce y se baja (se quita el desplazamiento
hacia arriba que tenía), dejando la columna de texto más ancha. ---- */
@media (max-width:700px){
#contacto .library-access{
transform:none!important;
grid-template-columns:minmax(0,1fr) 28vw!important;
column-gap:10px!important;
align-items:end!important;
}
#contacto .library-video{
width:min(28vw,120px)!important;
height:min(28vw,120px)!important;
max-width:120px!important;
max-height:120px!important;
}
}
/* =========================================================
FIVE DEMOFILMS v65 · ronda 3
========================================================= */
/* ---- 05 · el wipe no respondía al ratón: #wipeRange es un
heredado de la base, sin ningún JS enganchado,
pero cubre todo el cuadro con z-index:8 (por encima del manejador,
z-index:6) y sigue recibiendo los eventos aunque el manejador
tenga pointer-events:auto, porque va por delante en el apilado.
Se anula: no hace nada, así que no debe interceptar nada. ---- */
#comparacion #wipeRange{pointer-events:none!important}
/* ---- 00 · HABLEMOS desalineado en el menú desplegable (V/M) ----
#nav .nav-cta{padding:6px 7px} es una regla heredada de cuando la
CTA era una insignia suelta en la fila horizontal; tiene más
especificidad (id+clase) que el padding uniforme de las filas del
desplegable (id+2 etiquetas) y seguía ganando, dejando "HABLEMOS"
con una caja más baja que el resto de opciones. Se iguala con un
selector de mayor especificidad todavía. ---- */
@media (orientation:portrait),(max-width:850px){
#nav nav a.nav-cta{
padding:12px 10px!important;
}
}
/* ---- 02/06 · selector: se abandona el recuadro con borde (v64) y se
vuelve a segmentos lisos de lado a lado, sin marco ni divisores;
solo la pastilla dorada y el fondo del botón activo distinguen la
casilla seleccionada. Letra -25% respecto a v64. Alto, tamaño,
centrado y posición no se tocan. ---- */
#servicios .service-tabs,
#flexible .flex-tabs{
border-top:0!important;
border-right:0!important;
border-bottom:0!important;
border-left:0!important;
}
#servicios .service-tabs button,
#flexible .flex-tabs button{
border-right:0!important;
font-size:clamp(12px,1.3vw,18px)!important;
}
@media (orientation:portrait){
#servicios .service-tabs button,
#flexible .flex-tabs button{
font-size:clamp(11px,3vw,14px)!important;
}
}
/* ---- 02/06 · la pastilla dorada saltaba sin transición (cambio
discreto de --selector-progress vía MutationObserver, sin CSS que
animase el transform resultante). Se anima con un efecto de snap
marcado (ligero rebote) para que se vea el recorrido pero de forma
rápida y decidida, sin quedarse nunca a medio camino. ---- */
#servicios .service-tabs::before,
#flexible .flex-tabs::before{
transition:transform .32s cubic-bezier(.34,1.56,.64,1)!important;
}
/* ---- 05 · el cuadro del wipe se recortaba arriba/abajo en anchos
intermedios (tablets en vertical, ventanas cuasi-cuadradas): la
regla portrait fijaba max-height en vh Y (por otra, v64) el ancho a
100vw a la vez, con aspect-ratio:1/1 declarado pero sin efecto
porque ambas dimensiones quedaban ya fijadas por otras reglas (no
quedaba ningún eje "auto" que aspect-ratio pudiera resolver). Se
sustituye por un único lado de cuadrado calculado igual en ancho y
alto (min(100vw, 58vh)): a todo lo ancho en móvil (como antes) y
limitado por la altura disponible en tablets, sin deformarse nunca. ---- */
@media (orientation:portrait){
#comparacion .wipe{
left:50%!important;
right:auto!important;
width:min(100vw,58vh)!important;
height:min(100vw,58vh)!important;
max-width:none!important;
max-height:min(100vw,58vh)!important;
transform:translateX(-50%)!important;
}
}
/* ---- 05 · en V sobraba mucho espacio entre el texto y el vídeo, que
quedaba muy abajo. Se agranda el índice, el titular y el subtítulo
para ocupar ese hueco (mismo criterio de tamaño que el resto de
secciones), en vez de mover el cuadro.
v67 -- ese agrandado se pasó: a 36-52px el titular ya no cabe en
una sola línea por segmento (el HTML trae su propio entre
"realidad" y "para crear", pensado para dejarlo en 2 líneas) y
cada mitad se parte otra vez sola, saliendo 4 líneas en vez de 2
-- ese texto de más es lo que el vídeo de debajo termina
tapando. Se reduce el tamaño (probado en varios anchos de
teléfono reales para que ambas mitades quepan siempre en una
sola línea cada una) para volver a las 2 líneas que se pidieron. ---- */
@media (orientation:portrait){
#comparacion .section-label{font-size:clamp(13px,3.4vw,18px)!important}
#comparacion .comparison-copy h2{font-size:clamp(22px,7.5vw,34px)!important;line-height:.98!important}
#comparacion .comparison-copy>p:last-child{font-size:clamp(15px,3.8vw,19px)!important;line-height:1.4!important;margin-top:1.4vh!important}
}
/* ---- 06 · en V el texto emergente se solapaba por poco con el
selector inferior, y el vídeo por poco con el subtítulo superior,
dejando además mucho hueco vacío entre el vídeo y el texto
emergente. Se baja el stage y se sube el texto emergente para
repartir ese hueco y despejar ambos márgenes. ---- */
@media (orientation:portrait){
#flexible .flex-stage{
top:50vh!important;
}
#flexible .flex-copy{bottom:18vh!important}
}
/* ---- 08 · el footer seguía creciendo hacia arriba y tapando el
botón de biblioteca: además de fijar su altura (v64), #contacto
reservaba un padding-bottom del mismo alto otra vez (doble hueco),
y .library-access mantenía un "bottom" pensado para un footer mucho
más bajo. Se quita el padding redundante y se sube el anclaje de
.library-access lo suficiente para despejar el footer siempre. ---- */
@media (orientation:portrait){
#contacto{padding-bottom:0!important}
#contacto .library-access{bottom:96px!important}
}
/* =========================================================
FIVE DEMOFILMS v66 · ronda 4 (escritorio "mediano": MacBook Air,
tablets en horizontal, ~1200-1500px de ancho con menos alto que un
monitor ultrapanorámico). En 3440x1440 sobra espacio de sobra y
nunca se nota; aquí el hueco vertical real es mucho menor y varias
reglas pensadas solo en vh se quedaban cortas o directamente
invadían el contenido de al lado.
========================================================= */
/* ---- 02 · la pastilla "CUSTOM" se solapaba con el párrafo de la
derecha y con "ORIGINAL": #servicios .service-tabs usa
position:relative + "bottom:Xvh" para pegarse al vídeo, pero ese
desplazamiento hacia arriba es un porcentaje fijo de la ventana que
no tiene en cuenta cuánto ocupa realmente la columna de texto
(service-copy). Cuando esa columna es más alta que el vídeo (texto
grande en una ventana no muy alta), tirar del selector hacia arriba
un % fijo lo mete encima del párrafo. Se anula ese tirón en
horizontal: el selector se queda donde el propio grid lo coloca,
siempre debajo del contenido real, sin superponerse nunca. ---- */
@media (orientation:landscape){
#servicios .service-tabs{
top:auto!important;
bottom:auto!important;
}
}
/* ---- 07 · el carrusel de "Experiencia y capacidades" se recortaba
por abajo (y aún más si el navegador resta espacio a la ventana):
#experiencia .experience-sticky es una columna flex, pero
.cap-window nunca se declaró como elemento flexible (a diferencia
de #portfolio .portfolio-window, que sí usa flex:1;min-height:0 y
por eso el carrusel "03" nunca ha dado este problema). Sin eso,
.cap-window conservaba su "height" fijo por breakpoint y, en
cuanto la columna no tenía sitio de sobra, flexbox la encogía por
su cuenta (flex-shrink:1 por defecto) por debajo de ese alto,
mientras las tarjetas de dentro mantenían su propio alto
independiente: la tarjeta quedaba más alta que la ventana que la
recorta y el título/; inferior salía cortado. Replicando el mismo
tratamiento que ya funciona en el laboratorio "03", la ventana
pasa a ocupar el espacio restante real de la columna en vez de
perseguir un valor en vh adivinado. ---- */
#experiencia .cap-window{
flex:1!important;
min-height:0!important;
}
/* ---- 02 · aunque el selector ya no se tira hacia arriba, seguía
solapándose con el párrafo de la derecha: la fila central del grid
(vídeo + texto) es "1fr", una fracción fija de la altura que NO
crece si el contenido no cabe -- el texto, centrado en esa fila,
se desborda por arriba y por abajo cuando es más alto que el
vídeo (típico en ventanas no muy altas), invadiendo la fila del
selector de debajo. Se deja que esa fila crezca lo necesario para
el contenido real (min-content) en vez de un reparto a ciegas. ---- */
@media (orientation:landscape){
#servicios .services-sticky{
grid-template-rows:auto minmax(min-content,1fr) auto!important;
}
}
/* ---- 02 · con la fila central ya libre para crecer (arriba), en
pantallas de poca altura (MacBook Air, tablets en horizontal:
~720-900px de alto) ese crecimiento empujaba el selector "CUSTOM/
ORIGINAL/READY" por debajo del borde inferior de la sección
(.sticky tiene height:100vh + overflow:hidden, así que lo que no
cabe se recorta y desaparece). En el monitor ultrapanorámico
(1440px de alto) sobra espacio de sobra y esto nunca pasa -- por
eso se acota con el mismo rango que ya usa el carrusel de 07
(min-width:851px, max-height:1150px). Se reduce el título/subtítulo
gigante y el padding vertical de la sección lo justo para que las
tres filas (encabezado + vídeo/texto + selector) quepan siempre
dentro del alto real disponible. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#servicios .services-sticky{
padding-top:max(9vh,78px)!important;
padding-bottom:4vh!important;
}
#servicios .service-copy h3{
font-size:clamp(38px,5vw,70px)!important;
line-height:.92!important;
margin:8px 0!important;
}
#servicios .service-copy strong{
font-size:clamp(22px,2.4vw,38px)!important;
}
#servicios .service-copy>p:last-child{
margin-top:6px!important;
}
#servicios .services-head .section-label{
margin-bottom:14px!important;
}
#servicios .services-head h2{
font-size:clamp(34px,4.2vw,60px)!important;
}
#servicios .services-head .section-intro{
margin-top:10px!important;
}
}
/* ---- 07 · v63 -- la ronda anterior reducía también el propio
carrusel para que cupiera, y quedó demasiado pequeño/apretado.
Se revierte: el carrusel mantiene su tamaño de siempre
(clamp(250px,33vh,410px), la regla de más arriba en este mismo
archivo). En su lugar se libera hueco recortando más las cifras
(20+/2009/HYBRID) y la cabecera, y se sube el carrusel pegándolo
justo debajo de las cifras en vez de dejarlo flotar hacia abajo
con el margen automático.
v66 -- corrección: esa ronda también encogía el titular/cifras de
tamaño, y quedó todo "apretado". Se revierte TODO el encogido de
tamaño de letra/padding (vuelven a su tamaño de siempre) y solo se
mantienen dos empujones pequeños de posición, tal y como se pidió:
el carrusel sube "un dedo" (margin-top -1.8vh sobre su margen
normal, que es 0) y las cifras suben "medio dedo" (de su margen
base de 5vh arriba a 4vh, es decir solo -1vh de ajuste) SIN tocar
ningún tamaño de letra ni padding. Se mantiene el único cambio que
sí era un bug real: quitar el max-height:33vh que recortaba el
carrusel. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#experiencia .facts{
margin-top:4vh!important;
}
#experiencia .cap-window{
margin-top:-1.8vh!important;
margin-bottom:0!important;
height:auto!important;
max-height:none!important;
}
}
/* ---- 07 Hp v68 · el carrusel seguía "muy pequeño abajo" y sus
etiquetas se leían demasiado arriba dentro de cada tarjeta. Las
tarjetas son cuadradas y heredan la altura real de .cap-window
(fix de la ronda pasada), así que agrandar la ventana agranda
directamente las tarjetas -- dándole más aire real al texto
inferior sin tocar su tamaño. Se libera ese hueco recortando muy
levemente la cabecera (título) y un poco más el subtítulo y las
cifras, y se sube el propio carrusel "un par de dedos" adicionales
respecto al ajuste ya aprobado. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#experiencia .experience-head h2{
margin-bottom:.4vh!important;
}
#experiencia .experience-head .section-intro{
margin-top:.4vh!important;
}
#experiencia .facts{
margin-top:2.6vh!important;
}
#experiencia .cap-window{
margin-top:-5.8vh!important;
}
}
/* ---- v65 · pista visual de que 03 y 07 ahora se pueden arrastrar
a mano (cursor de "agarrar"), acompañando el nuevo JS. ---- */
#portfolio .portfolio-window,#experiencia .cap-window{cursor:grab}
#portfolio .portfolio-window.is-dragging,#experiencia .cap-window.is-dragging{cursor:grabbing}
#portfolio .portfolio-window *,#experiencia .cap-window *{user-select:none}
/* ---- v66 · 00 vídeo del hero -- en orientación vertical (portrait)
una regla de v31 lo ponía en object-fit:contain para "verlo
siempre entero", pero eso es justo lo que crea las bandas negras
a los lados que se quieren evitar. Se cambia a cover (recorta un
poco los bordes en vez de dejar banda) tal y como se ha pedido. ---- */
@media (orientation:portrait){
#hero .hero-media video,#hero .hero-media .media-empty{
object-fit:cover!important;
object-position:center center!important;
}
}
/* ---- v66 · 05 comparación -- el titular ya tiene su salto de línea
manual en el HTML ( entre "realidad" y "para crear"), pero el
tamaño de letra heredado de .scene h2 (hasta 6.6vw) es tan grande
que NI SIQUIERA la primera línea "Capturamos la realidad" cabe
entera, y se parte ella misma en dos -- entre eso y que la segunda
línea "para crear lo imposible." tampoco cabe, salen 3-4 líneas en
vez de 2, y el wipe de al lado tapa las de más abajo. Se reduce el
tamaño de letra de ESTE titular en concreto (no el de las demás
secciones, que usan la misma clase .scene h2) lo justo para que
cada una de las dos líneas quepa siempre entera -- medido
probando distintos anchos de pantalla reales, no a ojo. Solo en
horizontal/escritorio: en vertical/móvil ya hay otras reglas
propias más abajo en este archivo, ganan por ir después y no se
tocan. ---- */
@media (orientation:landscape){
#comparacion .comparison-copy h2{
font-size:clamp(26px,3vw,58px)!important;
line-height:.94!important;
}
}
/* ---- v66 · 06 flexible -- la ventana del vídeo se centraba con
top:50%+transform sobre el ALTO TOTAL del panel (100vh), sin tener
en cuenta que la cabecera y el selector de pestañas ya ocupan su
propio espacio dentro de la misma rejilla (grid-template-rows:1fr
auto). Como la ventana está fuera del flujo (position:absolute),
no "sabe" cuánto hueco le queda realmente libre -- de ahí que a
veces quede muy alta y muy separada del selector, y otras casi lo
toque, según cuánto texto tenga la cabecera en cada anchura. Se
devuelve la ventana al flujo normal de la rejilla (fila 1, la
fracción "1fr" que ya excluye la fila del selector) y se dejar
centrar ahí -- así se autoescala siempre al hueco real disponible,
sin superponerse ni dejar huecos raros. Se reduce also ligeramente
el tope de tamaño para que quepa con más aire.
v67 -- corrección: "se justifica abajo" -- al anclar la ventana
al fondo de su fila (align-self:end) quedó visualmente pegada
abajo mientras la cabecera y el texto de al lado (mismos vecinos
de fila, a los lados, no encima/debajo) seguían centrados como
siempre -- ahí es donde chirriaba, tres elementos en la misma
fila con anclajes distintos. Se revierte a centrado (align-self:
center), igual que sus vecinos laterales, y el propio
crop-window vuelve a centrarse dentro de su caja. Para seguir
acercándolo al selector sin romper ese centrado compartido, en
vez de mover LA VENTANA se encoge la propia cabecera de texto
(que es lo que más infla la fila 1 con su título de 3 líneas) --
así la fila entera es más baja y, centrado dentro de una fila más
baja, el vídeo queda de forma natural más cerca del selector. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#flexible .flex-stage{
position:relative!important;
left:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
transform:none!important;
margin:0 auto!important;
align-self:center!important;
justify-self:center!important;
width:min(30vw,40vh,420px)!important;
height:min(30vw,40vh,420px)!important;
max-width:100%!important;
max-height:100%!important;
--plate:min(30vw,40vh,420px)!important;
}
#flexible .flexible-head{
align-self:center!important;
}
#flexible .flexible-head h2{
font-size:clamp(30px,3.6vw,58px)!important;
line-height:.96!important;
}
#flexible .flexible-head .campaign-applications{
display:none!important;
}
#flexible .flexible-head .section-intro{
margin-top:1vh!important;
}
}
/* ---- v66 · Estimador privado -- dos cosas:
1) La "ventana desplazable" (el formulario, .estimator-v53) vivía
en una rejilla de 2 columnas (minmax(0,1.5fr) minmax(290px,.72fr))
compartida con la tarjeta de precio de al lado -- eso la deja
ocupando solo ~2/3 del ancho real, y en pantallas anchas sobra
muchísimo negro sin usar a la derecha y debajo. Los intentos
anteriores tocaban el propio .estimator-v53 pero la regla que de
verdad manda su ancho es esta columna del grid del padre
(.private-budget), así que sin tocarla no había manera de que
creciera. Se pasa a una sola columna a todo lo ancho -- el
formulario ocupa de lado a lado (conservando su propio scroll
interno, overflow-y ya heredado) y la tarjeta de precio baja
debajo en vez de ir al lado.
2) Había dos cabeceras (la barra superior "PRIVATE · ESTIMADOR" y
el título "Cada proyecto..." debajo) dejando una franja de negro
desaprovechada entre ambas. Se oculta el texto de la barra
superior (se deja solo el botón CERRAR, anclado a la derecha) y
se sube/ajusta el padding para que el título quede donde estaba
esa franja vacía. El subtítulo se sube un punto de tamaño de
letra. ---- */
@media (orientation:landscape){
.private-estimator-bar p{
display:none!important;
}
.private-estimator-bar{
justify-content:flex-end!important;
}
.private-budget{
padding-top:clamp(14px,2.4vh,30px)!important;
grid-template-columns:1fr!important;
}
.private-budget .budget-head{
grid-column:1!important;
margin-bottom:2.4vh!important;
}
.private-budget .budget-head>p:last-child{
font-size:clamp(14px,1.05vw,18px)!important;
line-height:1.5!important;
}
.estimator-v53{
grid-column:1!important;
width:100%!important;
max-width:none!important;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
}
.estimator-v53 .estimator-branch{
grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
}
.private-budget .estimate-result{
grid-column:1!important;
position:relative!important;
top:auto!important;
width:100%!important;
max-width:640px!important;
margin:28px 0 0!important;
}
}
/* ---- v67 · 06 flexible en V (portátil/móvil) -- la ventana del
vídeo sigue solapando el texto de la cabecera en teléfonos bajos
(probado hasta 740px de alto). Causa: la POSICIÓN de la ventana
escala con la altura de pantalla (top en vh), pero el ALTO del
texto de la cabecera es casi fijo en px (el tamaño de letra de
estas reglas no está en vh) -- en una pantalla baja, ese texto
"fijo" ya no cabe en el hueco (que sí se ha encogido) antes de
llegar a la ventana. Se encoge el propio texto (título más
pequeño, se oculta la línea de aplicaciones -- SOCIAL · PAID
MEDIA..., que es prescindible aquí y ya estorbaba también en Hp
esta misma ronda -- y el subtítulo más compacto) para que quepa
siempre dentro del hueco real disponible antes de la ventana. ---- */
@media (orientation:portrait) and (max-height:740px){
#flexible .flexible-head h2{
font-size:21px!important;
line-height:1.05!important;
margin:4px 0!important;
}
#flexible .flexible-head .campaign-applications{
display:none!important;
}
#flexible .flexible-head .section-intro{
font-size:12px!important;
line-height:1.25!important;
margin:4px 0 0!important;
}
#flexible .flexible-head .section-label{
margin-bottom:2px!important;
}
}
/* ---- v67 · 05 comparación en V -- el mismo patrón que el 06 de
arriba: el vídeo (.wipe) está con position:absolute y un top en
vh fijo, así que no "sabe" cuánto ocupa el texto de encima -- en
teléfonos donde el subtítulo es algo más largo, el top fijo cae
por encima de donde el texto realmente termina y el vídeo lo
tapa. En vez de intentar adivinar otro número fijo que tampoco se
adaptaría, se saca el vídeo de position:absolute y se le deja
fluir en el documento justo debajo del texto (con el margen
propio del padding lateral de .comparison-sticky, que ya aplica
por herencia) -- así se "escala"/reposiciona solo según lo que
ocupe el texto real, sin poder pisarlo nunca. Aplica a todo V, no
solo a los teléfonos más bajos, para que sea robusto también si
el texto crece por cualquier otro motivo en el futuro. ---- */
@media (orientation:portrait){
#comparacion .wipe{
position:relative!important;
top:auto!important;
bottom:auto!important;
left:auto!important;
right:auto!important;
width:auto!important;
max-width:none!important;
height:auto!important;
max-height:none!important;
aspect-ratio:1/1!important;
margin:3vh 0 0!important;
transform:none!important;
}
/* Una regla más antigua ("índice fijo, título+subtítulo bajan tres
dedos") empuja el titular y el subtítulo hacia abajo con
transform:translateY(4vh) -- un transform NO mueve el flujo del
documento, solo el dibujo, así que .wipe (ahora en flujo normal)
no se enteraba de ese empujón y arrancaba justo donde el texto
habría estado SIN el empujón, es decir, encima de donde el texto
realmente se ve. Se sustituye ese transform por un margin-top
real en el titular (que si mueve el flujo, y con él arrastra al
subtítulo y al vídeo de debajo) para lograr el mismo efecto
visual sin ese desfase. */
#comparacion .comparison-copy h2{
transform:none!important;
margin-top:4vh!important;
}
#comparacion .comparison-copy>p:last-child{
transform:none!important;
}
}
/* =========================================================
FIVE DEMOFILMS v65 · ROUND 5 CORRECTIONS
========================================================= */
/* ---- 07 Hp · las etiquetas de las tarjetas del carrusel quedaban
"muy en medio" y se leían mal. Causa real: .cap-window es flex:1
con min-height:0 (para no desbordar la columna), así que en
ventanas Hp de poca altura real (ej. 1366x768 con cabecera+cifras
ya colocadas) el hueco que le queda es MENOR que el alto fijo que
el bucket Hp le exige a cada tarjeta (clamp(...,33vh,...)). La
tarjeta no se entera de que la ventana es más baja, se desborda
por abajo, .cap-window la recorta (overflow:hidden) y la etiqueta
-anclada al fondo de la propia tarjeta, no de la ventana visible-
queda por encima del borde real, flotando en el "medio" en vez de
pegada abajo del todo.
Arreglo de raíz: la tarjeta deja de perseguir un vh adivinado y
pasa a heredar el alto REAL que .cap-window termine teniendo
(height:100%, con el ancho derivado por aspect-ratio). Así nunca
puede haber desajuste ni recorte, sea cual sea la altura real
disponible en cada pantalla Hp. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#experiencia .cap-window{
display:flex!important;
}
#experiencia .cap-track{
flex-shrink:0!important;
}
#experiencia .cap-track article{
height:100%!important;
width:auto!important;
min-width:0!important;
aspect-ratio:1/1!important;
}
}
/* ---- 07 V · bajar el carrusel completo dos dedos. El margen
inferior de partida (bottom:4vh) ya era ajustado, así que un
empuje de 4vh completo lo dejaba pegado al borde real sin margen
de seguridad; se usa 2vh de empuje, que deja ~2vh de aire y baja
el carrusel de forma perceptible respecto a las cifras de arriba.
Se excluyen los móviles muy bajos (<600px de alto), donde ya no
sobra hueco vertical y el empuje solaparía con las cifras. ---- */
@media (orientation:portrait) and (min-height:600px){
#experiencia .cap-window{
transform:translateY(2vh)!important;
}
}
/* ---- Estimador V (task #22) · misma ventana estrecha que en H,
pero en vertical el problema es MÁS sutil: .private-budget SÍ
pasa a display:block en la mayoría de casos (fix ya existente),
pero un breakpoint posterior lo vuelve a poner en display:grid
(para el layout apilado de 3 filas: cabecera/formulario/resultado)
sin redefinir grid-template-columns -- así que hereda sin querer
las 2 columnas fijas de escritorio (1.5fr + .72fr de ancho
mínimo 290px) definidas más arriba en el archivo sin scope de
media query. Como ni el formulario ni el resultado declaran su
propia columna, ambos terminan cayendo en la columna 1 y la
columna 2 entera queda vacía: la "ventana estrecha con mucho
negro a la derecha" que describe el usuario. Se fuerza una sola
columna en este mismo breakpoint. ---- */
@media (orientation:portrait),(max-width:850px){
.private-budget{
grid-template-columns:1fr!important;
}
}
/* ---- 06 V v68 · el vídeo (safe zone) seguía pisando muy ligeramente
el texto superior en teléfonos de altura normal (>740px) -- solo
9px de margen real en algunos anchos. Se baja un poco más. Se deja
fuera el bucket de teléfonos muy bajos (<=740px), que ya tiene su
propio ajuste y donde bajarlo más chocaría con el texto de abajo. ---- */
@media (orientation:portrait) and (min-height:741px){
#flexible .flex-stage{
top:52.5vh!important;
}
}
/* ---- 07 V v68 · "HYBRID" (tercera cifra) tocaba directamente su
descripción, sin el margen que sí tienen "20+" y "2009". Causa: el
de cada cifra tiene un ancho FIJO (72px, pensado para
"20+"/"2009"), con overflow:visible -- "HYBRID" no cabe en 72px a
ese tamaño de letra (necesita ~93px) y su texto se desborda
visualmente por encima del hueco (gap) reservado, comiéndose el
margen. Se cambia a un ancho mínimo (en vez de fijo) para que cada
cifra ocupe el espacio que su propio texto necesita y el gap
quede siempre libre, sin mover la alineación de las otras dos. ---- */
@media (orientation:portrait),(max-width:850px){
#experiencia .facts strong{
min-width:98px!important;
flex-shrink:0!important;
}
}
/* ---- Estimador V v68 · mismo ajuste que ya se hizo en H: el texto
"PRIVATE · ESTIMADOR" de la barra superior es redundante (el
título "Cada proyecto..." ya lo dice todo) y deja una franja negra
desaprovechada encima. Se oculta (queda solo el botón CERRAR) y se
encoge la barra, ganando ese hueco para el propio estimador. ---- */
@media (orientation:portrait),(max-width:850px){
.private-estimator-bar p{
display:none!important;
}
.private-estimator-bar{
height:40px!important;
justify-content:flex-end!important;
}
.private-budget{
height:calc(100svh - 40px)!important;
}
}
/* =========================================================
FIVE DEMOFILMS v67 · ROUND 7 CORRECTIONS
========================================================= */
/* ---- Estimador V · queda una franja negra grande encima del
título/formulario incluso después de ocultar la barra "PRIVATE ·
ESTIMADOR" (fix de la ronda anterior). Causa real: NO es la barra
ni ninguna regla de este archivo -- es una regla de especificidad
MUY alta que vive directamente en index.html, con selector de ID
(#presupuesto{padding-top:11vh!important}), pensada para "bajar"
el contenido cuando la barra ocupaba más alto. Al ser un ID con
!important, ninguna clase (.private-budget) del propio archivo de
ajustes puede ganarle por specificity, por eso los intentos
anteriores (que sí tocaban el padding-top vía .private-budget) no
se notaban: ese padding de 11vh (unos 93px en un móvil típico)
seguía ahí debajo, generando el hueco. Se neutraliza iguialando la
especificidad (mismo selector de ID, combinado con la clase para
quedar por encima igualmente) y bajando el valor a algo mínimo, de
forma que el título y el formulario suban y aprovechen ese
espacio. No se toca index.html en ningún caso. ---- */
@media (orientation:portrait),(max-width:850px){
#presupuesto.private-budget{
padding-top:10px!important;
}
}
/* =========================================================
FIVE DEMOFILMS v62 · ajustes sobre la base v61 (00 y 08)
========================================================= */
/* ---- 00 v62 · el logo del hero (FULL WT) se recorta por arriba en
pantallas medianas (portátil/tablet en horizontal): su tamaño en la
v61 original depende del ANCHO (width en vw), pero el hueco
vertical donde tiene que caber depende del ALTO real de la ventana.
En una ventana ancha pero no muy alta, ese ancho genera una imagen
más alta de lo que cabe entre el nav y el título -- y como cada
sección recorta lo que sobra (overflow:clip en todas las .scene),
la parte de arriba del logo desaparece.
Arreglo: en vez de depender del ancho, el logo pasa a depender del
ALTO real (clamp en vh) y se ancla por arriba con un margen fijo
bajo el nav -- así se hace más pequeño exactamente a la vez que se
achica la ventana (lo pedido) y nunca puede sobrepasar hacia arriba
el hueco que se le da, sea cual sea su proporción real.
v63 · SIN límite de alto (sin max-height): la primera versión de
esta regla solo cubría hasta 1150px de alto y a partir de ahí caía
de golpe en la fórmula antigua (basada en ancho, con otro mecanismo
totalmente distinto) -- eso producía un salto brusco y visible del
logo justo al cruzar los 1150px (confirmado: de 582px de ancho a
323px de un pixel a otro). Se quita ese tope por completo y esta
misma fórmula por altura pasa a regir TODO el rango de escritorio
(cualquier alto), con un techo más alto para que en monitores
grandes también pueda crecer en vez de quedarse plano -- así ya no
hay ningún punto de la ventana donde el logo cambie de mecanismo ni
salte de tamaño. ---- */
@media (orientation:landscape) and (min-width:851px){
#hero .brand-kicker{
position:absolute!important;
top:clamp(40px,6.5vh,110px)!important;
bottom:auto!important;
left:5vw!important;
right:auto!important;
width:auto!important;
max-width:40vw!important;
height:clamp(30px,8.5vh,150px)!important;
max-height:none!important;
overflow:visible!important;
margin:0!important;
transform:none!important;
}
#hero .brand-kicker img{
display:block!important;
width:auto!important;
height:100%!important;
max-width:100%!important;
object-fit:contain!important;
object-position:left top!important;
}
}
/* ---- 08 v62 · CTA2 (biblioteca) baja un poco más dentro de la
sección -- había margen de sobra hasta el footer en cualquier
tamaño de escritorio (portátil o monitor grande), así que se sube
el valor de "bottom" (más bajo = más cerca del pie). Solo en
horizontal/escritorio (V ya está bien y no se toca). ---- */
@media (orientation:landscape) and (min-width:851px){
#contacto .library-access{
bottom:56px!important;
}
}
/* ---- 08 v62 · acercar el texto al vídeo/imagen de la derecha: el
hueco entre ambos depende del ANCHO, no del alto (medido igual en
1920x1080 que en 1920x1200) -- crece sin control en monitores
anchos porque el desplazamiento existente del texto (translateX en
10vw) es un porcentaje fijo que no compensa que la columna del
vídeo también se mueve hacia la derecha con el propio ancho. Se
mide el hueco real en un barrido de anchos (1450 a 3440px) y se
ajusta el desplazamiento del texto con una fórmula lineal para que
el hueco quede compacto y estable (~24px) en vez de crecer sin
límite. Por debajo de 1450px de ancho NO se toca -- ahí, en la
propia v61 original, el texto y el vídeo ya están igual de cerca o
incluso solapados, y acercarlos más lo empeoraría. ---- */
@media (orientation:landscape) and (min-width:1450px){
#contacto .library-access-copy{
transform:translateX(max(150px,calc(28vw - 286px)))!important;
}
}
/* =========================================================
FIVE DEMOFILMS v64 · titular hero, limpieza de 02/03/06,
y unificación tipográfica usando 06 como referencia
========================================================= */
/* ---- 00 · el titular del hero está demasiado grande. Se reduce
un 30% en horizontal/escritorio respecto al tamaño que ya tenía
(clamp(58px,7.7vw,124px) definido en el propio index.html) --
se multiplican los tres valores del clamp por 0.7, manteniendo
exactamente la misma curva/proporción de escalado, solo un 30%
más pequeña en cualquier ventana. Sigue quedando claramente más
grande que el tamaño uniforme de título que se aplica al resto de
secciones más abajo (buscado). En V no se toca. ---- */
@media (orientation:landscape){
#hero .hero-copy h1{
font-size:clamp(41px,5.4vw,87px)!important;
}
}
/* ---- 02 · se quita el contador "01 / 03" (#serviceCounter): no
aporta nada y en vertical ocupa espacio. Y se une "Create it." en
la misma línea que "Brand it." (se oculta el del propio
HTML por CSS, sin tocar index.html) -- el titular en dos líneas
dejaba menos alto disponible para el selector (READY/CUSTOM/
ORIGINAL) en ventana pequeña, cortándolo; con el titular más
compacto en una sola línea, el selector ya no se corta. ---- */
#serviceCounter{display:none!important}
#servicios .services-head h2 br{display:none!important}
#servicios .services-head h2 em::before{content:" "!important}
/* ---- 03 · el botón "BIBLIOTECA EN CONSTRUCCIÓN" vivía debajo del
párrafo de introducción, ocupando una línea entera de alto. Se
coloca a la derecha del propio párrafo (mismo bloque, en fila) en
vez de debajo, liberando ese alto para el carrusel de motion
cards, que es lo que estaba quedando apretado. Solo en horizontal/
escritorio. ---- */
@media (orientation:landscape){
#portfolio .portfolio-head{
display:flex!important;
flex-wrap:wrap!important;
align-items:flex-end!important;
column-gap:24px!important;
}
#portfolio .portfolio-head .section-label,
#portfolio .portfolio-head h2{
flex:0 0 100%!important;
}
#portfolio .portfolio-head .section-intro{
flex:1 1 auto!important;
min-width:240px!important;
margin:0!important;
}
#portfolio .portfolio-library-link{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
flex:0 0 auto!important;
margin:0!important;
transform:none!important;
white-space:nowrap!important;
}
}
/* ---- 06 · la ventana de vídeo (flex-stage) se quedaba pequeña
(tope de 40vh) mientras sobraba mucho margen libre en su propia
fila del grid (medido: a 1366x768 la fila mide ~531px de alto y
el vídeo solo usaba 307px, dejando >220px sin usar). Se sube el
tope de tamaño manteniendo el mismo mecanismo (min de vw/vh/px),
dejando siempre un margen de seguridad dentro de la fila. Se
quita el contador "01 / 03" (#flexCounter, mismo caso que en 02) y
el texto informativo dentro del propio cuadro de vídeo (.flex-ph,
"FLEXIBLE MASTER" + URL) que no aporta nada visualmente -- queda
solo el cuadro sombreado, tal y como se pidió. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#flexible .flex-stage{
width:min(34vw,60vh,560px)!important;
height:min(34vw,60vh,560px)!important;
--plate:min(34vw,60vh,560px)!important;
}
}
#flexCounter{display:none!important}
#flexible .flex-ph{display:none!important}
/* ---- Unificación tipográfica · 06 es el equilibrio de referencia
(a juicio del usuario) y se aplica su mismo tamaño de índice
(.section-label), título (h2) y texto emergente del selector
(el h3 que cambia de contenido al clickar una pestaña: nombre del
servicio/paso/formato) al resto de secciones de escritorio, que
estaban notablemente más grandes entre sí (ej. el h2 de 04 llegaba
a 88px cuando 06 usa 58px como techo). Solo en horizontal --
fórmulas fijadas para que coincidan con los valores reales medidos
de 06 en varios anchos (1366 a 1920px). Excepciones señaladas por
el usuario, sin tocar aquí: 00 (titular del hero, más grande) y 08
(CTA1, más grande). Las etiquetas 1:1/16:9/9:16 de 06 no forman
parte de este grupo y no se tocan.
v65 · el usuario pide revertir SOLO el texto emergente del
selector de 02 y 04 (#serviceName/#methodName): en tamaño grande
quedaba bien. Se quitan del grupo -- el índice y el título (arriba)
siguen unificados, tal y como se pidió mantener. Al quitarlos,
#serviceName vuelve a la regla ya existente más abajo en este mismo
archivo (Hp: clamp(38px,5vw,70px); resto: clamp(48px,5.7vw,92px)) y
#methodName vuelve a la base de index.html (clamp(62px,8vw,130px)),
que es justo el tamaño "grande" que se pedía recuperar. ---- */
@media (orientation:landscape){
#servicios .section-label,
#portfolio .section-label,
#metodo .section-label,
#experiencia .section-label{
font-size:clamp(15px,1.23vw,21px)!important;
}
#servicios .services-head h2,
#portfolio .portfolio-head h2,
#metodo .method-title h2,
#comparacion .comparison-copy h2,
#experiencia .experience-head h2{
font-size:clamp(28px,3.6vw,58px)!important;
}
}
/* =========================================================
FIVE DEMOFILMS v65 · logo del hero grande sobre el titular,
espacio para el selector de 02 en ventanas bajas, carrusel de 03
un 10% mayor, botón de biblioteca centrado, limpieza de 06,
reordenación de 07 (con año corregido) y CTA1 de 08 más compacto.
========================================================= */
/* ---- 00 · el logo "5" quedaba anclado arriba, pequeño, con mucho
hueco vacío entre él y el titular. Se ancla por abajo (bottom) en
vez de por arriba, calculado para que su borde inferior quede justo
sobre el borde superior del titular (H1), sea cual sea el tamaño de
ventana -- la fórmula replica cómo se calcula la posición real del
titular (que también se ancla por abajo, a 8vh del fondo): se suma
8vh + la altura real que ocupa el propio H1 + el bloque de texto
bajo él (intro + enlace "DESCUBRE"), aproximada con una recta
ajustada a la propia curva de escalado del titular (mismo clamp).
El tamaño del logo también pasa a escalar con el titular (proporción
parecida a como se ve en vertical, donde el logo es notablemente
grande respecto al título) en vez de un tope fijo pequeño.
Salvaguarda: en ventanas muy bajas (menos de ~650px de alto) el
propio titular ya se acerca al nav, y el logo "grande" no cabría
entero encima de él sin solaparse con el nav. En vez de mover el
logo (lo que lo despegaría del titular o lo metería debajo del
nav), se dejafijo el punto de anclaje (pegado al borde superior del
titular, con "bottom" sin cambios) y es la propia ALTURA la que se
limita al hueco real disponible entre el nav y el titular (con
min()) -- así el logo simplemente se hace un poco más pequeño en
esos casos extremos, pero se mantiene siempre pegado al titular y
nunca invade el nav.
v65.2 · seguía viéndose pequeño y demasiado pegado al titular. Se
dobla el tamaño objetivo (mismo mecanismo, clamp × 2) y se añade un
margen extra de separación (28px más, "un dedo") entre el borde
inferior del logo y el borde superior del titular -- se suma al
"bottom" y se resta del hueco disponible de la salvaguarda por
igual, para que ambos seg an consistentes entre sí. ---- */
@media (orientation:landscape){
#hero .brand-kicker{
position:absolute!important;
top:auto!important;
bottom:calc(8vh + 191px + (2.775 * clamp(41px,5.4vw,87px)))!important;
left:5vw!important;
right:auto!important;
width:auto!important;
max-width:50vw!important;
height:max(40px,min(
clamp(144px,18.9vw,304px),
calc(92vh - (2.775 * clamp(41px,5.4vw,87px)) - 274.88px)
))!important;
max-height:none!important;
overflow:visible!important;
margin:0!important;
transform:none!important;
}
#hero .brand-kicker img{
display:block!important;
width:auto!important;
height:100%!important;
max-width:100%!important;
object-fit:contain!important;
object-position:left bottom!important;
}
}
/* ---- 02 · con el texto emergente del selector (#serviceName) de
vuelta a su tamaño grande, en ventanas bajas de escritorio (menos
de ~700px de alto: portátiles con la barra del navegador visible,
no pantalla completa) ese bloque de texto vuelve a ser más alto que
el hueco disponible en la fila central del grid y empuja el
selector inferior (READY/CUSTOM/ORIGINAL) fuera del área visible.
En vez de volver a encoger el propio nombre grande (lo que se pidió
evitar), se recorta el resto de elementos que lo acompañan --
margen superior de la sección, subtítulo en cursiva, párrafo y
separaciones entre ellos -- liberando sitio suficiente para que el
selector quepa siempre dentro de los 100vh reales de la sección. ---- */
@media (orientation:landscape) and (min-width:851px) and (max-height:700px){
#servicios .services-sticky{
padding-top:max(5.5vh,46px)!important;
padding-bottom:2vh!important;
}
#servicios .services-head .section-label{
margin-bottom:6px!important;
}
#servicios .services-head .section-intro{
margin-top:4px!important;
}
#servicios .service-copy h3{
margin:4px 0!important;
}
#servicios .service-copy strong{
font-size:clamp(17px,1.9vw,28px)!important;
}
#servicios .service-copy>p:last-child{
margin-top:2px!important;
}
#servicios .service-tabs{
bottom:1vh!important;
}
}
/* ---- 03 · el carrusel de tarjetas tenía margen de sobra respecto a
la columna disponible; se agranda un 10% (mismo mecanismo, solo se
multiplica el valor por 1.1) tanto en el rango normal de escritorio
como en el de ventanas bajas, donde ya existía un tope ajustado
para que cupiera sin recortarse -- ese tope también sube un 10%
manteniendo el mismo margen de seguridad relativo. ---- */
#portfolio .portfolio-track article{
width:min(46.2vw,660px)!important;
}
@media (orientation:landscape) and (min-width:851px) and (max-height:1150px){
#portfolio .portfolio-window{
height:clamp(286px,39.6vh,473px)!important;
max-height:39.6vh!important;
}
#portfolio .portfolio-track article{
width:clamp(286px,39.6vh,473px)!important;
min-width:clamp(286px,39.6vh,473px)!important;
height:clamp(286px,39.6vh,473px)!important;
}
}
/* ---- 03 · el botón "BIBLIOTECA EN CONSTRUCCIÓN" (colocado la ronda
pasada a la derecha del párrafo de introducción) se alineaba con la
ÚLTIMA línea del párrafo (align-items:flex-end), quedando muy bajo
respecto al bloque de texto completo. Se centra verticalmente
respecto a ese mismo bloque.
v65.1 · al anular el transform del párrafo para centrarlo con el
botón, se destapó un problema de fondo ya existente: el título (h2)
y el párrafo se separaban entre sí SOLO por transforms visuales de
una ronda muy antigua (v25), distintos y sin relación entre ellos
por breakpoint -- no por espaciado real en el propio flujo. Al
quedar el párrafo sin su transform, el título (que sí seguía
desplazándose hacia abajo con el suyo) pasó a solaparse con él.
Se anulan TODOS esos transforms sueltos (índice, título, párrafo y
botón) y se reconstruye el espacio entre ellos con márgenes reales
-- así el hueco es siempre consistente y nunca se solapan, sea cual
sea el breakpoint activo. ---- */
@media (orientation:landscape){
#portfolio .portfolio-head .section-label,
#portfolio .portfolio-head h2,
#portfolio .portfolio-head .section-intro,
#portfolio .portfolio-library-link{
transform:none!important;
}
#portfolio .portfolio-head{
align-items:center!important;
}
#portfolio .portfolio-head .section-label{
margin:0 0 12px!important;
}
#portfolio .portfolio-head h2{
margin:0 0 22px!important;
}
#portfolio .portfolio-head .section-intro,
#portfolio .portfolio-library-link{
margin:0!important;
}
#portfolio .portfolio-window{
transform:none!important;
margin-top:4vh!important;
}
}
/* ---- 03 · se añade una flechita al botón de la biblioteca para que
se lea como un enlace.
v68.1 · ahora que el botón vuelve a estar activo (enlaza a la
biblioteca ya actualizada), se cambia la flecha horizontal (→) por
una diagonal apuntando arriba-derecha (↗), que transmite mejor la
sensación de salir hacia otro sitio en vez de solo seguir leyendo. ---- */
#portfolio .portfolio-library-link::after{
content:"↗";
margin-left:8px;
display:inline-block;
}
/* ---- 06 · se elimina el texto "PRODUCTO · ACCIÓN · ZONAS SEGURAS"
de dentro del vídeo en todos los modos (horizontal y vertical) --
no aporta nada visualmente, tal y como ya se hizo con el texto
"FLEXIBLE MASTER" del propio cuadro. Sin scope de orientación para
que desaparezca siempre.
v68.1 · corrección: la regla original usaba display:none, que
ocultaba TODO el elemento -- incluido el cuadro/marco que delimita
la zona segura (border o vignette de box-shadow, según el modo),
no solo su texto. Se cambia a color:transparent, que apaga
únicamente el texto y conserva el cuadro intacto. ---- */
#flexible .safe-zone{color:transparent!important}
/* ---- 07 · se sube el conjunto de bloques (cabecera + cifras +
carrusel) un poco más en horizontal para dejar más aire libre bajo
el carrusel. Las tres cifras (20+/2012/HYBRID) se reducen de tamaño.
v65.1 · se probó alinearlas por la base (baseline) con su texto
descriptivo, pero visualmente quedaban descentradas hacia arriba
(la cifra, mucho más grande, "flota" por encima aunque su línea
base coincida). Se revierte a centrado vertical (el propio por
defecto de esta franja, .facts div{align-items:center} en
index.html), que es lo que de verdad las alinea con el bloque de
texto de al lado. ---- */
@media (orientation:landscape){
#experiencia .experience-head,
#experiencia .facts,
#experiencia .cap-window{
transform:translateY(-3.5vh)!important;
}
#experiencia .facts strong{
font-size:clamp(20px,2.3vw,38px)!important;
}
#experiencia .facts div{
align-items:center!important;
}
}
/* ---- 07 · el texto dentro de cada tarjeta del carrusel (nombre en
mayúsculas + descripción) dejaba demasiado margen respecto al
borde inferior de la propia tarjeta. Se reduce ese hueco ("un
dedo" menos) bajando el texto hacia el borde. ---- */
@media (orientation:landscape){
#experiencia .cap-track article{
padding-bottom:4px!important;
}
}
/* ---- 08 · reescritura completa a partir de las instrucciones
detalladas del usuario (sustituye el ajuste "-10%" de la ronda
anterior, que se quedaba corto):
· "08 EMPECEMOS" (índice) se cortaba/quedaba con poco margen. Se
baja el padding superior de toda la sección al mismo valor que usa
07 (15vh, #experiencia .experience-sticky{padding-top:15vh}).
· CTA1 "Tell us about your product." pasa a usar EXACTAMENTE la
misma fórmula que el titular del hero (00, "Real product.
Impossible motion."): mismo clamp de tamaño y mismo interlineado
(.86, más apretado que el 1 que tenía).
· Su párrafo ("Un producto, un briefing...") pasa a usar
exactamente la misma fórmula que el párrafo del hero (00,
"Creatividades de producto..."): la categoría 1 de subtextos ya
definida más arriba en este archivo (clamp(19px,1.55vw,25px),
line-height 1.5). Se juntan título y párrafo (menos margen
superior) y se sube el botón acercándolo al párrafo (menos margen
inferior).
Con el CTA1 mucho más compacto (antes ocupaba ~230px de alto a
1366×768, ahora ~127px) y los huecos más ajustados, se libera
sitio de sobra para el padding-top mayor sin que nada se corte por
abajo -- comprobado con el pie de página, que antes de este cambio
se salía por debajo del viewport a alturas normales de escritorio.
· El bloque de la derecha (biblioteca: título + texto + botón +
vídeo) baja "dos dedos" (36px) respecto a su posición actual, sin
tocar el tamaño de la propia sección (100vh) ni el del pie. ---- */
@media (orientation:landscape){
#contacto{
padding-top:15vh!important;
}
#contacto .contact-copy{
min-height:0!important;
justify-content:flex-start!important;
}
/* ---- fix: al llegar al final del scroll (footer visible), la
sección se desplaza hacia arriba lo que le sobra de alto (112vh
frente a 100vh de viewport), y en ese punto el índice "08
EMPECEMOS" quedaba parcialmente tapado por la barra de navegación
fija. Se añade un empujón fijo en px (no proporcional al
viewport, porque el hueco que tapa el nav es de alto fijo) que
baja todo el bloque índice+CTA1 lo suficiente para que quede
siempre visible bajo el nav en la posición final de scroll. No
afecta a biblioteca (posicionada por "bottom") ni al pie (anclado
al fondo por flex). ---- */
#contacto{
padding-top:calc(15vh + 42px)!important;
}
#contacto .contact-copy h2{
font-size:clamp(41px,5.4vw,87px)!important;
line-height:.86!important;
margin:0!important;
}
#contacto .contact-copy>p:not(.section-label){
font-family:Manrope,FiveSans,Arial,sans-serif!important;
font-size:clamp(19px,1.55vw,25px)!important;
line-height:1.5!important;
font-weight:300!important;
margin:10px 0 14px!important;
}
#contacto .library-access{
bottom:20px!important;
}
}
/* ---- v68 · correcciones exclusivas de la versión móvil (V), más el
ajuste de escritorio que quedó pendiente en 08. ----
06 FLEXIBLE (V, pantallas bajas ≤740px de alto): el índice "06
CREADO PARA CAMPAÑAS" tiene un translateY(2vh) que lo empuja hacia
abajo (pensado para pantallas altas, donde sobra aire). En
pantallas bajas esa misma regla de altura reduce el margen entre
índice y titular a la vez que encoge el titular -- la suma de
ambos efectos hace que el titular arranque ANTES de que termine el
índice (visualmente se pisan). Se compensa dándole al titular un
margen superior que crece con el mismo 2vh que empuja al índice,
más un colchón fijo -- así quedan siempre separados,
proporcionalmente a la altura real de cada teléfono. ---- */
@media (orientation:portrait) and (max-height:740px){
#flexible .flexible-head h2{
margin-top:calc(8px + 2.2vh)!important;
}
}
/* 06 FLEXIBLE (V, todas las alturas): texto del selector (nombre +
descripción) baja medio dedo para separarlo del vídeo, y el propio
vídeo sube medio dedo -- hay aire de sobra entre el subtítulo y el
vídeo para poder hacerlo. Ambos ajustes usan la unidad de vh ya
establecida (1 dedo ≈ 1.8vh) sobre los valores actuales (52.5vh el
vídeo, 18vh el texto), no valores nuevos inventados. ---- */
@media (orientation:portrait){
#flexible .flex-stage{
top:51.6vh!important;
}
#flexible .flex-copy{
bottom:17.1vh!important;
}
}
/* 08 CONTACTO (V): CTA2 (biblioteca) se pisa con CTA1 (Tell us about
your product). Se aplica la misma solución que en escritorio:
apilar CTA1 más compacto (menos margen entre titular, subtexto y
botón) para liberar altura, y bajar CTA2 "un par de dedos" (2×1.8vh
≈ 3.6vh) sin tocar el pie. ---- */
@media (orientation:portrait){
#contacto .contact-copy h2{
margin:0!important;
}
#contacto .contact-copy>p:not(.section-label){
margin:8px 0 10px!important;
}
#contacto .contact-copy .button{
margin-top:0!important;
}
#contacto .library-access{
transform:translateY(3.6vh)!important;
}
}
/* 08 ESCRITORIO: ajuste pendiente -- el índice "08 EMPECEMOS" queda
muy pegado al borde superior y con una fuente más grande que el
resto de índices del sitio (21.6px vs 17.7px en las demás
secciones a este ancho). Se iguala su tamaño al del resto
(clamp compartido por todas las demás secciones) y se le da más
aire por encima. ---- */
@media (orientation:landscape){
#contacto .section-label{
font-size:clamp(15px,1.23vw,21px)!important;
margin-top:1.2vh!important;
}
}
/* =========================================================
FIVE DEMOFILMS v69 · 03/08 biblioteca activa + 08 validador oculto
========================================================= */
/* ---- 08 · se añade la misma flechita diagonal que en 03 al botón
de acceso a la biblioteca, ahora que también vuelve a estar
activo, para dar la misma sensación de enlace en ambos sitios. ---- */
#contacto .library-access .button::after{
content:"↗";
margin-left:8px;
display:inline-block;
}
/* ---- 08 · se retira (sin eliminar) el enlace del logo del footer
al estimador privado. Se hace solo con CSS, sin tocar el HTML ni
el JS que abren el modal, para poder recuperarlo en el futuro con
solo borrar esta regla. ---- */
#contacto footer #estimatorTrigger{
pointer-events:none!important;
}