{"id":11,"date":"2026-06-23T03:38:04","date_gmt":"2026-06-23T03:38:04","guid":{"rendered":"https:\/\/urbanikossoluciones.com\/?page_id=11"},"modified":"2026-06-23T04:05:07","modified_gmt":"2026-06-23T04:05:07","slug":"inicio","status":"publish","type":"page","link":"https:\/\/urbanikossoluciones.com\/","title":{"rendered":"Inicio"},"content":{"rendered":"<style>\n\/* ============================================================================\n   URBANIKOS SOLUCIONES \u2014 Sistema de estilos (vanilla, sin build)\n   Est\u00e9tica: Architectural Editorial \u2014 navy petr\u00f3leo + bone c\u00e1lido + acero\n   Compatible con Elementor (widget HTML) y navegadores modernos.\n   ========================================================================== *\/<\/p>\n<p>\/* ----- Fuentes premium v\u00eda CDN (Google Fonts) ----- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap');<\/p>\n<p>\/* ===================== TOKENS DE MARCA ===================== *\/\n:root{\n  \/* Profundidades de navy *\/\n  --ink-900:#0E1A23;\n  --ink-800:#14222D;\n  --brand-700:#1B2B38;   \/* navy primario (brief) *\/\n  --brand-600:#243845;\n  --brand-500:#2E4655;<\/p>\n<p>  \/* Acento acero (la K de urbaniKos) *\/\n  --steel-600:#3E6E96;\n  --steel-500:#4C82A6;\n  --steel-400:#6BA0C4;\n  --steel-glow:rgba(107,160,196,.35);<\/p>\n<p>  \/* Neutros c\u00e1lidos \/ editorial *\/\n  --bone-50:#F7F4EE;\n  --bone-100:#EFEAE1;\n  --bone-200:#E3DBCE;\n  --sand-300:#D6CCBC;<\/p>\n<p>  \/* Texto *\/\n  --text-ink:#15242E;\n  --text-soft:#5C6A73;\n  --text-faint:#8A949A;\n  --on-dark:#F4F1EA;\n  --on-dark-soft:rgba(244,241,234,.62);<\/p>\n<p>  \/* Tipograf\u00eda *\/\n  --font-display:'Space Grotesk', system-ui, sans-serif;\n  --font-serif:'Fraunces', Georgia, serif;\n  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;<\/p>\n<p>  \/* Curvas de movimiento (f\u00edsicas, nunca linear\/ease-in-out) *\/\n  --ease-spring:cubic-bezier(.32,.72,0,1);\n  --ease-out-soft:cubic-bezier(.16,1,.3,1);\n  --ease-swift:cubic-bezier(.6,.05,.1,1);<\/p>\n<p>  \/* Radios squircle *\/\n  --r-xl:2rem;\n  --r-lg:1.4rem;\n  --r-md:1rem;\n  --r-pill:999px;<\/p>\n<p>  \/* Layout *\/\n  --pad-x:clamp(1.25rem, 5vw, 5.5rem);\n  --maxw:1280px;<\/p>\n<p>  \/* Sombras difusas (nunca harsh) *\/\n  --shadow-soft:0 30px 60px -25px rgba(20,34,45,.28), 0 12px 24px -18px rgba(20,34,45,.20);\n  --shadow-float:0 40px 90px -35px rgba(20,34,45,.45);\n  --hairline:rgba(20,34,45,.10);\n  --hairline-light:rgba(244,241,234,.14);\n}<\/p>\n<p>\/* ===================== RESET LIGERO (scoped) ===================== *\/\n.ubk *,\n.ubk *::before,\n.ubk *::after{ box-sizing:border-box; }<\/p>\n<p>.ubk{\n  margin:0;\n  font-family:var(--font-body);\n  color:var(--text-ink);\n  background:var(--bone-50);\n  -webkit-font-smoothing:antialiased;\n  text-rendering:optimizeLegibility;\n  line-height:1.55;\n  overflow-x:clip;\n}\n.ubk img{ display:block; max-width:100%; }\n.ubk a{ color:inherit; text-decoration:none; }\n.ubk button{ font-family:inherit; cursor:pointer; border:none; background:none; }<\/p>\n<p>\/* Grano de pel\u00edcula fijo (rendimiento: fixed + pointer-events none) *\/\n.ubk-grain{\n  position:fixed; inset:0; z-index:5; pointer-events:none;\n  opacity:.035; mix-blend-mode:multiply;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n}<\/p>\n<p>\/* ===================== UTILIDADES ===================== *\/\n.ubk .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }\n.ubk .eyebrow{\n  display:inline-flex; align-items:center; gap:.55rem;\n  font-family:var(--font-body); font-weight:600;\n  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;\n  color:var(--steel-600);\n  padding:.4rem .85rem; border-radius:var(--r-pill);\n  background:rgba(76,130,166,.08);\n  border:1px solid rgba(76,130,166,.16);\n}\n.ubk .eyebrow.on-dark{ color:var(--steel-400); background:rgba(107,160,196,.10); border-color:rgba(107,160,196,.20); }\n.ubk .eyebrow::before{ content:\"\"; width:6px; height:6px; border-radius:50%; background:currentColor; }<\/p>\n<p>.ubk .display{\n  font-family:var(--font-display); font-weight:600;\n  line-height:1.02; letter-spacing:-.025em; margin:0;\n}\n.ubk h2.display{ font-size:clamp(2rem, 5vw, 3.6rem); }\n.ubk .lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--text-soft); font-weight:400; max-width:46ch; }\n.ubk .serif{ font-family:var(--font-serif); font-weight:400; font-style:normal; }<\/p>\n<p>\/* Bot\u00f3n isla con icono anidado (button-in-button) *\/\n.ubk .btn{\n  position:relative; display:inline-flex; align-items:center; gap:.85rem;\n  padding:.9rem 1rem .9rem 1.5rem; border-radius:var(--r-pill);\n  font-family:var(--font-display); font-weight:500; font-size:.98rem; letter-spacing:-.01em;\n  transition:transform .5s var(--ease-spring), background .5s var(--ease-spring), box-shadow .5s var(--ease-spring);\n  will-change:transform;\n}\n.ubk .btn--solid{ background:var(--brand-700); color:var(--on-dark); box-shadow:var(--shadow-soft); }\n.ubk .btn--solid:hover{ background:var(--ink-800); transform:translateY(-2px); box-shadow:var(--shadow-float); }\n.ubk .btn--accent{ background:var(--steel-500); color:#fff; box-shadow:0 18px 40px -18px var(--steel-glow); }\n.ubk .btn--accent:hover{ background:var(--steel-600); transform:translateY(-2px); }\n.ubk .btn--ghost{ background:transparent; color:var(--text-ink); box-shadow:inset 0 0 0 1px var(--hairline); }\n.ubk .btn--ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--hairline), var(--shadow-soft); }\n.ubk .btn:active{ transform:scale(.98); }\n.ubk .btn__ic{\n  width:2.1rem; height:2.1rem; border-radius:50%;\n  display:grid; place-items:center;\n  background:rgba(255,255,255,.14);\n  transition:transform .5s var(--ease-spring), background .5s var(--ease-spring);\n}\n.ubk .btn--ghost .btn__ic{ background:rgba(20,34,45,.06); }\n.ubk .btn:hover .btn__ic{ transform:translate(3px,-1px) scale(1.06); }\n.ubk .btn__ic svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.5; fill:none; }<\/p>\n<p>\/* ===================== HEADER (full-width fluido) ===================== *\/\n.ubk-header{\n  position:fixed; inset:0 0 auto 0; z-index:60;\n  display:flex; align-items:center;\n  height:78px;\n  background:rgba(27,43,56,.12);\n  backdrop-filter:blur(14px) saturate(140%);\n  -webkit-backdrop-filter:blur(14px) saturate(140%);\n  border-bottom:1px solid transparent;\n  transition:background .6s var(--ease-spring), height .6s var(--ease-spring), border-color .6s var(--ease-spring);\n}\n.ubk-header.is-solid{\n  background:rgba(14,26,35,.86);\n  height:66px;\n  border-bottom:1px solid var(--hairline-light);\n}\n.ubk-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }<\/p>\n<p>.ubk-logo{ display:flex; align-items:center; gap:.7rem; }\n.ubk-logo svg{ width:34px; height:42px; }\n.ubk-logo__txt{ display:flex; flex-direction:column; line-height:1; }\n.ubk-logo__txt b{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.02em; color:var(--on-dark); }\n.ubk-logo__txt span{ font-size:.56rem; letter-spacing:.42em; text-transform:uppercase; color:var(--steel-400); margin-top:3px; }<\/p>\n<p>.ubk-nav{ display:flex; align-items:center; gap:.35rem; }\n.ubk-nav a{\n  position:relative; padding:.55rem .9rem; border-radius:var(--r-pill);\n  font-size:.86rem; font-weight:500; color:var(--on-dark-soft);\n  transition:color .4s var(--ease-spring), background .4s var(--ease-spring);\n}\n.ubk-nav a:hover{ color:var(--on-dark); background:rgba(244,241,234,.07); }\n.ubk-header__cta{ display:flex; align-items:center; gap:.6rem; }<\/p>\n<p>\/* Hamburguesa morphing *\/\n.ubk-burger{ display:none; width:46px; height:46px; border-radius:50%; position:relative; background:rgba(244,241,234,.08); }\n.ubk-burger span{\n  position:absolute; left:14px; width:18px; height:1.6px; background:var(--on-dark); border-radius:2px;\n  transition:transform .5s var(--ease-spring), opacity .3s var(--ease-spring);\n}\n.ubk-burger span:nth-child(1){ top:19px; }\n.ubk-burger span:nth-child(2){ top:25px; }\n.ubk-burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }\n.ubk-burger.is-open span:nth-child(2){ transform:translateY(0) rotate(-45deg); }<\/p>\n<p>\/* Overlay m\u00f3vil glass *\/\n.ubk-mobile{\n  position:fixed; inset:0; z-index:55; display:flex; flex-direction:column;\n  justify-content:center; padding:var(--pad-x);\n  background:rgba(14,26,35,.86);\n  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);\n  opacity:0; visibility:hidden; transition:opacity .6s var(--ease-spring), visibility .6s;\n}\n.ubk-mobile.is-open{ opacity:1; visibility:visible; }\n.ubk-mobile a{\n  font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,7vw,3rem);\n  color:var(--on-dark); padding:.35rem 0; letter-spacing:-.02em;\n  opacity:0; transform:translateY(40px); filter:blur(8px);\n  transition:opacity .7s var(--ease-out-soft), transform .7s var(--ease-out-soft), filter .7s var(--ease-out-soft);\n}\n.ubk-mobile.is-open a{ opacity:1; transform:none; filter:blur(0); }\n.ubk-mobile.is-open a:nth-child(1){ transition-delay:.10s; }\n.ubk-mobile.is-open a:nth-child(2){ transition-delay:.16s; }\n.ubk-mobile.is-open a:nth-child(3){ transition-delay:.22s; }\n.ubk-mobile.is-open a:nth-child(4){ transition-delay:.28s; }\n.ubk-mobile.is-open a:nth-child(5){ transition-delay:.34s; }\n.ubk-mobile.is-open a:nth-child(6){ transition-delay:.40s; }<\/p>\n<p>\/* ===================== HERO SCROLLYTELLING ===================== *\/\n.ubk-hero{ position:relative; height:520vh; background:var(--ink-900); }\n.ubk-hero__sticky{\n  position:sticky; top:0; height:100dvh; overflow:hidden;\n  display:grid; place-items:center;\n}\n.ubk-hero__video{\n  position:absolute; inset:0; width:100%; height:100%;\n  object-fit:cover; z-index:1;\n  filter:saturate(106%) contrast(104%);\n}\n\/* Overlays de legibilidad *\/\n.ubk-hero__scrim{\n  position:absolute; inset:0; z-index:2; pointer-events:none;\n  background:\n    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(14,26,35,.35) 100%),\n    linear-gradient(180deg, rgba(14,26,35,.55) 0%, rgba(14,26,35,.10) 28%, rgba(14,26,35,.18) 60%, rgba(14,26,35,.78) 100%);\n}\n\/* Loader \/ poster *\/\n.ubk-hero__loader{\n  position:absolute; inset:0; z-index:4; display:grid; place-items:center;\n  background:linear-gradient(160deg,#0E1A23,#1B2B38 60%,#0E1A23);\n  transition:opacity .9s var(--ease-spring), visibility .9s;\n}\n.ubk-hero__loader.is-hidden{ opacity:0; visibility:hidden; }\n.ubk-spin{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(244,241,234,.18); border-top-color:var(--steel-400); animation:ubk-spin 1s linear infinite; }\n@keyframes ubk-spin{ to{ transform:rotate(360deg); } }<\/p>\n<p>\/* Escenas de texto sobre el video *\/\n.ubk-scenes{ position:absolute; inset:0; z-index:3; pointer-events:none; }\n.ubk-scene{\n  position:absolute; width:min(90vw,var(--maxw)); left:50%; top:50%;\n  transform:translate(-50%,-50%);\n  padding-inline:var(--pad-x);\n  opacity:0; will-change:transform,opacity;\n}\n.ubk-scene h2{\n  font-family:var(--font-display); font-weight:600; color:var(--on-dark);\n  font-size:clamp(2.1rem,6.5vw,5rem); line-height:1.0; letter-spacing:-.03em;\n  text-shadow:0 12px 50px rgba(0,0,0,.5);\n  max-width:18ch;\n}\n.ubk-scene p{ color:var(--on-dark-soft); font-size:clamp(1rem,1.7vw,1.35rem); max-width:40ch; margin-top:1.1rem; text-shadow:0 6px 24px rgba(0,0,0,.5); }\n.ubk-scene .serif{ color:var(--steel-400); font-style:italic; }\n.ubk-scene[data-align=\"left\"]{ text-align:left; left:max(var(--pad-x), 8%); transform:translate(0,-50%); }\n.ubk-scene[data-align=\"right\"]{ text-align:right; left:auto; right:max(var(--pad-x), 8%); transform:translate(0,-50%); }\n.ubk-scene[data-align=\"right\"] h2, .ubk-scene[data-align=\"right\"] p{ margin-left:auto; }\n.ubk-scene[data-align=\"center\"]{ text-align:center; }\n.ubk-scene[data-align=\"center\"] h2{ max-width:20ch; margin-inline:auto; }\n.ubk-scene[data-align=\"center\"] p{ margin-inline:auto; }<\/p>\n<p>\/* Escena fragmentada (texto 4) *\/\n.ubk-scene--split .frag{ display:block; }\n.ubk-scene--split .frag.a{ text-align:left; }\n.ubk-scene--split .frag.b{ text-align:right; }\n.ubk-scene--split .frag.c{ text-align:center; }<\/p>\n<p>\/* Indicador de scroll *\/\n.ubk-cue{\n  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:4;\n  display:flex; flex-direction:column; align-items:center; gap:.6rem;\n  color:var(--on-dark-soft); pointer-events:none;\n  transition:opacity .6s var(--ease-spring);\n}\n.ubk-cue span{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; }\n.ubk-cue__mouse{ width:22px; height:34px; border:1.5px solid rgba(244,241,234,.4); border-radius:14px; position:relative; }\n.ubk-cue__mouse::after{ content:\"\"; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px; background:var(--steel-400); transform:translateX(-50%); animation:ubk-wheel 1.7s var(--ease-spring) infinite; }\n@keyframes ubk-wheel{ 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1; transform:translate(-50%,8px)} 100%{opacity:0; transform:translate(-50%,12px)} }<\/p>\n<p>\/* Riel de progreso del hero *\/\n.ubk-progress{ position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:4; height:120px; width:2px; background:rgba(244,241,234,.16); border-radius:2px; overflow:hidden; }\n.ubk-progress__bar{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--steel-400); }<\/p>\n<p>\/* ===================== SECCIONES DE CONTENIDO ===================== *\/\n.ubk-section{ position:relative; padding-block:clamp(5rem,11vw,9rem); }\n.ubk-section--bone{ background:var(--bone-50); }\n.ubk-section--bone2{ background:var(--bone-100); }\n.ubk-section--ink{ background:var(--ink-900); color:var(--on-dark); }\n.ubk-section__head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem); }\n.ubk-section--ink .lead{ color:var(--on-dark-soft); }<\/p>\n<p>\/* Reveal por scroll *\/\n.ubk-reveal{ opacity:0; transform:translateY(38px); filter:blur(8px); transition:opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft), filter .9s var(--ease-out-soft); }\n.ubk-reveal.is-in{ opacity:1; transform:none; filter:blur(0); }\n.ubk-reveal.d1{ transition-delay:.08s; } .ubk-reveal.d2{ transition-delay:.16s; }\n.ubk-reveal.d3{ transition-delay:.24s; } .ubk-reveal.d4{ transition-delay:.32s; }<\/p>\n<p>\/* --- Manifiesto \/ band editorial --- *\/\n.ubk-manifesto{ background:var(--brand-700); color:var(--on-dark); padding-block:clamp(4.5rem,9vw,7.5rem); }\n.ubk-manifesto p{ font-family:var(--font-serif); font-weight:400; font-size:clamp(1.6rem,4vw,3rem); line-height:1.22; letter-spacing:-.01em; max-width:24ch; }\n.ubk-manifesto p em{ color:var(--steel-400); font-style:italic; }\n.ubk-manifesto .sig{ margin-top:2rem; font-family:var(--font-body); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-soft); }<\/p>\n<p>\/* --- Qui\u00e9nes somos: editorial split + stats --- *\/\n.ubk-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }\n.ubk-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }\n.ubk-stat{ \/* double-bezel *\/\n  background:rgba(20,34,45,.04); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:.5rem;\n}\n.ubk-stat__core{ background:#fff; border-radius:calc(var(--r-lg) - .5rem); padding:1.4rem 1.5rem; box-shadow:inset 0 1px 1px rgba(255,255,255,.6); }\n.ubk-stat b{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.03em; color:var(--brand-700); }\n.ubk-stat span{ font-size:.84rem; color:var(--text-soft); }\n.ubk-figure{ \/* double-bezel para imagen\/placeholder *\/\n  background:rgba(20,34,45,.05); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:.55rem; box-shadow:var(--shadow-soft);\n}\n.ubk-figure__core{ border-radius:calc(var(--r-xl) - .55rem); overflow:hidden; aspect-ratio:4\/5; position:relative; background:linear-gradient(150deg,var(--brand-600),var(--ink-900)); }\n.ubk-figure__core img{ width:100%; height:100%; object-fit:cover; }\n.ubk-ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--on-dark-soft); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }\n.ubk-ph svg{ width:54px; height:54px; opacity:.5; }<\/p>\n<p>\/* --- Tres capas (bento) --- *\/\n.ubk-bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.1rem; }\n.ubk-card{\n  background:rgba(20,34,45,.045); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:.6rem;\n  transition:transform .6s var(--ease-spring), box-shadow .6s var(--ease-spring);\n}\n.ubk-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-float); }\n.ubk-card__core{\n  position:relative; height:100%; border-radius:calc(var(--r-xl) - .6rem);\n  background:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.6);\n  padding:clamp(1.5rem,3vw,2.4rem); overflow:hidden;\n  display:flex; flex-direction:column; gap:.7rem;\n}\n.ubk-card--dark .ubk-card__core{ background:var(--brand-700); color:var(--on-dark); box-shadow:inset 0 1px 1px rgba(255,255,255,.08); }\n.ubk-card__num{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.2em; color:var(--steel-500); }\n.ubk-card h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.02em; margin:.2rem 0 0; }\n.ubk-card p{ color:var(--text-soft); font-size:.96rem; }\n.ubk-card--dark p{ color:var(--on-dark-soft); }\n.ubk-card ul{ list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }\n.ubk-card li{ font-size:.78rem; padding:.3rem .7rem; border-radius:var(--r-pill); background:rgba(76,130,166,.10); color:var(--steel-600); }\n.ubk-card--dark li{ background:rgba(107,160,196,.16); color:var(--steel-400); }\n.col-7{ grid-column:span 7; } .col-5{ grid-column:span 5; }\n.col-6{ grid-column:span 6; } .col-4{ grid-column:span 4; } .col-8{ grid-column:span 8; } .col-12{ grid-column:span 12; }<\/p>\n<p>\/* Glifo isom\u00e9trico decorativo en cards *\/\n.ubk-card__glyph{ position:absolute; right:-10px; bottom:-14px; width:130px; height:130px; opacity:.06; pointer-events:none; }\n.ubk-card--dark .ubk-card__glyph{ opacity:.12; }<\/p>\n<p>\/* --- Productos (e-commerce ready) --- *\/\n.ubk-products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; }\n.ubk-prod{ background:rgba(20,34,45,.045); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:.5rem; transition:transform .6s var(--ease-spring), box-shadow .6s var(--ease-spring); }\n.ubk-prod:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }\n.ubk-prod__media{ border-radius:calc(var(--r-lg) - .5rem); overflow:hidden; aspect-ratio:4\/3; background:linear-gradient(150deg,var(--brand-600),var(--ink-900)); position:relative; }\n.ubk-prod__tag{ position:absolute; top:.7rem; left:.7rem; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark); background:rgba(14,26,35,.4); backdrop-filter:blur(6px); padding:.3rem .6rem; border-radius:var(--r-pill); }\n.ubk-prod__body{ padding:1.1rem 1rem .9rem; }\n.ubk-prod h4{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; margin:0 0 .25rem; letter-spacing:-.01em; }\n.ubk-prod p{ font-size:.84rem; color:var(--text-soft); margin:0 0 .9rem; }\n.ubk-prod__foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }\n\/* slot de precio reservado para e-commerce futuro *\/\n.ubk-prod__price{ font-family:var(--font-display); font-weight:600; color:var(--brand-700); font-size:1rem; }\n.ubk-prod__price small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }\n.ubk-prod__cart{ \/* boton deshabilitado (preparado, oculto a futuro activar) *\/\n  width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;\n  background:rgba(20,34,45,.06); color:var(--text-faint); cursor:not-allowed;\n}\n.ubk-prod__cart svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.5; fill:none; }<\/p>\n<p>\/* --- Antes \/ Despu\u00e9s (slider) --- *\/\n.ubk-ba{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16\/9; user-select:none; box-shadow:var(--shadow-soft); background:var(--ink-800); }\n.ubk-ba__layer{ position:absolute; inset:0; }\n.ubk-ba__layer img{ width:100%; height:100%; object-fit:cover; }\n.ubk-ba__after{ clip-path:inset(0 0 0 50%); }\n.ubk-ba__lbl{ position:absolute; bottom:1rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark); background:rgba(14,26,35,.45); backdrop-filter:blur(6px); padding:.35rem .7rem; border-radius:var(--r-pill); }\n.ubk-ba__lbl.l{ left:1rem; } .ubk-ba__lbl.r{ right:1rem; }\n.ubk-ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--on-dark); transform:translateX(-50%); }\n.ubk-ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:var(--on-dark); display:grid; place-items:center; box-shadow:var(--shadow-soft); cursor:ew-resize; }\n.ubk-ba__grip svg{ width:20px; height:20px; stroke:var(--brand-700); stroke-width:1.6; fill:none; }\n.ubk-ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }\n.ubk-ph--ba{ position:absolute; inset:0; display:grid; place-items:center; color:var(--on-dark-soft); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }<\/p>\n<p>\/* --- Galer\u00eda + lightbox --- *\/\n.ubk-gallery{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:200px; gap:1rem; }\n.ubk-gallery__item{ overflow:hidden; border-radius:var(--r-lg); position:relative; cursor:pointer; background:linear-gradient(150deg,var(--brand-600),var(--ink-900)); }\n.ubk-gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-spring); }\n.ubk-gallery__item:hover img{ transform:scale(1.06); }\n.ubk-gallery__item::after{ content:\"\"; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(14,26,35,.55)); opacity:0; transition:opacity .5s var(--ease-spring); }\n.ubk-gallery__item:hover::after{ opacity:1; }\n.ubk-gallery__cap{ position:absolute; left:1rem; bottom:1rem; z-index:2; color:var(--on-dark); font-size:.8rem; letter-spacing:.04em; opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease-spring),transform .5s var(--ease-spring); }\n.ubk-gallery__item:hover .ubk-gallery__cap{ opacity:1; transform:none; }\n.g-tall{ grid-row:span 2; } .g-wide{ grid-column:span 6; } .g-6{ grid-column:span 6; } .g-4{ grid-column:span 4; } .g-8{ grid-column:span 8; }\n.ubk-ph--g{ position:absolute; inset:0; display:grid; place-items:center; color:var(--on-dark-soft); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }<\/p>\n<p>.ubk-lightbox{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:5vw;\n  background:rgba(8,15,20,.9); backdrop-filter:blur(20px);\n  opacity:0; visibility:hidden; transition:opacity .5s var(--ease-spring), visibility .5s; }\n.ubk-lightbox.is-open{ opacity:1; visibility:visible; }\n.ubk-lightbox img{ max-width:100%; max-height:84vh; border-radius:var(--r-md); box-shadow:var(--shadow-float); }\n.ubk-lightbox__x{ position:absolute; top:5vw; right:5vw; width:48px; height:48px; border-radius:50%; background:rgba(244,241,234,.1); color:var(--on-dark); display:grid; place-items:center; }\n.ubk-lightbox__x svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.6; }<\/p>\n<p>\/* --- Proceso (timeline) --- *\/\n.ubk-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; counter-reset:step; }\n.ubk-step{ position:relative; padding-top:2.6rem; }\n.ubk-step::before{ counter-increment:step; content:\"0\" counter(step); position:absolute; top:0; left:0; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--steel-500); letter-spacing:.1em; }\n.ubk-step::after{ content:\"\"; position:absolute; top:6px; left:2.6rem; right:0; height:1px; background:var(--hairline); }\n.ubk-step:last-child::after{ display:none; }\n.ubk-step h4{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:.2rem 0 .4rem; }\n.ubk-step p{ font-size:.9rem; color:var(--text-soft); }<\/p>\n<p>\/* --- CTA band --- *\/\n.ubk-cta{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--brand-700),var(--ink-900)); color:var(--on-dark); border-radius:clamp(1.4rem,3vw,var(--r-xl)); padding:clamp(2.5rem,6vw,5rem); text-align:center; }\n.ubk-cta h2{ font-size:clamp(2rem,5vw,3.6rem); }\n.ubk-cta .lead{ color:var(--on-dark-soft); margin:1.2rem auto 2rem; }\n.ubk-cta__row{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }\n.ubk-cta__glyph{ position:absolute; opacity:.08; pointer-events:none; }\n.ubk-cta__glyph.a{ left:-40px; top:-40px; width:200px; transform:rotate(8deg); }\n.ubk-cta__glyph.b{ right:-30px; bottom:-50px; width:240px; transform:rotate(-12deg); }<\/p>\n<p>\/* --- Contacto \/ formulario --- *\/\n.ubk-contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }\n.ubk-form{ background:rgba(20,34,45,.04); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:.6rem; }\n.ubk-form__core{ background:#fff; border-radius:calc(var(--r-xl) - .6rem); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:inset 0 1px 1px rgba(255,255,255,.6); }\n.ubk-field{ margin-bottom:1.1rem; }\n.ubk-field label{ display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.45rem; font-weight:600; }\n.ubk-field input, .ubk-field textarea, .ubk-field select{\n  width:100%; font-family:var(--font-body); font-size:.95rem; color:var(--text-ink);\n  background:var(--bone-50); border:1px solid transparent; border-radius:var(--r-md);\n  padding:.85rem 1rem; transition:border-color .4s var(--ease-spring), background .4s var(--ease-spring); outline:none;\n}\n.ubk-field input:focus, .ubk-field textarea:focus, .ubk-field select:focus{ border-color:var(--steel-400); background:#fff; }\n.ubk-field textarea{ resize:vertical; min-height:120px; }\n.ubk-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }\n.ubk-contact__info{ display:flex; flex-direction:column; gap:1.4rem; }\n.ubk-info-item{ display:flex; gap:1rem; align-items:flex-start; }\n.ubk-info-item__ic{ flex:none; width:44px; height:44px; border-radius:var(--r-md); background:rgba(76,130,166,.10); color:var(--steel-600); display:grid; place-items:center; }\n.ubk-info-item__ic svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; }\n.ubk-info-item b{ font-family:var(--font-display); font-weight:600; font-size:1rem; }\n.ubk-info-item span{ display:block; color:var(--text-soft); font-size:.92rem; }\n.ubk-map{ margin-top:.5rem; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hairline); aspect-ratio:16\/8; background:var(--bone-100); display:grid; place-items:center; color:var(--text-faint); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }<\/p>\n<p>\/* --- Footer --- *\/\n.ubk-footer{ background:var(--ink-900); color:var(--on-dark-soft); padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem; }\n.ubk-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:3rem; border-bottom:1px solid var(--hairline-light); }\n.ubk-footer h5{ font-family:var(--font-display); font-weight:600; color:var(--on-dark); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }\n.ubk-footer a{ display:block; padding:.3rem 0; font-size:.92rem; transition:color .4s var(--ease-spring); }\n.ubk-footer a:hover{ color:var(--on-dark); }\n.ubk-footer__brand p{ max-width:34ch; font-size:.92rem; margin:1rem 0 0; }\n.ubk-footer__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; font-size:.8rem; color:var(--text-faint); }<\/p>\n<p>\/* --- WhatsApp flotante + chat placeholder --- *\/\n.ubk-wa{\n  position:fixed; right:22px; bottom:22px; z-index:70;\n  width:60px; height:60px; border-radius:50%;\n  background:#25D366; color:#fff; display:grid; place-items:center;\n  box-shadow:0 18px 40px -12px rgba(37,211,102,.5);\n  transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);\n}\n.ubk-wa:hover{ transform:translateY(-3px) scale(1.05); }\n.ubk-wa svg{ width:30px; height:30px; fill:#fff; }\n.ubk-wa__pulse{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.45); animation:ubk-pulse 2.4s var(--ease-spring) infinite; }\n@keyframes ubk-pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45); } 70%{ box-shadow:0 0 0 18px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }<\/p>\n<p>\/* ===================== RESPONSIVE ===================== *\/\n@media (max-width:1024px){\n  .ubk-footer__top{ grid-template-columns:1fr 1fr; }\n  .ubk-steps{ grid-template-columns:1fr 1fr; }\n  .ubk-step::after{ display:none; }\n}\n@media (max-width:768px){\n  .ubk-nav, .ubk-header__cta .btn{ display:none; }\n  .ubk-burger{ display:block; }\n  .ubk-split, .ubk-contact{ grid-template-columns:1fr; }\n  .ubk-bento .ubk-card, .ubk-gallery__item{ grid-column:1 \/ -1 !important; }\n  .ubk-bento{ grid-template-columns:1fr; }\n  .ubk-gallery{ grid-template-columns:1fr; grid-auto-rows:240px; }\n  .g-tall{ grid-row:span 1; }\n  .ubk-stats{ grid-template-columns:1fr 1fr; }\n  .ubk-steps, .ubk-footer__top{ grid-template-columns:1fr; }\n  .ubk-form__row{ grid-template-columns:1fr; }\n  .ubk-progress{ display:none; }\n  .ubk-scene[data-align=\"left\"], .ubk-scene[data-align=\"right\"]{ left:50%; right:auto; transform:translate(-50%,-50%); text-align:center; width:90vw; }\n  .ubk-scene[data-align=\"right\"] h2, .ubk-scene[data-align=\"right\"] p{ margin-inline:auto; }\n  .ubk-hero{ height:420vh; }\n}<\/p>\n<p>\/* ===================== prefers-reduced-motion ===================== *\/\n@media (prefers-reduced-motion:reduce){\n  .ubk *{ animation-duration:.001ms !important; transition-duration:.12s !important; }\n  .ubk-hero{ height:auto; }\n  .ubk-hero__sticky{ position:relative; height:100dvh; }\n  .ubk-scene{ position:relative; opacity:1 !important; transform:none !important; inset:auto; left:auto !important; top:auto; width:100%; margin-block:18vh; }\n  .ubk-scenes{ position:relative; }\n  .ubk-cue, .ubk-progress{ display:none; }\n}<\/p>\n<\/style>\n<div class=\"ubk\">\n<div class=\"ubk-grain\" aria-hidden=\"true\"><\/div>\n<p>  <span id=\"ubk-top-sentinel\" aria-hidden=\"true\"><\/span><\/p>\n<p>  <!-- ===================== HEADER ===================== --><\/p>\n<header class=\"ubk-header\">\n<div class=\"wrap\">\n      <a href=\"#inicio\" class=\"ubk-logo\" aria-label=\"Urbanikos Soluciones \u2014 Inicio\"><br \/>\n        <!-- Isotipo isom\u00e9trico (bloques de construcci\u00f3n) --><br \/>\n        <svg viewBox=\"0 0 150 150\" aria-hidden=\"true\"><\/p>\n<style>\n            .cf-top{fill:#6BA0C4}.cf-left{fill:#4C82A6}.cf-right{fill:#2E4655}\n          <\/style>\n<p>          <!-- cubo inferior izquierdo -->\n          <g transform=\"translate(40,78)\">\n            <polygon class=\"cf-top\"   points=\"0,0 28,16 0,32 -28,16\"\/>\n            <polygon class=\"cf-left\"  points=\"-28,16 0,32 0,64 -28,48\"\/>\n            <polygon class=\"cf-right\" points=\"28,16 0,32 0,64 28,48\"\/>\n          <\/g>\n          <!-- cubo superior izquierdo -->\n          <g transform=\"translate(40,30)\">\n            <polygon class=\"cf-top\"   points=\"0,0 28,16 0,32 -28,16\"\/>\n            <polygon class=\"cf-left\"  points=\"-28,16 0,32 0,64 -28,48\"\/>\n            <polygon class=\"cf-right\" points=\"28,16 0,32 0,64 28,48\"\/>\n          <\/g>\n          <!-- cubo superior derecho -->\n          <g transform=\"translate(96,54)\">\n            <polygon class=\"cf-top\"   points=\"0,0 28,16 0,32 -28,16\"\/>\n            <polygon class=\"cf-left\"  points=\"-28,16 0,32 0,64 -28,48\"\/>\n            <polygon class=\"cf-right\" points=\"28,16 0,32 0,64 28,48\"\/>\n          <\/g>\n        <\/svg><br \/>\n        <span class=\"ubk-logo__txt\"><b>URBANIKOS<\/b><span>Soluciones<\/span><\/span><br \/>\n      <\/a><\/p>\n<nav class=\"ubk-nav\" aria-label=\"Principal\">\n        <a href=\"#inicio\">Inicio<\/a><br \/>\n        <a href=\"#nosotros\">Qui\u00e9nes somos<\/a><br \/>\n        <a href=\"#productos\">Productos y materiales<\/a><br \/>\n        <a href=\"#diseno\">Dise\u00f1o de interiores<\/a><br \/>\n        <a href=\"#galeria\">Galer\u00eda<\/a><br \/>\n        <a href=\"#contacto\">Cont\u00e1ctenos<\/a><br \/>\n      <\/nav>\n<div class=\"ubk-header__cta\">\n        <a href=\"#contacto\" class=\"btn btn--accent\">Cotizar<br \/>\n          <span class=\"btn__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 17 17 7M9 7h8v8\"\/><\/svg><\/span><br \/>\n        <\/a><br \/>\n        <button class=\"ubk-burger\" aria-label=\"Abrir men\u00fa\" aria-expanded=\"false\"><br \/>\n          <span><\/span><span><\/span><br \/>\n        <\/button>\n      <\/div>\n<\/p><\/div>\n<\/header>\n<p>  <!-- ===================== MEN\u00da M\u00d3VIL ===================== --><\/p>\n<nav class=\"ubk-mobile\" aria-label=\"Men\u00fa m\u00f3vil\">\n    <a href=\"#inicio\">Inicio<\/a><br \/>\n    <a href=\"#nosotros\">Qui\u00e9nes somos<\/a><br \/>\n    <a href=\"#productos\">Productos y materiales<\/a><br \/>\n    <a href=\"#diseno\">Dise\u00f1o de interiores<\/a><br \/>\n    <a href=\"#galeria\">Galer\u00eda<\/a><br \/>\n    <a href=\"#contacto\">Cont\u00e1ctenos<\/a><br \/>\n  <\/nav>\n<p>  <!-- ===================== HERO SCROLLYTELLING ===================== --><\/p>\n<section class=\"ubk-hero\" id=\"inicio\">\n<div class=\"ubk-hero__sticky\">\n<p>      <!-- VIDEO: reemplaza el src por la URL de WordPress.\n           Para previsualizar localmente, copia tu .mp4 como https:\/\/urbanikossoluciones.com\/wp-content\/uploads\/2026\/06\/hero.mp4 --><br \/>\n      <video class=\"ubk-hero__video\" muted playsinline preload=\"auto\" \ndata-mobile-src=\"https:\/\/urbanikossoluciones.com\/wp-content\/uploads\/2026\/06\/hero-movil.mp4\"\n             poster=\"https:\/\/urbanikossoluciones.com\/wp-content\/uploads\/2026\/06\/hero-poster.jpg\"><source src=\"https:\/\/urbanikossoluciones.com\/wp-content\/uploads\/2026\/06\/hero.mp4\" type=\"video\/mp4\"><!-- En Elementor:<source src=\"https:\/\/urbanikossoluciones.com\/wp-content\/uploads\/AAAA\/MM\/hero.mp4\" type=\"video\/mp4\">--><\/video><\/p>\n<div class=\"ubk-hero__scrim\" aria-hidden=\"true\"><\/div>\n<p>      <!-- Loader \/ primer frame --><\/p>\n<div class=\"ubk-hero__loader\">\n<div class=\"ubk-spin\" role=\"status\" aria-label=\"Cargando\"><\/div>\n<\/div>\n<p>      <!-- Escenas de texto (progreso 0..1 v\u00eda data-start \/ data-end) --><\/p>\n<div class=\"ubk-scenes\">\n<article class=\"ubk-scene\" data-align=\"center\" data-start=\"-0.05\" data-end=\"0.20\">\n<h2>De obra gris a un espacio donde <span class=\"serif\">querer vivir<\/span>.<\/h2>\n<p>Materiales, instalaci\u00f3n y dise\u00f1o bajo un mismo techo. Sin coordinar diez proveedores. Sin contratiempos.<\/p>\n<\/article>\n<article class=\"ubk-scene\" data-align=\"left\" data-start=\"0.18\" data-end=\"0.42\">\n<h2>Una base s\u00f3lida y confiable.<\/h2>\n<p>Drywall, PVC, Superboard y tuber\u00eda hidrosanitaria seleccionados con criterio t\u00e9cnico. La estructura correcta para que lo que viene encima dure.<\/p>\n<\/article>\n<article class=\"ubk-scene\" data-align=\"right\" data-start=\"0.40\" data-end=\"0.64\">\n<h2>Instalado por quienes responden.<\/h2>\n<p>No solo vendemos el material: lo instalamos con garant\u00eda y respaldo profesional. Un equipo multidisciplinar detr\u00e1s de cada acabado.<\/p>\n<\/article>\n<article class=\"ubk-scene ubk-scene--split\" data-align=\"center\" data-start=\"0.62\" data-end=\"0.84\">\n<h2>\n            <span class=\"frag a\">Laminados.<\/span><br \/>\n            <span class=\"frag c serif\">Papel de colgadura.<\/span><br \/>\n            <span class=\"frag b\">Paredes que transforman.<\/span><br \/>\n          <\/h2>\n<p>La capa final: dise\u00f1o de interiores que convierte un espacio terminado en uno con car\u00e1cter.<\/p>\n<\/article>\n<article class=\"ubk-scene\" data-align=\"center\" data-start=\"0.84\" data-end=\"1.0\">\n<h2>Hablemos de <span class=\"serif\">tu proyecto<\/span>.<\/h2>\n<p>Cu\u00e9ntanos en qu\u00e9 etapa est\u00e1s. Te acompa\u00f1amos desde el primer muro hasta el \u00faltimo detalle.<\/p>\n<\/article><\/div>\n<p>      <!-- Indicador de scroll --><\/p>\n<div class=\"ubk-cue\"><span>Desliza<\/span><\/p>\n<div class=\"ubk-cue__mouse\"><\/div>\n<\/div>\n<p>      <!-- Riel de progreso --><\/p>\n<div class=\"ubk-progress\">\n<div class=\"ubk-progress__bar\"><\/div>\n<\/div><\/div>\n<\/section>\n<p>  <!-- ===================== MANIFIESTO ===================== --><\/p>\n<section class=\"ubk-manifesto\">\n<div class=\"wrap ubk-reveal\">\n      <span class=\"eyebrow on-dark\">Nuestra promesa<\/span><\/p>\n<p style=\"margin-top:1.5rem\">Creemos que terminar una obra deber\u00eda dar <em>tranquilidad<\/em>, no m\u00e1s preocupaciones. Por eso reunimos material, mano de obra y dise\u00f1o en un solo equipo que responde.<\/p>\n<div class=\"sig\">Urbanikos Soluciones \u2014 Bogot\u00e1, Colombia<\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== QUI\u00c9NES SOMOS ===================== --><\/p>\n<section class=\"ubk-section ubk-section--bone\" id=\"nosotros\">\n<div class=\"wrap\">\n<div class=\"ubk-split\">\n<div class=\"ubk-reveal\">\n          <span class=\"eyebrow\">Qui\u00e9nes somos<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem\">Una empresa formal, <span class=\"serif\" style=\"color:var(--steel-600)\">constituida<\/span> y con respaldo.<\/h2>\n<p class=\"lead\" style=\"margin-top:1.2rem\">Nacimos como la l\u00ednea de servicios de Urbanikos para resolver algo que muchos sufren: llevar una construcci\u00f3n de obra gris a obra blanca terminada, sin tener que buscar un proveedor distinto para cada cosa.<\/p>\n<p style=\"margin-top:1rem; color:var(--text-soft); max-width:48ch\">Reunimos un equipo multidisciplinar \u2014materiales, instalaci\u00f3n e interiorismo\u2014 bajo est\u00e1ndares de calidad y garant\u00eda. Honestidad, cercan\u00eda y compromiso no son adornos: son la forma en que trabajamos.<\/p>\n<div class=\"ubk-stats\">\n<div class=\"ubk-stat ubk-reveal d1\">\n<div class=\"ubk-stat__core\"><b>3<\/b><span>frentes en uno: material, instalaci\u00f3n y dise\u00f1o<\/span><\/div>\n<\/div>\n<div class=\"ubk-stat ubk-reveal d2\">\n<div class=\"ubk-stat__core\"><b>100%<\/b><span>insumos e instalaci\u00f3n con garant\u00eda<\/span><\/div>\n<\/div>\n<div class=\"ubk-stat ubk-reveal d3\">\n<div class=\"ubk-stat__core\"><b>+6<\/b><span>l\u00edneas de producto y acabado<\/span><\/div>\n<\/div>\n<div class=\"ubk-stat ubk-reveal d4\">\n<div class=\"ubk-stat__core\"><b>1<\/b><span>solo interlocutor para tu obra<\/span><\/div>\n<\/div><\/div>\n<\/p><\/div>\n<div class=\"ubk-reveal d2\">\n<div class=\"ubk-figure\">\n<div class=\"ubk-figure__core\">\n              <!-- Reemplaza por foto del equipo \/ obra --><\/p>\n<div class=\"ubk-ph\">\n<div style=\"text-align:center\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"><path d=\"M3 21V8l9-5 9 5v13M3 21h18M9 21v-6h6v6\"\/><\/svg><\/p>\n<div style=\"margin-top:.8rem\">Foto de equipo \/ obra<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== SOLUCIONES INTEGRALES (BENTO) ===================== --><\/p>\n<section class=\"ubk-section ubk-section--bone2\" id=\"soluciones\">\n<div class=\"wrap\">\n<div class=\"ubk-section__head ubk-reveal\">\n        <span class=\"eyebrow\">C\u00f3mo lo hacemos<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem\">Tres capas. Un solo responsable.<\/h2>\n<p class=\"lead\" style=\"margin-top:1rem\">El recorrido completo de tu acabado, sin vac\u00edos entre proveedores.<\/p>\n<\/p><\/div>\n<div class=\"ubk-bento\">\n<div class=\"ubk-card col-7 ubk-reveal\">\n<div class=\"ubk-card__core\">\n            <span class=\"ubk-card__num\">01 \u2014 Materiales<\/span><\/p>\n<h3>La base correcta, sin improvisar.<\/h3>\n<p>Seleccionamos insumos por desempe\u00f1o, no por precio de g\u00f3ndola. Lo que sostiene tu obra tiene que durar tanto como ella.<\/p>\n<ul>\n<li>Drywall<\/li>\n<li>PVC<\/li>\n<li>Superboard<\/li>\n<li>Tuber\u00eda hidrosanitaria<\/li>\n<li>Pintura<\/li>\n<li>Yeso<\/li>\n<\/ul>\n<p>            <svg class=\"ubk-card__glyph\" viewBox=\"0 0 150 150\" aria-hidden=\"true\"><\/p>\n<style>.g1{fill:#1B2B38}<\/style>\n<p><g transform=\"translate(75,40)\"><polygon class=\"g1\" points=\"0,0 40,23 0,46 -40,23\"\/><\/g><\/svg>\n          <\/div>\n<\/p><\/div>\n<div class=\"ubk-card col-5 ubk-reveal d1\">\n<div class=\"ubk-card__core ubk-card--dark\" style=\"background:var(--brand-700);color:var(--on-dark)\">\n            <span class=\"ubk-card__num\" style=\"color:var(--steel-400)\">02 \u2014 Instalaci\u00f3n<\/span><\/p>\n<h3 style=\"color:var(--on-dark)\">Manos que responden por su trabajo.<\/h3>\n<p style=\"color:var(--on-dark-soft)\">Sistemas livianos, servicios hidrosanitarios y acabados instalados con garant\u00eda. Si algo no queda bien, lo resolvemos.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"ubk-card col-12 ubk-reveal d2\">\n<div class=\"ubk-card__core\">\n            <span class=\"ubk-card__num\">03 \u2014 Dise\u00f1o de interiores<\/span><\/p>\n<h3>La capa que transforma el espacio.<\/h3>\n<p style=\"max-width:60ch\">Laminados de piso y techo, papel de colgadura y paredes sint\u00e9ticas decorativas. El detalle final que convierte un lugar terminado en un lugar con identidad.<\/p>\n<ul>\n<li>Laminados de piso<\/li>\n<li>Laminados de techo<\/li>\n<li>Papel de colgadura<\/li>\n<li>Paredes sint\u00e9ticas<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== PRODUCTOS (e-commerce ready) ===================== --><\/p>\n<section class=\"ubk-section ubk-section--bone\" id=\"productos\">\n<div class=\"wrap\">\n<div class=\"ubk-section__head ubk-reveal\">\n        <span class=\"eyebrow\">Productos y materiales<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem\">Cat\u00e1logo con criterio t\u00e9cnico.<\/h2>\n<p class=\"lead\" style=\"margin-top:1rem\">Hoy informativo. Ma\u00f1ana, tienda en l\u00ednea: cada ficha ya est\u00e1 pensada para convertirse en producto comprable.<\/p>\n<\/p><\/div>\n<div class=\"ubk-products\">\n        <!-- Estructura preparada para e-commerce: slot de precio + bot\u00f3n carrito deshabilitado --><\/p>\n<article class=\"ubk-prod ubk-reveal\">\n<div class=\"ubk-prod__media\"><span class=\"ubk-prod__tag\">Sistemas livianos<\/span><\/p>\n<div class=\"ubk-ph--ba\">Imagen Drywall<\/div>\n<\/div>\n<div class=\"ubk-prod__body\">\n<h4>Drywall<\/h4>\n<p>Muros y cielorrasos r\u00e1pidos, limpios y vers\u00e1tiles.<\/p>\n<div class=\"ubk-prod__foot\">\n              <span class=\"ubk-prod__price\"><small>Desde<\/small>Cotiza<\/span><br \/>\n              <button class=\"ubk-prod__cart\" disabled aria-label=\"Pr\u00f3ximamente\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 6h15l-1.5 9h-12zM6 6 5 3H2M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z\"\/><\/svg><\/button>\n            <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"ubk-prod ubk-reveal d1\">\n<div class=\"ubk-prod__media\"><span class=\"ubk-prod__tag\">Exteriores<\/span><\/p>\n<div class=\"ubk-ph--ba\">Imagen PVC<\/div>\n<\/div>\n<div class=\"ubk-prod__body\">\n<h4>PVC<\/h4>\n<p>Resistente a humedad, ideal para cielos y revestimientos.<\/p>\n<div class=\"ubk-prod__foot\">\n              <span class=\"ubk-prod__price\"><small>Desde<\/small>Cotiza<\/span><br \/>\n              <button class=\"ubk-prod__cart\" disabled aria-label=\"Pr\u00f3ximamente\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 6h15l-1.5 9h-12zM6 6 5 3H2M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z\"\/><\/svg><\/button>\n            <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"ubk-prod ubk-reveal d2\">\n<div class=\"ubk-prod__media\"><span class=\"ubk-prod__tag\">Alta resistencia<\/span><\/p>\n<div class=\"ubk-ph--ba\">Imagen Superboard<\/div>\n<\/div>\n<div class=\"ubk-prod__body\">\n<h4>Superboard<\/h4>\n<p>Placa de fibrocemento para zonas h\u00famedas y fachadas.<\/p>\n<div class=\"ubk-prod__foot\">\n              <span class=\"ubk-prod__price\"><small>Desde<\/small>Cotiza<\/span><br \/>\n              <button class=\"ubk-prod__cart\" disabled aria-label=\"Pr\u00f3ximamente\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 6h15l-1.5 9h-12zM6 6 5 3H2M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z\"\/><\/svg><\/button>\n            <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"ubk-prod ubk-reveal d3\">\n<div class=\"ubk-prod__media\"><span class=\"ubk-prod__tag\">Hidrosanitario<\/span><\/p>\n<div class=\"ubk-ph--ba\">Imagen Tuber\u00eda<\/div>\n<\/div>\n<div class=\"ubk-prod__body\">\n<h4>Tuber\u00eda hidrosanitaria<\/h4>\n<p>Redes de agua y desag\u00fce bien planteadas desde el inicio.<\/p>\n<div class=\"ubk-prod__foot\">\n              <span class=\"ubk-prod__price\"><small>Desde<\/small>Cotiza<\/span><br \/>\n              <button class=\"ubk-prod__cart\" disabled aria-label=\"Pr\u00f3ximamente\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 6h15l-1.5 9h-12zM6 6 5 3H2M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z\"\/><\/svg><\/button>\n            <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"ubk-prod ubk-reveal\">\n<div class=\"ubk-prod__media\"><span class=\"ubk-prod__tag\">Acabado<\/span><\/p>\n<div class=\"ubk-ph--ba\">Imagen Pintura<\/div>\n<\/div>\n<div class=\"ubk-prod__body\">\n<h4>Pintura<\/h4>\n<p>Color y protecci\u00f3n con el tono justo para cada espacio.<\/p>\n<div class=\"ubk-prod__foot\">\n              <span class=\"ubk-prod__price\"><small>Desde<\/small>Cotiza<\/span><br \/>\n              <button class=\"ubk-prod__cart\" disabled aria-label=\"Pr\u00f3ximamente\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 6h15l-1.5 9h-12zM6 6 5 3H2M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z\"\/><\/svg><\/button>\n            <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"ubk-prod ubk-reveal d1\">\n<div class=\"ubk-prod__media\"><span class=\"ubk-prod__tag\">Enlucido<\/span><\/p>\n<div class=\"ubk-ph--ba\">Imagen Yeso<\/div>\n<\/div>\n<div class=\"ubk-prod__body\">\n<h4>Yeso<\/h4>\n<p>Superficies lisas y parejas, listas para el acabado final.<\/p>\n<div class=\"ubk-prod__foot\">\n              <span class=\"ubk-prod__price\"><small>Desde<\/small>Cotiza<\/span><br \/>\n              <button class=\"ubk-prod__cart\" disabled aria-label=\"Pr\u00f3ximamente\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 6h15l-1.5 9h-12zM6 6 5 3H2M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z\"\/><\/svg><\/button>\n            <\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== DISE\u00d1O DE INTERIORES (antes\/despu\u00e9s) ===================== --><\/p>\n<section class=\"ubk-section ubk-section--bone2\" id=\"diseno\">\n<div class=\"wrap\">\n<div class=\"ubk-section__head ubk-reveal\">\n        <span class=\"eyebrow\">Dise\u00f1o de interiores<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem\">Del \u201cest\u00e1 terminado\u201d al <span class=\"serif\" style=\"color:var(--steel-600)\">\u201cno quiero irme\u201d<\/span>.<\/h2>\n<p class=\"lead\" style=\"margin-top:1rem\">Arrastra para ver c\u00f3mo un mismo espacio cambia de car\u00e1cter con el acabado correcto.<\/p>\n<\/p><\/div>\n<div class=\"ubk-reveal\">\n<div class=\"ubk-ba\">\n<div class=\"ubk-ba__layer\">\n<div class=\"ubk-ph--ba\" style=\"background:linear-gradient(150deg,#2b3942,#0E1A23)\">Antes \u2014 obra gris<\/div>\n<\/div>\n<div class=\"ubk-ba__layer ubk-ba__after\">\n<div class=\"ubk-ph--ba\" style=\"background:linear-gradient(150deg,#4C82A6,#243845)\">Despu\u00e9s \u2014 espacio terminado<\/div>\n<\/div>\n<p>          <span class=\"ubk-ba__lbl l\">Antes<\/span><br \/>\n          <span class=\"ubk-ba__lbl r\">Despu\u00e9s<\/span><\/p>\n<div class=\"ubk-ba__handle\"><span class=\"ubk-ba__grip\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 7 4 12l4 5M16 7l4 5-4 5\"\/><\/svg><\/span><\/div>\n<p>          <input class=\"ubk-ba__range\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"Comparar antes y despu\u00e9s\">\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== GALER\u00cdA ===================== --><\/p>\n<section class=\"ubk-section ubk-section--bone\" id=\"galeria\">\n<div class=\"wrap\">\n<div class=\"ubk-section__head ubk-reveal\">\n        <span class=\"eyebrow\">Galer\u00eda<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem\">Proyectos que hablan por nosotros.<\/h2>\n<\/p><\/div>\n<div class=\"ubk-gallery\">\n<div class=\"ubk-gallery__item g-8 g-tall ubk-reveal\">\n<div class=\"ubk-ph--g\">Proyecto 01<\/div>\n<p><span class=\"ubk-gallery__cap\">Apartamento \u2014 obra blanca + interiorismo<\/span><\/div>\n<div class=\"ubk-gallery__item g-4 ubk-reveal d1\">\n<div class=\"ubk-ph--g\">Proyecto 02<\/div>\n<p><span class=\"ubk-gallery__cap\">Cielorraso en drywall<\/span><\/div>\n<div class=\"ubk-gallery__item g-4 ubk-reveal d2\">\n<div class=\"ubk-ph--g\">Proyecto 03<\/div>\n<p><span class=\"ubk-gallery__cap\">Laminado de piso<\/span><\/div>\n<div class=\"ubk-gallery__item g-4 ubk-reveal d1\">\n<div class=\"ubk-ph--g\">Proyecto 04<\/div>\n<p><span class=\"ubk-gallery__cap\">Papel de colgadura<\/span><\/div>\n<div class=\"ubk-gallery__item g-4 ubk-reveal d2\">\n<div class=\"ubk-ph--g\">Proyecto 05<\/div>\n<p><span class=\"ubk-gallery__cap\">Fachada en Superboard<\/span><\/div>\n<div class=\"ubk-gallery__item g-4 ubk-reveal d3\">\n<div class=\"ubk-ph--g\">Proyecto 06<\/div>\n<p><span class=\"ubk-gallery__cap\">Pared sint\u00e9tica decorativa<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== PROCESO ===================== --><\/p>\n<section class=\"ubk-section ubk-section--ink\">\n<div class=\"wrap\">\n<div class=\"ubk-section__head ubk-reveal\">\n        <span class=\"eyebrow on-dark\">C\u00f3mo trabajamos<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem;color:var(--on-dark)\">Un proceso sin sorpresas.<\/h2>\n<\/p><\/div>\n<div class=\"ubk-steps\">\n<div class=\"ubk-step ubk-reveal\">\n<h4 style=\"color:var(--on-dark)\">Diagn\u00f3stico<\/h4>\n<p style=\"color:var(--on-dark-soft)\">Visitamos, medimos y entendemos en qu\u00e9 etapa est\u00e1 tu obra.<\/p>\n<\/div>\n<div class=\"ubk-step ubk-reveal d1\">\n<h4 style=\"color:var(--on-dark)\">Propuesta<\/h4>\n<p style=\"color:var(--on-dark-soft)\">Material, instalaci\u00f3n y dise\u00f1o en una sola cotizaci\u00f3n clara.<\/p>\n<\/div>\n<div class=\"ubk-step ubk-reveal d2\">\n<h4 style=\"color:var(--on-dark)\">Ejecuci\u00f3n<\/h4>\n<p style=\"color:var(--on-dark-soft)\">Instalamos con nuestro equipo y est\u00e1ndares de calidad.<\/p>\n<\/div>\n<div class=\"ubk-step ubk-reveal d3\">\n<h4 style=\"color:var(--on-dark)\">Entrega<\/h4>\n<p style=\"color:var(--on-dark-soft)\">Revisamos contigo y respaldamos con garant\u00eda cada detalle.<\/p>\n<\/div><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== CTA + CONTACTO ===================== --><\/p>\n<section class=\"ubk-section ubk-section--bone2\" id=\"contacto\">\n<div class=\"wrap\">\n<div class=\"ubk-cta ubk-reveal\" style=\"margin-bottom:clamp(3rem,7vw,5rem)\">\n        <svg class=\"ubk-cta__glyph a\" viewBox=\"0 0 150 150\" aria-hidden=\"true\"><g transform=\"translate(75,40)\" fill=\"#6BA0C4\"><polygon points=\"0,0 40,23 0,46 -40,23\"\/><\/g><\/svg><br \/>\n        <svg class=\"ubk-cta__glyph b\" viewBox=\"0 0 150 150\" aria-hidden=\"true\"><g transform=\"translate(75,40)\" fill=\"#6BA0C4\"><polygon points=\"0,0 40,23 0,46 -40,23\"\/><\/g><\/svg><br \/>\n        <span class=\"eyebrow on-dark\">Empecemos<\/span><\/p>\n<h2 class=\"display\" style=\"margin-top:1rem\">\u00bfEn qu\u00e9 etapa est\u00e1 tu proyecto?<\/h2>\n<p class=\"lead\">Cu\u00e9ntanos y te armamos una propuesta integral. Sin compromiso, con la tranquilidad de hablar con un solo equipo.<\/p>\n<div class=\"ubk-cta__row\">\n          <a href=\"https:\/\/wa.me\/[NUMERO_WHATSAPP]?text=Hola%20Urbanikos%2C%20quiero%20cotizar%20un%20proyecto\" target=\"_blank\" rel=\"noopener\" class=\"btn btn--accent\">Escr\u00edbenos por WhatsApp<br \/>\n            <span class=\"btn__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 17 17 7M9 7h8v8\"\/><\/svg><\/span><br \/>\n          <\/a><br \/>\n          <a href=\"#form\" class=\"btn btn--ghost\" style=\"--ghost:1; background:rgba(244,241,234,.08); color:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(244,241,234,.18)\">Dejar mis datos<br \/>\n            <span class=\"btn__ic\" style=\"background:rgba(244,241,234,.12)\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><br \/>\n          <\/a>\n        <\/div>\n<\/p><\/div>\n<div class=\"ubk-contact\" id=\"form\">\n<div class=\"ubk-contact__info ubk-reveal\">\n          <span class=\"eyebrow\">Cont\u00e1ctenos<\/span><\/p>\n<h2 class=\"display\" style=\"font-size:clamp(1.8rem,4vw,2.8rem)\">Estamos para acompa\u00f1arte.<\/h2>\n<div class=\"ubk-info-item\">\n            <span class=\"ubk-info-item__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/span><\/p>\n<div><b>Direcci\u00f3n<\/b><span>[DIRECCI\u00d3N], Bogot\u00e1 D.C., Colombia<\/span><\/div>\n<\/p><\/div>\n<div class=\"ubk-info-item\">\n            <span class=\"ubk-info-item__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L8 9.6a16 16 0 006 6l1.2-1.2a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6a2 2 0 011.7 2z\"\/><\/svg><\/span><\/p>\n<div><b>Tel\u00e9fono \/ WhatsApp<\/b><span>[N\u00daMERO_WHATSAPP]<\/span><\/div>\n<\/p><\/div>\n<div class=\"ubk-info-item\">\n            <span class=\"ubk-info-item__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v16H4z\"\/><path d=\"m4 6 8 6 8-6\"\/><\/svg><\/span><\/p>\n<div><b>Correo<\/b><span>[CORREO]<\/span><\/div>\n<\/p><\/div>\n<p>          <!-- Mapa: reemplaza por un <iframe> de Google Maps --><\/p>\n<div class=\"ubk-map\">[ Insertar mapa de Google Maps aqu\u00ed ]<\/div>\n<\/p><\/div>\n<p>        <!-- Formulario: los name[] est\u00e1n listos para Elementor Pro Forms \/ CF7 --><\/p>\n<div class=\"ubk-form ubk-reveal d1\">\n<form class=\"ubk-form__core\" action=\"#\" method=\"post\" novalidate>\n<div class=\"ubk-form__row\">\n<div class=\"ubk-field\"><label for=\"f-nombre\">Nombre<\/label><input id=\"f-nombre\" name=\"nombre\" type=\"text\" placeholder=\"Tu nombre\" required><\/div>\n<div class=\"ubk-field\"><label for=\"f-tel\">Tel\u00e9fono<\/label><input id=\"f-tel\" name=\"telefono\" type=\"tel\" placeholder=\"300 000 0000\" required><\/div>\n<\/p><\/div>\n<div class=\"ubk-field\"><label for=\"f-email\">Correo<\/label><input id=\"f-email\" name=\"email\" type=\"email\" placeholder=\"tucorreo@ejemplo.com\" required><\/div>\n<div class=\"ubk-field\"><label for=\"f-interes\">\u00bfQu\u00e9 necesitas?<\/label><br \/>\n              <select id=\"f-interes\" name=\"interes\"><option>Materiales<\/option><option>Instalaci\u00f3n<\/option><option>Dise\u00f1o de interiores<\/option><option>Proyecto integral (todo)<\/option><\/select>\n            <\/div>\n<div class=\"ubk-field\"><label for=\"f-msg\">Cu\u00e9ntanos sobre tu proyecto<\/label><textarea id=\"f-msg\" name=\"mensaje\" placeholder=\"Etapa de la obra, \u00e1rea aproximada, ciudad\u2026\"><\/textarea><\/div>\n<p>            <button type=\"submit\" class=\"btn btn--solid\" style=\"width:100%; justify-content:center; background:var(--brand-700)\">Enviar solicitud<br \/>\n              <span class=\"btn__ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 2 11 13M22 2 15 22l-4-9-9-4z\"\/><\/svg><\/span><br \/>\n            <\/button><br \/>\n          <\/form>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <!-- ===================== FOOTER ===================== --><\/p>\n<footer class=\"ubk-footer\">\n<div class=\"wrap\">\n<div class=\"ubk-footer__top\">\n<div class=\"ubk-footer__brand\">\n          <a href=\"#inicio\" class=\"ubk-logo\" aria-label=\"Urbanikos Soluciones\"><br \/>\n            <svg viewBox=\"0 0 150 150\" aria-hidden=\"true\" style=\"width:30px;height:38px\"><\/p>\n<style>.cf-top{fill:#6BA0C4}.cf-left{fill:#4C82A6}.cf-right{fill:#2E4655}<\/style>\n<p>              <g transform=\"translate(40,78)\"><polygon class=\"cf-top\" points=\"0,0 28,16 0,32 -28,16\"\/><polygon class=\"cf-left\" points=\"-28,16 0,32 0,64 -28,48\"\/><polygon class=\"cf-right\" points=\"28,16 0,32 0,64 28,48\"\/><\/g>\n              <g transform=\"translate(40,30)\"><polygon class=\"cf-top\" points=\"0,0 28,16 0,32 -28,16\"\/><polygon class=\"cf-left\" points=\"-28,16 0,32 0,64 -28,48\"\/><polygon class=\"cf-right\" points=\"28,16 0,32 0,64 28,48\"\/><\/g>\n              <g transform=\"translate(96,54)\"><polygon class=\"cf-top\" points=\"0,0 28,16 0,32 -28,16\"\/><polygon class=\"cf-left\" points=\"-28,16 0,32 0,64 -28,48\"\/><polygon class=\"cf-right\" points=\"28,16 0,32 0,64 28,48\"\/><\/g>\n            <\/svg><br \/>\n            <span class=\"ubk-logo__txt\"><b>URBANIKOS<\/b><span>Soluciones<\/span><\/span><br \/>\n          <\/a><\/p>\n<p>Material, instalaci\u00f3n y dise\u00f1o de interiores en un solo equipo. De obra gris a tu espacio terminado, con garant\u00eda y respaldo.<\/p>\n<\/p><\/div>\n<div>\n<h5>Navegaci\u00f3n<\/h5>\n<p><a href=\"#nosotros\">Qui\u00e9nes somos<\/a><a href=\"#productos\">Productos<\/a><a href=\"#diseno\">Dise\u00f1o de interiores<\/a><a href=\"#galeria\">Galer\u00eda<\/a><\/div>\n<div>\n<h5>Soluciones<\/h5>\n<p><a href=\"#productos\">Drywall y Superboard<\/a><a href=\"#productos\">PVC y pintura<\/a><a href=\"#productos\">Hidrosanitario<\/a><a href=\"#diseno\">Laminados y papel<\/a><\/div>\n<div>\n<h5>Contacto<\/h5>\n<p><a href=\"#contacto\">Cotizar proyecto<\/a><a href=\"https:\/\/wa.me\/[NUMERO_WHATSAPP]\" target=\"_blank\" rel=\"noopener\">WhatsApp<\/a><a href=\"#contacto\">[CORREO]<\/a><\/div>\n<\/p><\/div>\n<div class=\"ubk-footer__bottom\">\n        <span>\u00a9 <span id=\"ubk-year\">2026<\/span> Urbanikos Soluciones. Todos los derechos reservados.<\/span><br \/>\n        <span>Bogot\u00e1 D.C., Colombia<\/span>\n      <\/div>\n<\/p><\/div>\n<\/footer>\n<p>  <!-- ===================== WHATSAPP FLOTANTE ===================== --><br \/>\n  <a class=\"ubk-wa\" href=\"https:\/\/wa.me\/[NUMERO_WHATSAPP]?text=Hola%20Urbanikos%2C%20quiero%20cotizar%20un%20proyecto\" target=\"_blank\" rel=\"noopener\" aria-label=\"Escr\u00edbenos por WhatsApp\"><br \/>\n    <span class=\"ubk-wa__pulse\" aria-hidden=\"true\"><\/span><br \/>\n    <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><path d=\"M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.6 6 1.6 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm0 22.7c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-4.2 1.1 1.1-4-.2-.4a10 10 0 01-1.6-5.3c0-5.6 4.6-10.2 10.4-10.2 5.7 0 10.3 4.6 10.3 10.2S21.7 25.7 16 25.7zm5.7-7.6c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1-1.8-.9-3-1.6-4.2-3.6-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.3 5.2 4.6 2 .8 2.7.9 3.7.8.6-.1 1.8-.7 2-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.2-.6-.4z\"\/><\/svg><br \/>\n  <\/a><\/p>\n<p>  <!-- Chat en vivo: pega aqu\u00ed el script de Tawk.to o Crisp (gratis). El div queda listo. --><\/p>\n<div id=\"chat-widget-placeholder\"><\/div>\n<p>  <!-- ===================== LIGHTBOX GALER\u00cdA ===================== --><\/p>\n<div class=\"ubk-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Imagen ampliada\">\n    <button class=\"ubk-lightbox__x\" aria-label=\"Cerrar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M6 6l12 12M18 6 6 18\"\/><\/svg><\/button><br \/>\n    <img decoding=\"async\" src=\"\" alt=\"\">\n  <\/div>\n<\/div>\n<p><script>document.getElementById('ubk-year').textContent=new Date().getFullYear();<\/script><br \/>\n<script>\n\/* ============================================================================\n   URBANIKOS SOLUCIONES \u2014 L\u00f3gica de interacci\u00f3n (vanilla ES6+, sin dependencias)\n   - Scroll-scrubbing del video del hero (currentTime atado al scroll, con lerp)\n   - Aparici\u00f3n\/desaparici\u00f3n de escenas de texto seg\u00fan progreso\n   - Header transl\u00facido -> s\u00f3lido\n   - Men\u00fa m\u00f3vil glass con hamburguesa morphing\n   - Reveals por IntersectionObserver\n   - Slider antes\/despu\u00e9s + galer\u00eda lightbox\n   - Respeta prefers-reduced-motion\n   ========================================================================== *\/\n(function () {\n  'use strict';<\/p>\n<p>  const root = document.querySelector('.ubk');\n  if (!root) return;\n  const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  const lerp = (a, b, t) => a + (b - a) * t;<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     1) HEADER: transl\u00facido -> s\u00f3lido (sentinel con IntersectionObserver)\n     ------------------------------------------------------------------------- *\/\n  const header = root.querySelector('.ubk-header');\n  const sentinel = root.querySelector('#ubk-top-sentinel');\n  if (header && sentinel && 'IntersectionObserver' in window) {\n    new IntersectionObserver(\n      ([e]) => header.classList.toggle('is-solid', !e.isIntersecting),\n      { rootMargin: '-72px 0px 0px 0px' }\n    ).observe(sentinel);\n  }<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     2) MEN\u00da M\u00d3VIL: hamburguesa morphing + overlay glass\n     ------------------------------------------------------------------------- *\/\n  const burger = root.querySelector('.ubk-burger');\n  const mobile = root.querySelector('.ubk-mobile');\n  if (burger && mobile) {\n    const toggle = (open) => {\n      const willOpen = open ?? !mobile.classList.contains('is-open');\n      mobile.classList.toggle('is-open', willOpen);\n      burger.classList.toggle('is-open', willOpen);\n      document.body.style.overflow = willOpen ? 'hidden' : '';\n    };\n    burger.addEventListener('click', () => toggle());\n    mobile.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => toggle(false)));\n  }<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     3) REVEALS por scroll (IntersectionObserver, no scroll listener)\n     ------------------------------------------------------------------------- *\/\n  const reveals = root.querySelectorAll('.ubk-reveal');\n  if ('IntersectionObserver' in window) {\n    const io = new IntersectionObserver(\n      (entries) => entries.forEach((en) => {\n        if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); }\n      }),\n      { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }\n    );\n    reveals.forEach((el) => io.observe(el));\n  } else {\n    reveals.forEach((el) => el.classList.add('is-in'));\n  }<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     4) HERO SCROLLYTELLING \u2014 scrub del video atado al scroll\n     ------------------------------------------------------------------------- *\/\n  const hero = root.querySelector('.ubk-hero');\n  const video = root.querySelector('.ubk-hero__video');\n  const loader = root.querySelector('.ubk-hero__loader');\n  const scenes = Array.from(root.querySelectorAll('.ubk-scene'));\n  const cue = root.querySelector('.ubk-cue');\n  const progressBar = root.querySelector('.ubk-progress__bar');<\/p>\n<p>  \/\/ Sustituir fuente por versi\u00f3n m\u00f3vil si existe (data-mobile-src) en pantallas peque\u00f1as\n  if (video) {\n    const mobileSrc = video.getAttribute('data-mobile-src');\n    if (mobileSrc && window.matchMedia('(max-width: 768px)').matches) {\n      video.querySelectorAll('source').forEach((s, i) => { if (i === 0) s.setAttribute('src', mobileSrc); });\n      try { video.load(); } catch (e) {}\n    }\n  }<\/p>\n<p>  \/\/ Ocultar loader cuando el video tenga datos suficientes\n  const hideLoader = () => loader && loader.classList.add('is-hidden');\n  if (video) {\n    if (video.readyState >= 2) hideLoader();\n    video.addEventListener('loadeddata', hideLoader, { once: true });\n    video.addEventListener('canplay', hideLoader, { once: true });\n    \/\/ Failsafe: si el video no carga en 6s, igual mostramos el hero\n    setTimeout(hideLoader, 6000);\n    \/\/ Forzar primer frame visible\n    try { video.pause(); } catch (e) {}\n  }<\/p>\n<p>  \/\/ --- Aparici\u00f3n de escenas seg\u00fan progreso (0..1) del hero ---\n  \/\/ L\u00f3gica de \"meseta\": el texto est\u00e1 full dentro de su rango y s\u00f3lo\n  \/\/ hace fade en los bordes. As\u00ed permanece legible m\u00e1s tiempo y la\n  \/\/ primera escena se ve desde el inicio del scroll.\n  function paintScenes(p) {\n    scenes.forEach((sc) => {\n      const start = parseFloat(sc.dataset.start || '0');\n      const end = parseFloat(sc.dataset.end || '1');\n      const w = Math.max(end - start, 0.0001);\n      const fade = Math.min(0.06, w * 0.4); \/\/ ancho del fade en cada borde\n      const mid = (start + end) \/ 2;<\/p>\n<p>      let o;\n      if (p <= start || p >= end) o = 0;\n      else if (p < start + fade) o = (p - start) \/ fade;       \/\/ entrada\n      else if (p > end - fade) o = (end - p) \/ fade;           \/\/ salida\n      else o = 1;                                              \/\/ meseta legible\n      o = clamp(o, 0, 1);\n      const eased = o * o * (3 - 2 * o);\n      sc.style.opacity = eased.toFixed(3);<\/p>\n<p>      \/\/ leve desplazamiento direccional de entrada\/salida\n      const dir = sc.dataset.align === 'right' ? 1 : sc.dataset.align === 'left' ? -1 : 0;\n      const ty = (1 - eased) * 24 * (p < mid ? 1 : -1);\n      const tx = dir * (1 - eased) * 22;\n      const base = (sc.dataset.align === 'center' || !sc.dataset.align) ? 'translate(-50%,-50%)' : 'translate(0,-50%)';\n      sc.style.transform = `${base} translate(${tx.toFixed(1)}px, ${ty.toFixed(1)}px)`;\n    });\n  }\n\n  if (hero &#038;&#038; video &#038;&#038; !REDUCED) {\n    let targetTime = 0;     \/\/ currentTime objetivo seg\u00fan scroll\n    let currentTime = 0;    \/\/ currentTime suavizado\n    let progress = 0;\n    let duration = 0;\n    let ticking = false;\n    let videoReady = false;\n\n    video.addEventListener('loadedmetadata', () => {\n      duration = video.duration || 0;\n      videoReady = true;\n    });<\/p>\n<p>    function computeProgress() {\n      const rect = hero.getBoundingClientRect();\n      const scrollable = hero.offsetHeight - window.innerHeight;\n      \/\/ cu\u00e1nto hemos avanzado dentro del hero\n      const p = clamp(-rect.top \/ scrollable, 0, 1);\n      return p;\n    }<\/p>\n<p>    function onScroll() {\n      if (!ticking) { ticking = true; requestAnimationFrame(update); }\n    }<\/p>\n<p>    function update() {\n      ticking = false;\n      progress = computeProgress();<\/p>\n<p>      \/\/ ocultar el \"cue\" de scroll apenas empieza\n      if (cue) cue.style.opacity = progress > 0.04 ? '0' : '1';\n      if (progressBar) progressBar.style.height = (progress * 100).toFixed(1) + '%';<\/p>\n<p>      \/\/ objetivo de tiempo del video (deja un peque\u00f1o margen al final)\n      if (videoReady && duration) {\n        targetTime = clamp(progress, 0, 0.999) * duration;\n      }\n      paintScenes(progress);\n    }<\/p>\n<p>    \/\/ Loop de suavizado: lerp del currentTime para evitar saltos bruscos\n    function smoothLoop() {\n      if (videoReady && duration) {\n        currentTime = lerp(currentTime, targetTime, 0.12);\n        if (Math.abs(currentTime - targetTime) < 0.005) currentTime = targetTime;\n        \/\/ s\u00f3lo asignar si el cambio es perceptible (evita saturar el decoder)\n        if (Math.abs(video.currentTime - currentTime) > 0.012) {\n          try { video.currentTime = currentTime; } catch (e) {}\n        }\n      }\n      requestAnimationFrame(smoothLoop);\n    }<\/p>\n<p>    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onScroll, { passive: true });\n    update();\n    requestAnimationFrame(smoothLoop);\n  } else if (scenes.length) {\n    \/\/ reduced-motion: mostrar escenas como bloques est\u00e1ticos revelados por scroll\n    if ('IntersectionObserver' in window) {\n      const io2 = new IntersectionObserver(\n        (entries) => entries.forEach((en) => { if (en.isIntersecting) en.target.style.opacity = '1'; }),\n        { threshold: 0.4 }\n      );\n      scenes.forEach((sc) => { sc.style.transition = 'opacity .8s ease'; io2.observe(sc); });\n    } else {\n      scenes.forEach((sc) => (sc.style.opacity = '1'));\n    }\n  }<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     5) SLIDER ANTES \/ DESPU\u00c9S\n     ------------------------------------------------------------------------- *\/\n  root.querySelectorAll('.ubk-ba').forEach((ba) => {\n    const after = ba.querySelector('.ubk-ba__after');\n    const handle = ba.querySelector('.ubk-ba__handle');\n    const range = ba.querySelector('.ubk-ba__range');\n    const set = (val) => {\n      const v = clamp(val, 0, 100);\n      if (after) after.style.clipPath = `inset(0 0 0 ${v}%)`;\n      if (handle) handle.style.left = v + '%';\n    };\n    if (range) { range.addEventListener('input', () => set(parseFloat(range.value))); set(parseFloat(range.value || 50)); }\n  });<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     6) GALER\u00cdA LIGHTBOX (vanilla)\n     ------------------------------------------------------------------------- *\/\n  const lightbox = root.querySelector('.ubk-lightbox');\n  const lightboxImg = lightbox && lightbox.querySelector('img');\n  if (lightbox && lightboxImg) {\n    const open = (src, alt) => {\n      lightboxImg.src = src; lightboxImg.alt = alt || '';\n      lightbox.classList.add('is-open'); document.body.style.overflow = 'hidden';\n    };\n    const close = () => { lightbox.classList.remove('is-open'); document.body.style.overflow = ''; };\n    root.querySelectorAll('.ubk-gallery__item').forEach((it) => {\n      it.addEventListener('click', () => {\n        const img = it.querySelector('img');\n        const full = it.dataset.full || (img && img.src);\n        if (full) open(full, img && img.alt);\n      });\n    });\n    lightbox.addEventListener('click', (e) => { if (e.target === lightbox || e.target.closest('.ubk-lightbox__x')) close(); });\n    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });\n  }<\/p>\n<p>  \/* -------------------------------------------------------------------------\n     7) Smooth scroll para anclas internas del men\u00fa\n     ------------------------------------------------------------------------- *\/\n  root.querySelectorAll('a[href^=\"#\"]').forEach((a) => {\n    a.addEventListener('click', (e) => {\n      const id = a.getAttribute('href');\n      if (id.length < 2) return;\n      const target = root.querySelector(id);\n      if (target) { e.preventDefault(); target.scrollIntoView({ behavior: REDUCED ? 'auto' : 'smooth', block: 'start' }); }\n    });\n  });\n})();\n\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>URBANIKOSSoluciones Inicio Qui\u00e9nes somos Productos y materiales Dise\u00f1o de interiores Galer\u00eda Cont\u00e1ctenos Cotizar Inicio Qui\u00e9nes somos Productos y materiales Dise\u00f1o de interiores Galer\u00eda Cont\u00e1ctenos De obra gris a un espacio donde querer vivir. Materiales, instalaci\u00f3n y dise\u00f1o bajo un mismo techo. Sin coordinar diez proveedores. Sin contratiempos. Una base s\u00f3lida y confiable. Drywall, PVC, Superboard [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":1,"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/urbanikossoluciones.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}