.scene-name { min-height: 100svh; padding: 13vh var(--orilla) 9vh; border-bottom: 1px solid var(--linea); }
.scene-name h1 { position: absolute; left: var(--orilla); top: 20%; z-index: 2; width: calc(100% - var(--orilla) - var(--orilla)); max-width: none; white-space: nowrap; font-size: clamp(5.1rem, 10.2vw, 11rem); line-height: .8; letter-spacing: -.07em; }
.scene-name h1 .char { display: inline-block !important; }
.scene-name__promise { position: absolute; right: var(--orilla); bottom: 16%; white-space: nowrap; font-size: clamp(1rem, 1.5vw, 1.22rem); }
.scene-name__place { position: absolute; right: var(--orilla); top: 17%; color: var(--niebla); font-size: 12px; }
.scene-name__axis { position: absolute; inset: 48px auto 0 39vw; width: 1px; background: var(--linea); }
.scene-name__orb { position: absolute; border: 1px solid var(--linea); border-radius: 50%; }
.scene-name__orb--desktop { width: min(31vw, 450px); height: min(31vw, 450px); right: var(--orilla); bottom: -14vw; }
.scene-name__orb--mobile { display: none; }
.scroll-cue { position: absolute; left: var(--orilla); bottom: 6vh; display: flex; align-items: center; gap: 12px; color: var(--niebla); font-size: 11px; }
.scroll-cue span { width: 46px; height: 1px; background: currentColor; }

.scene-turn { min-height: 95svh; display: grid; align-items: center; padding: 10vh var(--orilla); }
.scene-turn__copy { display: grid; gap: clamp(65px, 12vh, 120px); }
.strike-line, .turn-answer { position: relative; width: fit-content; max-width: 18ch; font-size: var(--titulo); font-weight: 800; line-height: .92; letter-spacing: -.055em; }
.strike-line { color: var(--niebla); margin-left: 5vw; }
.strike-line svg { position: absolute; inset: 5% -3%; width: 106%; height: 100%; overflow: visible; }
.strike-line path { fill: none; stroke: var(--hueso); stroke-width: 8; stroke-linecap: square; }
.turn-answer { justify-self: end; text-align: right; margin-right: 5vw; }
.turn-answer strong { color: var(--ambar); }
.turn-sheet { position: absolute; width: min(32vw, 440px); aspect-ratio: .72; left: 44%; top: 18%; border: 1px solid var(--linea); transform: rotate(4deg); opacity: .25; }
.turn-sheet i { display: block; height: 1px; margin: 24% 12%; background: var(--linea-fuerte); }

.scene-method { min-height: 100svh; padding: 12vh var(--orilla) 8vh; border-block: 1px solid var(--linea); }
.scene-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.system-stage { position: relative; height: 68vh; min-height: 520px; margin-top: -3vh; }
.system-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 16px; }
.system-node p { max-width: 12ch; color: var(--niebla); font-size: 13px; }.system-node strong { display: block; color: var(--hueso); font-size: 15px; }
.system-node--search { top: 5%; right: 7%; }.system-node--choose { top: 38%; left: 39%; }.system-node--record { left: 5%; bottom: 7%; }.system-node--reply { right: 8%; bottom: 4%; }
.draw-search { position: relative; width: 82px; height: 82px; border: 2px solid var(--niebla); border-radius: 50%; }
.draw-search::after { content: ""; position: absolute; right: -23px; bottom: -11px; width: 39px; height: 2px; background: var(--niebla); transform: rotate(48deg); transform-origin: left; }.draw-search i { position: absolute; inset: 34%; border: 1px solid var(--linea-fuerte); border-radius: 50%; }
.draw-button { position: relative; display: grid; width: 125px; height: 56px; padding: 10px; place-items: center; border: 1px solid var(--hueso); background: var(--tarjeta); font-size: 12px; font-weight: 800; }.draw-button i { position: absolute; right: -13px; bottom: -16px; width: 0; height: 0; border-top: 18px solid var(--hueso); border-right: 11px solid transparent; transform: rotate(-20deg); }
.draw-record { position: relative; width: 88px; height: 105px; border: 1px solid var(--niebla); background: var(--tarjeta); }.draw-record::before, .draw-record::after, .draw-record i { content: ""; position: absolute; left: 17px; right: 17px; height: 1px; background: var(--niebla); }.draw-record::before { top: 25px; }.draw-record i:nth-child(1) { top: 50px; }.draw-record i:nth-child(2) { top: 75px; }.draw-record::after { left: 61px; top: 13px; bottom: 13px; width: 1px; height: auto; }
.draw-reply { position: relative; display: flex; width: 108px; height: 78px; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--niebla); border-radius: 44px; }.draw-reply::after { content: ""; position: absolute; left: 8px; bottom: -13px; width: 23px; height: 23px; border-left: 2px solid var(--niebla); transform: skew(-28deg); }.draw-reply i { width: 8px; height: 8px; border-radius: 50%; background: var(--niebla); }
.system-node.is-result { color: var(--ambar); }.system-node.is-result p strong { color: var(--ambar); }.system-node.is-result .draw-search, .system-node.is-result .draw-record, .system-node.is-result .draw-reply { border-color: var(--ambar); }.system-node.is-result .draw-search::after, .system-node.is-result .draw-record::before, .system-node.is-result .draw-record::after, .system-node.is-result .draw-record i, .system-node.is-result .draw-reply i { background: var(--ambar); }.system-node.is-result .draw-button { border-color: var(--ambar); background: var(--ambar); color: var(--noche); }.system-node.is-result .draw-reply::after { border-color: var(--ambar); }
.system-path { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }.system-path path { fill: none; stroke: var(--linea-fuerte); stroke-width: 1.5; stroke-dasharray: 4 8; }
.lead-chip { position: absolute; top: 0; left: 0; z-index: 4; display: none; width: 72px; height: 72px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--hueso); background: var(--noche); font-size: 10px; }.lead-chip i { width: 13px; height: 13px; margin-bottom: 7px; background: var(--hueso); transform: rotate(45deg); }.motion-ready .lead-chip { display: flex; }

.scene-barbea { min-height: 140svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .55fr); grid-template-rows: auto auto; gap: 4vh 7vw; align-content: center; padding: 8vh var(--orilla); background: var(--hueso); color: var(--noche); --grano: .62; }
.barbea-copy h2 { max-width: 11ch; }.barbea-lead { max-width: 45ch; margin-top: 28px; color: var(--niebla-hueso); font-size: 17px; }.barbea-proof { max-width: 44ch; margin-top: 24px; color: var(--niebla-hueso); font-size: 13px; }.barbea-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; }
.barbea-steps { max-width: 380px; margin-top: 28px; counter-reset: steps; }.barbea-steps li { display: flex; min-height: 38px; align-items: center; gap: 14px; border-bottom: 1px solid rgba(18,23,28,.14); color: var(--niebla-hueso); font-size: 12px; counter-increment: steps; }.barbea-steps li::before { content: counter(steps, decimal-leading-zero); font-size: 11px; font-variant-numeric: tabular-nums; }.barbea-steps li.is-active { padding-left: 13px; background: var(--ambar); color: var(--noche); font-weight: 800; }
.phone-wrap { align-self: center; justify-self: end; }.phone-demo-label { max-width: 30ch; margin-bottom: 12px; color: var(--niebla-hueso); font-size: 11px; }.phone { position: relative; width: min(27vw, 350px); min-width: 300px; min-height: 570px; overflow: hidden; border: 8px solid #090909; border-radius: 48px; background: #f1eee7; color: #090909; box-shadow: 0 28px 60px rgba(18,23,28,.22); }
.phone__top { position: relative; z-index: 3; display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 16px 23px 8px; border-bottom: 1px solid rgba(9,9,9,.12); background: #f1eee7; font-size: 18px; font-weight: 800; letter-spacing: -.04em; }.phone__top::before { content: ""; position: absolute; top: 8px; left: 50%; width: 86px; height: 23px; border-radius: 18px; background: #090909; transform: translateX(-50%); }.phone__top i { width: 8px; height: 8px; border-radius: 50%; background: #b8955a; }
.phone__screen { position: relative; }.phone-screen { position: relative; min-height: 500px; padding: 35px 24px 70px; border-bottom: 1px solid rgba(9,9,9,.12); background: #f1eee7; }.phone-ready .phone { height: min(70vh, 630px); }.phone-ready .phone__screen { height: calc(100% - 66px); }.phone-ready .phone-screen { position: absolute; inset: 0; min-height: 0; border: 0; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.985) rotate(.3deg); filter: blur(7px); transition: opacity 500ms var(--entra), transform 600ms var(--entra), filter 500ms var(--entra), visibility 0s 600ms; }.phone-ready .phone-screen.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.phone-screen .ui-label { margin-bottom: 15px; color: #696965; font-size: 11px; letter-spacing: .1em; }.phone-screen h3 { margin-bottom: 28px; font-size: 31px; line-height: .95; letter-spacing: -.055em; }.service-choice { display: flex; min-height: 58px; align-items: center; justify-content: space-between; margin-bottom: 9px; padding: 10px 14px; border: 1px solid rgba(9,9,9,.18); border-radius: 11px; background: #fff; }.service-choice:first-of-type { border-color: #b8955a; }.service-choice span { color: #696965; font-size: 11px; }.demo-action { display: grid; min-height: 48px; margin-top: 18px; place-items: center; border-radius: 9px; background: #b8955a; font-size: 13px; font-weight: 800; }
.notice-card { margin-top: 70px; padding: 17px; border-radius: 16px; background: #121212; color: #f1eee7; box-shadow: 0 22px 44px rgba(9,9,9,.28); }.notice-card span, .notice-card small { color: #a3a19c; font-size: 11px; }.notice-card b, .notice-card p, .notice-card small { display: block; }.notice-card b { margin-top: 22px; font-size: 23px; }.notice-card p { margin: 4px 0 22px; font-size: 12px; }
.agenda-row { display: grid; grid-template-columns: 55px 4px 1fr; gap: 10px; min-height: 76px; align-items: center; padding-block: 8px; border-top: 1px solid rgba(9,9,9,.13); }.agenda-row time, .agenda-row small { color: #696965; font-size: 11px; }.agenda-row i { width: 4px; height: 42px; background: #b8955a; }.agenda-row span, .agenda-row b, .agenda-row small { display: block; }.charge-row { display: flex; min-height: 67px; align-items: center; justify-content: space-between; padding-block: 8px; border-bottom: 1px solid rgba(9,9,9,.15); }.charge-row span { color: #696965; font-size: 11px; }.number-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.number-grid > span { min-height: 105px; padding: 14px; background: #121212; color: #f1eee7; }.number-grid small, .number-grid b { display: block; }.number-grid small { margin-bottom: 30px; color: #a3a19c; font-size: 11px; }.number-grid b { font-size: 13px; }.phone__home { position: absolute; left: 50%; bottom: 11px; z-index: 4; width: 100px; height: 4px; border-radius: 4px; background: #090909; transform: translateX(-50%); }
.phone-controls { display: flex; gap: 5px; margin-top: 12px; }.phone-controls button { flex: 1; min-height: 44px; border: 1px solid #5b6670; background: transparent; color: var(--noche); cursor: pointer; font-size: 11px; }.phone-controls button[aria-pressed="true"] { background: var(--noche); color: var(--hueso); }
.barbea-video { grid-column: 1; width: min(100%, 460px); align-self: end; overflow: hidden; background: #090909; }.barbea-video__frame { position: relative; aspect-ratio: 16/9; }.barbea-video video { width: 100%; height: 100%; object-fit: cover; }.barbea-video figcaption { padding: 11px 13px; color: #a3a19c; font-size: 11px; }.video-toggle { position: absolute; left: 72.5%; top: 50%; width: 56px; height: 56px; padding: 0; border: 1px solid #b8955a; border-radius: 50%; background: rgba(9,9,9,.84); color: #d7b879; cursor: pointer; transform: translate(-50%,-50%); }.video-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor; transform: translate(-38%,-50%); }.video-toggle[aria-pressed="true"]::before { width: 14px; height: 18px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; transform: translate(-50%,-50%); }.video-toggle span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.scene-work { min-height: 125svh; padding: 8vh var(--orilla); }.work-intro { display: grid; grid-template-columns: 90px 1fr auto; gap: 30px; align-items: end; }.work-intro img { width: 88px; filter: grayscale(1) brightness(3.8); }.work-intro > div > p { margin-bottom: 10px; color: var(--niebla); font-size: 16px; }.work-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.8fr) minmax(220px,.58fr); gap: clamp(22px,2.4vw,38px); align-items: start; margin-top: 5vh; }.work-card { min-width: 0; }.work-card h3 { margin-top: 18px; font-size: clamp(1.8rem, 2.5vw, 3rem); line-height: .92; letter-spacing: -.05em; }.work-card p { max-width: 34ch; margin-top: 10px; color: var(--niebla); font-size: 16px; line-height: 1.35; }.work-card .text-link { margin-top: 12px; }.browser-shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tarjeta); box-shadow: 0 20px 48px rgba(0,0,0,.2); }.browser-shot > span { display: block; height: 26px; border-bottom: 1px solid var(--linea); }.browser-shot img { width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: top; }.mobile-shot { width: min(68%,260px); aspect-ratio: 9 / 14; margin-inline: auto; overflow: hidden; border: 7px solid var(--tarjeta); border-radius: 24px; box-shadow: 0 20px 48px rgba(0,0,0,.2); }.mobile-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }.work-card--pina { min-height: 270px; padding: 24px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta); }.construction-mark { display: inline-block; margin: 0 0 55px !important; padding: 8px 10px; background: var(--ambar); color: var(--noche) !important; font-weight: 800; }.work-all { margin-top: 4vh; }

.scene-final { min-height: 110svh; display: grid; grid-template-rows: 1fr 1fr; }.about-panel { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8vw; align-items: center; padding: 6vh var(--orilla); background: var(--hueso); color: var(--noche); --grano: .62; }.about-panel img { width: min(100%, 330px); }.about-panel h2 { max-width: 13ch; }.about-panel p { max-width: 42ch; margin-top: 22px; color: var(--niebla-hueso); font-size: 17px; }.about-panel .text-link { margin-top: 20px; }.close-panel { display: grid; grid-template-columns: 1fr minmax(280px,.6fr); grid-template-rows: auto auto; gap: 24px 7vw; align-items: end; padding: 6vh var(--orilla); background: var(--noche); }.close-panel h2 { font-size: var(--titulo); }.close-panel .primary-cta { justify-self: end; }.contact-channels { display: flex; grid-column: 1/-1; gap: 32px; border-top: 1px solid var(--linea); padding-top: 15px; font-size: 12px; font-style: normal; }.contact-channels a { display: flex; min-height: 44px; align-items: center; }

.process-list { margin-top: clamp(70px,10vh,120px); border-top: 1px solid var(--linea); }.process-step { display: grid; grid-template-columns: minmax(180px,.7fr) 1fr minmax(180px,.6fr); gap: 5vw; min-height: 280px; align-items: center; padding-block: 45px; border-bottom: 1px solid var(--linea); }.process-step h2 { font-size: clamp(1.9rem,3.2vw,3.4rem); line-height: .95; letter-spacing: -.05em; }.process-step p { max-width: 48ch; color: var(--niebla); }.process-object { justify-self: end; transform: scale(.9); }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: clamp(60px,9vh,100px); background: var(--linea); }.portfolio-item { display: flex; min-height: 480px; flex-direction: column; justify-content: space-between; padding: 32px; background: var(--noche); text-decoration: none; }.portfolio-item--light { background: var(--hueso); color: var(--noche); }.portfolio-item h2 { max-width: 11ch; font-size: clamp(2.3rem,4vw,4rem); line-height: .9; letter-spacing: -.055em; }.portfolio-item p { max-width: 35ch; color: var(--niebla); }.portfolio-item--light p { color: var(--niebla-hueso); }.portfolio-preview { height: 230px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--linea); }.portfolio-preview img { width: 100%; height: 100%; object-fit: cover; }.portfolio-preview .phone { transform: scale(.28); transform-origin: center; }.portfolio-item--building { background: var(--tarjeta); }.portfolio-item--building .construction-mark { align-self: flex-start; }
.case-media { display: grid; grid-template-columns: 1.4fr .55fr; gap: 28px; align-items: start; margin-top: clamp(55px,8vh,90px); }.device-browser { overflow: hidden; background: var(--tarjeta); box-shadow: 0 30px 70px rgba(0,0,0,.22); }.device-browser__bar { height: 38px; border-bottom: 1px solid var(--linea); }.device-browser img { width: 100%; }.device-mobile { max-width: 330px; margin-inline: auto; overflow: hidden; border: 8px solid var(--tarjeta); border-radius: 30px; }.device-mobile img { width: 100%; }
.barbea-case { display: grid; grid-template-columns: 1fr minmax(300px,.55fr); gap: 7vw; align-items: start; }.barbea-case .barbea-video { margin-top: 45px; }.barbea-case .phone-wrap { position: sticky; top: 90px; }
.about-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: start; }.about-story img { position: sticky; top: 110px; width: min(100%,400px); }.about-story__copy { display: grid; gap: 45px; }.about-story__copy p { max-width: 52ch; font-size: clamp(1.25rem,2.1vw,2rem); line-height: 1.35; letter-spacing: -.025em; }.about-story__copy strong { color: var(--ambar); }