:root {
    --black: #050505;
    --black-soft: #0b0c0f;
    --white: #f7f8fb;
    --muted: #9297a2;
    --line: rgba(255,255,255,.13);
    --blue: #2563eb;
    --blue-light: #6ea0ff;
    --whatsapp: #25d366;
    --sans: "Inter Tight", Arial, sans-serif;
    --serif: "Fraunces", Georgia, serif;
    --mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--white); background: var(--black); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 99999; top: 10px; left: 10px; padding: 12px 16px; color: var(--black); background: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.showroom-header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 78px; padding: 0 clamp(20px,4vw,60px); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
.showroom-header.is-solid { border-color: var(--line); background: rgba(5,5,5,.78); backdrop-filter: blur(20px); }
.showroom-wordmark { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: clamp(.92rem,1.15vw,1.08rem); font-weight: 500; letter-spacing: -.025em; }
.brand-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(37,99,235,.14), 0 0 24px rgba(37,99,235,.75); }
.showroom-nav { display: flex; align-items: center; gap: clamp(18px,2.1vw,34px); color: rgba(247,248,251,.66); font-size: .82rem; }
.showroom-nav a { position: relative; padding: 10px 0; transition: color .2s ease; }
.showroom-nav a::after { content: ""; position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.showroom-nav a:hover { color: var(--white); }
.showroom-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.showroom-services { position: relative; }
.showroom-services summary { padding: 10px 0; list-style: none; cursor: pointer; transition: color .2s ease; }
.showroom-services summary::-webkit-details-marker { display: none; }
.showroom-services summary::after { content: "+"; display: inline-block; margin-left: 7px; color: var(--blue-light); font-family: var(--mono); font-size: .65rem; transition: transform .2s ease; }
.showroom-services[open] summary { color: var(--white); }
.showroom-services[open] summary::after { transform: rotate(45deg); }
.showroom-services-panel { position: absolute; top: calc(100% + 12px); left: 50%; display: grid; grid-template-columns: repeat(2,minmax(190px,1fr)); width: 470px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,11,14,.96); box-shadow: 0 24px 70px rgba(0,0,0,.5); backdrop-filter: blur(22px); transform: translateX(-50%); }
.showroom-services-panel a { display: grid; gap: 4px; padding: 14px !important; border-radius: 11px; }
.showroom-services-panel a::after { display: none; }
.showroom-services-panel a:hover { color: var(--white); background: rgba(255,255,255,.06); }
.showroom-services-panel strong { font-size: .78rem; font-weight: 500; }
.showroom-services-panel span { color: rgba(247,248,251,.38); font-size: .64rem; }
.showroom-services-panel .showroom-services-all { grid-column: 1/-1; margin-bottom: 4px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.header-end { display: flex; justify-self: end; align-items: center; gap: 12px; }
.header-contact { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 0 7px 0 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--black); background: var(--white); font-size: .78rem; font-weight: 500; transition: transform .2s ease, background .2s ease; }
.header-contact span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--white); background: var(--blue); }
.header-contact:hover { transform: translateY(-2px); background: #fff; }
.menu-button { display: none; place-items: center; width: 46px; height: 46px; padding: 13px; border: 1px solid var(--line); border-radius: 50%; color: var(--white); background: rgba(255,255,255,.05); cursor: pointer; }
.menu-button span { grid-area: 1/1; width: 18px; height: 1px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.menu-button span:first-child { transform: translateY(-5px); }
.menu-button span:last-of-type { transform: translateY(5px); }
.menu-button[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:last-of-type { transform: rotate(-45deg); }
.mobile-navigation { position: fixed; z-index: 990; inset: 0; padding: 120px 28px 40px; background: rgba(5,5,5,.97); overflow-y: auto; }
.mobile-navigation:not([hidden]) { display: flex; flex-direction: column; gap: 6px; }
.mobile-navigation > a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.5rem,7vw,2.4rem); letter-spacing: -.04em; }
.mobile-navigation > a:last-child { margin-top: auto; color: var(--whatsapp); border: 0; font-size: 1rem; letter-spacing: 0; }
.mobile-navigation .mobile-services { border-bottom: 1px solid var(--line); }
.mobile-navigation .mobile-services summary { padding: 16px 0; list-style: none; cursor: pointer; font-size: clamp(1.5rem,7vw,2.4rem); letter-spacing: -.04em; }
.mobile-navigation .mobile-services summary::after { content: "+"; float: right; color: var(--blue-light); }
.mobile-navigation .mobile-services[open] summary::after { transform: rotate(45deg); }
.mobile-navigation .mobile-services div { display: grid; padding: 0 0 14px 14px; }
.mobile-navigation .mobile-services a { padding: 9px 0; color: rgba(247,248,251,.56); font-size: .92rem; }

.showroom-hero { position: relative; display: grid; min-height: max(720px,100svh); overflow: hidden; isolation: isolate; padding: 120px clamp(24px,5vw,76px) 82px; background: radial-gradient(circle at 50% 42%,#10182a 0,#080a0f 34%,#050505 72%); }
.hero-glow { position: absolute; z-index: -2; top: -36%; left: 50%; width: min(92vw,1340px); height: min(92vw,1340px); border-radius: 50%; background: radial-gradient(circle,rgba(37,99,235,.2),rgba(37,99,235,.045) 42%,transparent 69%); transform: translateX(-50%); filter: blur(12px); }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom,transparent 2%,#000 28%,transparent 95%); }
.hero-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: min(100%,1380px); margin: auto; text-align: center; }
.hero-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; color: rgba(247,248,251,.5); font-family: var(--mono); font-size: clamp(.56rem,.72vw,.68rem); letter-spacing: .09em; text-transform: uppercase; }
.hero-kicker span { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 18px var(--blue); }
.hero-stage h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: clamp(4.6rem,8vw,8.5rem); font-weight: 300; letter-spacing: -.073em; line-height: .82; }
.hero-stage h1 span,.hero-stage h1 em { display: block; }
.hero-stage h1 em { margin-top: .1em; color: #edf0f6; font-family: var(--serif); font-weight: 280; }
.hero-subcopy { max-width: 660px; margin: 28px auto 0; color: rgba(247,248,251,.58); font-size: clamp(.98rem,1.28vw,1.14rem); font-weight: 300; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 0 9px 0 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--black); background: var(--white); font-size: .78rem; font-weight: 500; transition: transform .2s ease, box-shadow .2s ease; }
.primary-action > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--white); background: var(--blue); }
.primary-action:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.secondary-action { display: inline-flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 4px; color: rgba(247,248,251,.67); font-size: .75rem; transition: color .2s ease, transform .2s ease; }
.secondary-action span { color: var(--blue-light); }
.secondary-action:hover { color: var(--white); transform: translateX(3px); }
.hero-outcomes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: min(100%,1120px); margin-top: clamp(38px,5.5vh,58px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.hero-outcomes article { position: relative; display: grid; gap: 5px; min-width: 0; padding: 19px clamp(15px,2vw,27px) 20px; }
.hero-outcomes article + article { border-left: 1px solid var(--line); }
.hero-outcomes small { color: var(--blue-light); font-family: var(--mono); font-size: .48rem; letter-spacing: .09em; text-transform: uppercase; }
.hero-outcomes strong { font-size: clamp(1rem,1.45vw,1.22rem); font-weight: 500; letter-spacing: -.025em; }
.hero-outcomes span { overflow: hidden; color: rgba(247,248,251,.62); font-size: .67rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hero-scroll-cue { position: absolute; bottom: 23px; left: 50%; display: flex; align-items: center; gap: 10px; color: rgba(247,248,251,.27); font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }
.hero-scroll-cue span { width: 42px; height: 1px; background: linear-gradient(to right,var(--blue-light),transparent); }

.portfolio-section { position: relative; min-height: 980px; overflow: hidden; padding: clamp(100px,10vw,145px) 0 0; background: radial-gradient(circle at 50% 70%,#121624 0,#08090d 35%,#050505 72%); }
.portfolio-intro { position: relative; z-index: 40; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.55fr); gap: 60px; align-items: end; width: min(calc(100% - 48px),1440px); margin: 0 auto; }
.portfolio-intro .section-label { margin-bottom: 22px; color: rgba(247,248,251,.38); }
.portfolio-intro h2 { margin: 0; font-size: clamp(3rem,5.8vw,6.2rem); font-weight: 300; letter-spacing: -.067em; line-height: .86; }
.portfolio-intro h2 em { font-family: var(--serif); font-weight: 280; }
.portfolio-intro-copy { max-width: 420px; padding-bottom: 5px; }
.portfolio-intro-copy p { margin: 0; color: rgba(247,248,251,.5); font-size: .96rem; line-height: 1.58; }
.portfolio-intro-copy a { display: inline-flex; gap: 12px; margin-top: 22px; color: rgba(247,248,251,.78); font-size: .72rem; }
.portfolio-intro-copy a span { color: var(--blue-light); }
.domain-runway { position: relative; z-index: 40; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; width: min(calc(100% - 48px),1440px); margin: 34px auto 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.domain-runway small { color: rgba(247,248,251,.32); font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }
.domain-runway div { display: flex; flex-wrap: wrap; gap: 7px; }
.domain-runway span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(247,248,251,.58); background: rgba(255,255,255,.035); font-family: var(--mono); font-size: .52rem; }
.portfolio-shell { position: relative; z-index: 10; height: 570px; margin-top: 12px; cursor: grab; user-select: none; touch-action: pan-y; }
.portfolio-shell.is-dragging { cursor: grabbing; }
.carousel-scene { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 38%; overflow: hidden; }
.carousel-ring { position: absolute; top: 49%; left: 50%; width: clamp(220px,16vw,265px); aspect-ratio: .73; transform-style: preserve-3d; will-change: transform; }
.portfolio-card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; color: var(--white); background: #101114; box-shadow: 0 30px 80px rgba(0,0,0,.58); backface-visibility: hidden; cursor: pointer; transform-origin: center center; transition: opacity .25s ease, filter .25s ease, border-color .25s ease; }
.portfolio-card:hover { border-color: rgba(255,255,255,.48); }
.portfolio-card[aria-hidden="true"] { pointer-events: none; }
.card-browser { display: flex; flex: 1; min-height: 0; flex-direction: column; background: #0d0e11; }
.browser-bar { display: flex; align-items: center; gap: 4px; flex: 0 0 24px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.browser-bar i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.2); }
.browser-bar b { margin-left: auto; color: rgba(255,255,255,.32); font-family: var(--mono); font-size: .47rem; font-weight: 500; }
.preview-shot { flex: 1; min-height: 0; background-color: var(--project-tone); background-image: url('../img/mobile-sites-spanish-sprite-v1.webp'); background-position: var(--preview-position) top; background-repeat: no-repeat; background-size: 600% auto; }
.card-caption { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; flex: 0 0 77px; align-content: center; padding: 10px 13px 11px; text-align: left; background: rgba(10,11,14,.98); }
.card-caption small { grid-column: 1/-1; color: rgba(247,248,251,.38); font-family: var(--mono); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }
.card-caption strong { font-size: .95rem; font-weight: 500; letter-spacing: -.025em; }
.card-caption > span { align-self: center; color: rgba(247,248,251,.45); font-size: .58rem; }
.card-caption > span b { color: var(--blue-light); }
.side-fade { position: absolute; z-index: 20; top: 0; bottom: 0; width: 18vw; pointer-events: none; }
.side-fade-left { left: 0; background: linear-gradient(to right,var(--black),transparent); }
.side-fade-right { right: 0; background: linear-gradient(to left,var(--black),transparent); }
.project-status { position: absolute; z-index: 30; bottom: 30px; left: clamp(20px,4vw,60px); display: flex; align-items: center; gap: 18px; pointer-events: none; }
.project-status > span { color: rgba(247,248,251,.38); font-family: var(--mono); font-size: .55rem; }
.project-status > span b { color: var(--white); font-size: .7rem; }
.project-status p { display: grid; gap: 3px; margin: 0; }
.project-status strong { font-size: .85rem; font-weight: 500; }
.project-status small { color: rgba(247,248,251,.42); font-size: .66rem; }
.carousel-controls { position: absolute; z-index: 31; right: clamp(20px,4vw,60px); bottom: 28px; display: flex; gap: 8px; }
.carousel-controls button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--white); background: rgba(255,255,255,.05); backdrop-filter: blur(12px); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.carousel-controls button:hover { background: rgba(255,255,255,.13); transform: scale(1.05); }
.carousel-controls button[data-carousel-pause] { width: auto; padding: 0 16px; border-radius: 999px; font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.concept-note { position: absolute; z-index: 30; right: 140px; bottom: 42px; max-width: 390px; margin: 0; color: rgba(247,248,251,.48); font-family: var(--mono); font-size: .47rem; letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }

.capability-section { padding: clamp(100px,12vw,170px) clamp(20px,4vw,60px); color: var(--black); background: #f0f2f6; }
.capability-intro { display: grid; grid-template-columns: minmax(180px,.45fr) minmax(0,1.3fr); gap: 40px; align-items: start; max-width: 1440px; margin: 0 auto clamp(60px,8vw,110px); }
.section-label { margin: 0; color: #6f7480; font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
.capability-intro h2 { max-width: 17ch; margin: -10px 0 0; font-size: clamp(2.5rem,6vw,6.4rem); font-weight: 300; letter-spacing: -.068em; line-height: .9; }
.capability-intro h2 em { font-family: var(--serif); font-weight: 300; }
.capability-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; max-width: 1440px; margin: 0 auto; }
.capability-card { position: relative; grid-column: span 4; min-height: 620px; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(23,31,49,.08); }
.capability-copy { position: relative; z-index: 2; padding: clamp(26px,3vw,42px); }
.capability-copy > span { color: #7c818c; font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.capability-copy h3 { margin: 68px 0 12px; font-size: clamp(2rem,3.3vw,3.7rem); font-weight: 400; letter-spacing: -.055em; line-height: .95; }
.capability-copy p { max-width: 35ch; margin: 0; color: #686d77; font-size: .96rem; line-height: 1.52; }
.mini-visual { position: absolute; right: 20px; bottom: 20px; left: 20px; height: 52%; overflow: hidden; border-radius: 16px; }
.visual-brand { color: #fff; background: #111a33; }
.brand-canvas { position: absolute; inset: 0; padding: 30px; background: radial-gradient(circle at 80% 20%,rgba(63,114,255,.72),transparent 32%),linear-gradient(135deg,#0a1023,#172659); }
.brand-canvas span { font-family: var(--mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; }
.brand-canvas strong { position: absolute; left: 30px; bottom: 34px; font-size: clamp(2.2rem,3.2vw,4rem); font-weight: 300; letter-spacing: -.07em; line-height: .78; }
.brand-canvas i { position: absolute; top: 28px; right: 28px; width: 82px; height: 82px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; box-shadow: inset 0 0 40px rgba(255,255,255,.12); }
.brand-canvas i::before, .brand-canvas i::after { content: ""; position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%,-50%); }
.brand-canvas i::before { width: 30px; height: 1px; }.brand-canvas i::after { width: 1px; height: 30px; }
.visual-search { padding: 26px; background: #e9ecf3; }
.search-pill { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid #d2d6df; border-radius: 999px; color: #4f5560; background: #fff; font-size: .75rem; box-shadow: 0 12px 28px rgba(30,40,65,.08); }
.search-pill b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--blue); font-size: .95rem; }
.search-result { display: grid; gap: 7px; margin-top: 24px; padding: 23px; border-left: 3px solid var(--blue); border-radius: 0 15px 15px 0; background: #fff; box-shadow: 0 18px 38px rgba(30,40,65,.09); }
.search-result small { color: #397044; font-size: .58rem; }.search-result strong { color: #1e4fba; font-size: 1.15rem; font-weight: 500; }.search-result span { color: #717681; font-size: .72rem; line-height: 1.4; }
.visual-chat { padding: 20px; background: #dce9df; background-image: radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px); background-size: 13px 13px; }
.chat-top { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; margin: -20px -20px 24px; padding: 14px 18px; color: #fff; background: #173f35; }
.chat-top i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--whatsapp); box-shadow: inset 0 0 0 8px rgba(255,255,255,.16); }.chat-top span { font-size: .78rem; font-weight: 500; }.chat-top b { color: rgba(255,255,255,.55); font-size: .55rem; font-weight: 400; }
.chat-message, .chat-reply { width: 88%; padding: 13px 14px; border-radius: 13px; color: #3e4541; background: #fff; font-size: .7rem; line-height: 1.4; box-shadow: 0 9px 24px rgba(23,63,53,.08); }
.chat-reply { margin: 12px 0 0 auto; background: #d1f3d9; }

.finish-section { position: relative; min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 120px 20px 70px; text-align: center; background: radial-gradient(circle at 50% 52%,#13192a 0,#08090d 35%,#050505 68%); }
.finish-section .section-label { color: rgba(247,248,251,.37); }
.finish-section h2 { position: relative; z-index: 2; margin: 22px 0 0; font-size: clamp(3rem,7.5vw,8.5rem); font-weight: 300; letter-spacing: -.072em; line-height: .82; }
.finish-section h2 em { font-family: var(--serif); font-weight: 280; }
.finish-section > p:not(.section-label) { position: relative; z-index: 2; max-width: 530px; margin: 30px auto 0; color: rgba(247,248,251,.52); font-size: clamp(.95rem,1.5vw,1.12rem); line-height: 1.55; }
.finish-action { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 32px; min-height: 64px; margin-top: 38px; padding: 7px 8px 7px 25px; border-radius: 999px; color: #062d17; background: var(--whatsapp); font-size: .85rem; font-weight: 500; box-shadow: 0 15px 45px rgba(37,211,102,.18); transition: transform .2s ease, box-shadow .2s ease; }
.finish-action b { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; color: #fff; background: #0a3219; font-size: 1rem; }
.finish-action:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 22px 60px rgba(37,211,102,.26); }
.finish-meta { position: absolute; right: clamp(20px,4vw,60px); bottom: 38px; left: clamp(20px,4vw,60px); display: flex; justify-content: space-between; color: rgba(247,248,251,.5); font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; }
.finish-orbit { position: absolute; top: 50%; left: 50%; width: min(86vw,900px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; transform: translate(-50%,-50%); }
.finish-orbit::before, .finish-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.04); border-radius: 50%; }.finish-orbit::before { inset: 13%; }.finish-orbit::after { inset: 28%; }
.finish-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 24px var(--blue); }.finish-orbit span:nth-child(1) { top: 20%; left: 9%; }.finish-orbit span:nth-child(2) { top: 4%; right: 31%; width: 5px; height: 5px; }.finish-orbit span:nth-child(3) { right: 7%; bottom: 24%; width: 6px; height: 6px; }
.showroom-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; min-height: 90px; padding: 20px clamp(20px,4vw,60px); border-top: 1px solid var(--line); color: rgba(247,248,251,.38); background: var(--black); font-size: .62rem; }
.showroom-footer p { margin: 0; }.showroom-footer nav { display: flex; justify-self: end; gap: 22px; }.showroom-footer a:hover { color: var(--white); }

.is-menu-open .floating-whatsapp, .is-carousel-in-view .floating-whatsapp { display: none; }
.floating-whatsapp { position: fixed; z-index: 1200; right: max(18px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #062d17; background: var(--whatsapp); box-shadow: 0 16px 38px rgba(9,72,34,.35); transition: transform .18s ease; }
.floating-whatsapp:hover { transform: translateY(-3px) scale(1.04); }.floating-whatsapp svg { width: 30px; height: 30px; }
.floating-whatsapp span { position: absolute; right: calc(100% + 10px); padding: 9px 12px; border-radius: 10px; color: var(--white); background: rgba(5,5,5,.94); font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(5px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.floating-whatsapp:hover span, .floating-whatsapp:focus-visible span { opacity: 1; transform: none; }

.project-dialog { width: min(960px,calc(100% - 32px)); max-height: min(760px,calc(100svh - 32px)); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: var(--white); background: #0c0d11; box-shadow: 0 40px 120px rgba(0,0,0,.8); }
.project-dialog[open] { display: grid; grid-template-columns: .85fr 1.15fr; }
.project-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(14px); }
.dialog-close { position: absolute; z-index: 3; top: 18px; right: 18px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--white); background: rgba(0,0,0,.35); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.dialog-preview { position: relative; display: grid; place-items: center; min-height: 610px; padding: 50px 38px; background: radial-gradient(circle at 50% 40%,rgba(37,99,235,.2),transparent 50%),#08090c; }
.dialog-preview > p { position: absolute; bottom: 22px; margin: 0; color: rgba(255,255,255,.3); font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }
.dialog-phone { width: min(250px,80%); aspect-ratio: .55; overflow: hidden; border: 7px solid #17181c; border-radius: 34px; background: #111; box-shadow: 0 30px 80px rgba(0,0,0,.52); }
.dialog-screen { display: block; width: 100%; height: 100%; background-image: url('../img/mobile-sites-spanish-sprite-v1.webp'); background-position: var(--dialog-position,0%) top; background-repeat: no-repeat; background-size: 600% auto; }
.dialog-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,7vw,84px); }
.dialog-copy .section-label { color: var(--blue-light); }.dialog-copy h2 { margin: 18px 0; font-size: clamp(2.7rem,5vw,5rem); font-weight: 300; letter-spacing: -.06em; line-height: .9; }.dialog-benefit { max-width: 35ch; margin: 0; color: rgba(247,248,251,.58); font-size: 1.08rem; line-height: 1.55; }
.dialog-copy ul { display: grid; gap: 0; margin: 36px 0 34px; padding: 0; border-top: 1px solid var(--line); list-style: none; }.dialog-copy li { padding: 14px 0; border-bottom: 1px solid var(--line); color: rgba(247,248,251,.65); font-size: .82rem; }.dialog-copy li::before { content: "↗"; margin-right: 12px; color: var(--blue-light); }.dialog-copy .primary-action { align-self: flex-start; }

@media (min-width: 721px) {
    .has-js [data-reveal-title] > * { opacity: 0; transform: translateY(28px); filter: blur(7px); transition: opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s; }
    .has-js body.is-loaded [data-reveal-title] > * { opacity: 1; transform: none; filter: none; }
    .has-js body.is-loaded [data-reveal-title] > *:nth-child(2) { transition-delay: .09s; }.has-js body.is-loaded [data-reveal-title] > *:nth-child(3) { transition-delay: .18s; }
}

@media (max-width: 1000px) {
    .showroom-header { grid-template-columns: 1fr auto; }.showroom-nav { display: none; }.menu-button { display: grid; }.header-contact { display: none; }
    .showroom-hero { padding-inline: 34px; }.hero-stage h1 { font-size: clamp(4.4rem,10vw,6.8rem); }
    .portfolio-intro { grid-template-columns: 1fr; gap: 28px; align-items: start; }.portfolio-intro-copy { max-width: 580px; }
    .portfolio-section { min-height: 1020px; }.domain-runway { grid-template-columns: 1fr; gap: 10px; }.portfolio-shell { height: 535px; margin-top: 18px; overflow: hidden; cursor: default; touch-action: pan-y; }
    .carousel-scene { overflow: hidden; perspective: none; }
    .carousel-ring { position: relative; top: auto; left: auto; width: 100%; height: 440px; transform: none !important; }
    .portfolio-card { position: absolute; inset: 0 auto auto 50%; width: min(330px,calc(100% - 72px)); height: 440px; opacity: 0 !important; visibility: hidden; filter: none !important; pointer-events: none; transform: translateX(-50%) scale(.94) !important; transition: opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1),visibility .32s; }
    .portfolio-card.is-active { opacity: 1 !important; visibility: visible; pointer-events: auto; transform: translateX(-50%) scale(1) !important; }
    .side-fade { display: none; }.project-status { right: 142px; bottom: 25px; left: clamp(22px,5vw,48px); }.carousel-controls { right: clamp(22px,5vw,48px); bottom: 23px; }.carousel-controls button[data-carousel-pause] { display: none; }.concept-note { display: none; }
    .capability-card { grid-column: span 6; }.capability-card:last-child { grid-column: 4/span 6; }
}

@media (max-width: 820px) {
    .showroom-hero { min-height: auto; padding-top: 118px; padding-bottom: 92px; }.hero-outcomes { grid-template-columns: repeat(2,minmax(0,1fr)); }.hero-outcomes article:nth-child(3) { border-left: 0; }.hero-outcomes article:nth-child(n+3) { border-top: 1px solid var(--line); }.hero-scroll-cue { display: none; }
}

@media (max-width: 720px) {
    .showroom-header { min-height: 68px; padding-inline: 16px; }.showroom-wordmark { font-size: .92rem; }.menu-button { width: 44px; height: 44px; }
    .showroom-hero { min-height: auto; padding: 105px 16px 68px; overflow: hidden; }.hero-grid { background-size: 48px 48px; }.hero-kicker { max-width: 31ch; justify-content: center; line-height: 1.5; }.hero-stage h1 { font-size: clamp(3.2rem,14.5vw,4.5rem); line-height: .84; }.hero-subcopy { max-width: 34ch; margin-top: 23px; font-size: .94rem; }.hero-actions { flex-direction: column; gap: 8px; width: 100%; margin-top: 24px; }.secondary-action { min-height: 44px; }.hero-outcomes { grid-template-columns: 1fr; margin-top: 33px; }.hero-outcomes article { padding: 14px 4px; }.hero-outcomes article + article,.hero-outcomes article:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }.hero-outcomes span { white-space: normal; }
    .portfolio-section { min-height: 990px; padding-top: 88px; }.portfolio-intro { width: calc(100% - 32px); gap: 24px; }.portfolio-intro .section-label { margin-bottom: 17px; }.portfolio-intro h2 { font-size: clamp(2.8rem,12.7vw,4.2rem); }.portfolio-intro-copy p { font-size: .9rem; }.domain-runway { width: calc(100% - 32px); margin-top: 28px; padding-block: 12px; }.domain-runway div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }.domain-runway div::-webkit-scrollbar { display: none; }.domain-runway span { flex: 0 0 auto; }.portfolio-shell { height: 500px; margin-top: 18px; }
    .carousel-ring { height: 400px; }.portfolio-card { width: min(285px,calc(100% - 48px)); height: 400px; }
    .project-status { right: 126px; bottom: 21px; left: 18px; }.project-status small { max-width: 25ch; }.carousel-controls { right: 18px; bottom: 19px; }.carousel-controls button { width: 44px; height: 44px; }
    .capability-section { padding: 90px 16px; }.capability-intro { grid-template-columns: 1fr; gap: 25px; margin-bottom: 52px; }.capability-intro h2 { margin: 0; font-size: clamp(2.6rem,12.7vw,4rem); }.capability-grid { display: grid; grid-template-columns: 1fr; }.capability-card, .capability-card:last-child { grid-column: 1; min-height: 560px; }.capability-copy h3 { margin-top: 48px; }.mini-visual { height: 48%; }
    .finish-section { min-height: 820px; }.finish-section h2 { font-size: clamp(3.1rem,14vw,5rem); }.finish-action { gap: 20px; padding-left: 20px; }.finish-meta { flex-wrap: wrap; gap: 12px 24px; justify-content: center; }
    .showroom-footer { grid-template-columns: 1fr; gap: 16px; padding-block: 30px; }.showroom-footer nav { justify-self: start; }.floating-whatsapp { width: 56px; height: 56px; }.floating-whatsapp span { display: none; }
    .project-dialog[open] { display: block; overflow-y: auto; }.dialog-preview { min-height: 390px; }.dialog-phone { width: 170px; }.dialog-copy { padding: 34px 24px 44px; }.dialog-copy h2 { font-size: 3rem; }
}

@media (max-height: 760px) and (min-width: 721px) {
    .showroom-hero { min-height: 700px; padding-top: 94px; padding-bottom: 52px; }.hero-kicker { margin-bottom: 16px; }.hero-stage h1 { font-size: clamp(4.2rem,7.3vw,6.4rem); }.hero-subcopy { margin-top: 18px; }.hero-actions { margin-top: 19px; }.hero-outcomes { margin-top: 26px; }.hero-outcomes article { padding-block: 14px; }.hero-scroll-cue { bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; } *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}