1<!DOCTYPE html> 2<html lang="es"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title data-i18n="meta.title">Cruz Estudio</title> 7 <meta name="description" data-i18n-attr="content:meta.desc" content="Somos un estudio especializado en identidades corporativas, con experiencia en proyectos destacados como Trenes Argentinos Cargas, la Municipalidad de San Cristóbal Y Unión Ferroviaria entre otras empresas y organizacines." > 8 <meta name="keywords" content="diseño, marcas, branding, diseño grafico, instagram, corporativo, empresas, brand design, diseño ux ui, diseño web"> 9 <!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 9-10
9 10<script async src="https://www.googletagmanager.com/gtag/js?id=
10AW-18005988800
vendor: 12 bytes, line 10
10"></script>
11<script> 12
vendor: 134 bytes, lines 12-16
12window.dataLayer = window.dataLayer || []; 13 function gtag(){dataLayer.push(arguments);} 14 gtag('js', new Date()); 15 16 gtag('config', '
16AW-18005988800
vendor: 4 bytes, line 16
16');
17</script>
17 18 19 <link rel="preconnect" href="https://fonts.googleapis.com"> 20 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"> 21 <link href="https://fonts.googleapis.com/css2?family=Chivo:wght@400;700&display=swap" rel="stylesheet"> 22 <link rel="stylesheet" href="https://use.typekit.net/dfq7pmd.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=social_leaderboard,south_east,trophy" /> 23 <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet"> 24 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 25 26 <link rel="stylesheet" href="/css/style.css?v=49"> 27 <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png?v=2"> 28 <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png?v=2"> 29 <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png?v=2"> 30 <link rel="shortcut icon" href="/img/favicon.ico?v=2"> 31 32
32<script> 33 (function() { 34 // Activa el sistema de reveals (oculta inicial). Si este script no corre, 35 // el contenido queda visible por defecto â failsafe natural. 36 document.documentElement.classList.add('js-ready'); 37 38 // Hard failsafe: a los 5s desactiva cualquier reveal que aún esté oculto. 39 // (Los headers [data-rh] quedan exentos vÃa CSS: los revela reveal-headers.js 40 // por scroll, asà no se ven estáticos al llegar.) 41 setTimeout(function() { 42 document.documentElement.classList.add('reveal-fallback'); 43 }, 5000); 44 45 if (sessionStorage.getItem('cruz-loader-visto')) { 46 document.documentElement.classList.add('skip-loader'); 47 document.documentElement.style.overflowY = 'auto'; 48 } 49 })(); 50 </script>
50 51 <style> 52 .skip-loader #loader, .skip-loader .loader { display: none !important; visibility: hidden !important; } 53 .skip-loader body:not(.menu-open) { overflow-y: auto !important; height: auto !important; } 54 </style> 55
55<script src="/java/page-loader.js?v=27"></script>
55 56 <link rel="stylesheet" href="/css/nav-menu.css?v=28"> 57 <link rel="stylesheet" href="/css/cursor.css?v=25"> 58 <link rel="stylesheet" href="/css/faq.css?v=30"> 59 <link rel="canonical" href="https://www.cruzestudio.com.ar/"> 60</head> 61<body data-bg="dark"> 62 63<a href="https://we.directory/cruzestudio-com" target="_blank" rel="noopener noreferrer" class="we-side-tag" id="we-side-tag" aria-label="WE.directory · Cruz Estudio"> 64 <img loading="lazy" decoding="async" src="/img/we_logo1_white_etiqueta_2.svg" alt="" class="we-side-tag-img we-side-tag-img--white" aria-hidden="true"> 65 <img loading="lazy" decoding="async" src="/img/we_logo1_black_etiqueta_1.svg" alt="" class="we-side-tag-img we-side-tag-img--black" aria-hidden="true"> 66</a> 67 68<div class="scroll-progress" id="scroll-progress" aria-hidden="true"></div> 69 70<div class="page-transition"></div> 71 72<div class="loader" id="loader"> 73 <div id="silk-loader" aria-hidden="true"></div> 74 <div class="intro-counter"><span id="loader-percentage">01</span><span class="intro-pct">%</span></div> 75 76 <div class="intro-stage"> 77 <img decoding="async" src="/img/signo-cruz.svg" alt="" class="intro-cross" aria-hidden="true"> 78 </div> 79 80 <p class="intro-desc" data-i18n="loader.desc"> 81 Cruz Estudio â diseño y estrategia visual. Construimos identidades sólidas: 82 branding, sistemas visuales y experiencias digitales para marcas que buscan 83 conectar, competir y perdurar. 84 </p> 85</div> 86 87<nav class="navbar-brand navbar-modern"> 88 <div class="containerNav"> 89 <a href="/" class="logo link-location"> 90 <img decoding="async" src="/img/nuevo-logo-cre.svg" alt="Cruz Estudio Logo" class="logo-vectorial"> 91 </a> 92 93 <div class="nav-actions"> 94 <div class="lang-switch" data-lang-switch role="group" data-i18n-attr="aria-label:nav.lang" aria-label="Idioma"> 95 <button type="button" class="lang-opt" data-lang-opt="es" aria-pressed="true">ES</button> 96 <span class="lang-sep" aria-hidden="true"></span> 97 <button type="button" class="lang-opt" data-lang-opt="en" aria-pressed="false">EN</button> 98 </div> 99 100 <button class="nav-toggle" id="navToggle" data-i18n-attr="aria-label:nav.toggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="navOverlay"> 101 <span class="nav-toggle-box" aria-hidden="true"><i></i><i></i><i></i></span> 102 </button> 103 </div> 104 </div> 105</nav> 106 107<!-- Overlay del menú (orquestado con GSAP, adaptado del demo easeReverse) --> 108<div class="nav-overlay" id="navOverlay" aria-hidden="true"> 109 <div class="nav-overlay-bg"></div> 110 <div class="nav-overlay-inner"> 111 <ul class="nav-overlay-links"> 112 <li><a href="/trabajos"><span class="nol-idx">01</span><span class="nol-txt" data-i18n="nav.projects">Proyectos</span></a></li> 113 <li><a href="/metodologia"><span class="nol-idx">02</span><span class="nol-txt" data-i18n="nav.methodology">MetodologÃa</span></a></li> 114 <li><a href="/about"><span class="nol-idx">03</span><span class="nol-txt" data-i18n="nav.studio">Estudio</span></a></li> 115 <li><a href="/contacto"><span class="nol-idx">04</span><span class="nol-txt" data-i18n="nav.contact">Contacto</span></a></li> 116 </ul> 117 <div class="nav-overlay-foot"> 118 <a href="mailto:[email protected]" class="nof-mail">[email protected]</a> 119 <span class="nof-loc" data-i18n="nav.loc">Buenos Aires, ARG · GMT-3</span> 120 </div> 121 </div> 122</div> 123 124<div class="grid-bg"></div> 125<div id="silk-bg" aria-hidden="true"></div> 126<div id="hero-invert-bg" aria-hidden="true"></div> 127<!-- Capa crema que "barre" tras el loader y queda de fondo del hero estático. --> 128<div id="hero-sweep" aria-hidden="true"></div> 129<div id="canvas-wrap"></div> 130 131<div id="hero-text"> 132 <div class="hero-statements"> 133 <h1 class="hero-statement" data-step="0"> 134 <span class="hs-line"><span class="hs-inner" data-i18n="hero.title.l1">Estudio de branding y comunicación.</span></span>
135 <span class="hs-line"><span class="hs-inner" data-i18n="hero.title.l2">Integramos diseño y estrategia para</span></span> 136 <span class="hs-line"><span class="hs-inner" data-i18n="hero.title.l3">potenciar marcas.</span></span> 137 </h1> 138 </div> 139 <p class="hero-lead" data-i18n="hero.lead">Transformamos y desarrollamos marcas para las empresas que construyen el futuro de la tecnologÃa, la cultura y la innovación.</p> 140</div> 141 142<!-- Reconocimientos: par de listones apilados en el borde derecho. 143 Awwwards (Honors · Web of the Day) arriba + WeDirectory debajo. --> 144<div id="award-ribbons"> 145 <a class="award-ribbon award-ribbon--awwwards" href="https://www.awwwards.com/sites/cruz-estudio" target="_blank" rel="noopener noreferrer" aria-label="Honors â Awwwards Web of the Day"><svg width="53.08" height="171.358"><path class="js-color-bg" fill="#9BD4D7" d="M0 0h53.08v171.358H0z"></path><g class="js-color-text" fill="#fff"><path d="M20.047 153.665v-1.9h3.888v-4.093h-3.888v-1.9h10.231v1.9h-4.59v4.093h4.59v1.9zM29.898 142.236c-.331.565-.784.997-1.359 1.294s-1.222.446-1.944.446c-.721 0-1.369-.149-1.943-.446a3.316 3.316 0 0 1-1.36-1.294c-.331-.564-.497-1.232-.497-2.002s.166-1.438.497-2.002a3.316 3.316 0 0 1 1.36-1.294c.574-.297 1.223-.445 1.943-.445.723 0 1.369.148 1.944.445a3.307 3.307 0 0 1 1.359 1.294c.331.564.497 1.232.497 2.002s-.166 1.438-.497 2.002m-1.703-3.347c-.435-.33-.967-.496-1.601-.496-.633 0-1.166.166-1.601.496-.433.332-.649.78-.649 1.346 0 .564.217 1.013.649 1.345.435.331.968.497 1.601.497.634 0 1.166-.166 1.601-.497.435-.332.649-.78.649-1.345.001-.566-.214-1.014-.649-1.346M22.911 134.852v-1.813h1.186a3.335 3.335 0 0 1-.951-1.009 2.423 2.423 0 0 1-.352-1.271c0-.682.19-1.229.57-1.645.381-.413.932-.621 1.652-.621h5.262v1.812h-4.721c-.419 0-.727.096-.921.285-.195.19-.292.447-.292.769 0 .302.115.58.35.833.234.254.577.458 1.03.613.454.156.993.234 1.616.234h2.938v1.813h-7.367zM29.898 125.136a3.314 3.314 0 0 1-1.359 1.294c-.575.297-1.222.445-1.944.445-.721 0-1.369-.148-1.943-.445a3.322 3.322 0 0 1-1.36-1.294c-.331-.565-.497-1.232-.497-2.002 0-.771.166-1.438.497-2.003a3.313 3.313 0 0 1 1.36-1.293c.574-.297 1.223-.446 1.943-.446.723 0 1.369.149 1.944.446s1.028.728 1.359 1.293.497 1.232.497 2.003c.001.769-.166 1.436-.497 2.002m-1.703-3.347c-.435-.331-.967-.497-1.601-.497-.633 0-1.166.166-1.601.497-.433.331-.649.778-.649 1.345 0 .564.217 1.013.649 1.344.435.332.968.498 1.601.498.634 0 1.166-.166 1.601-.498.435-.331.649-.779.649-1.344.001-.567-.214-1.014-.649-1.345M22.911 117.75v-1.812h1.199c-.419-.265-.742-.586-.972-.966s-.345-.784-.345-1.213c0-.272.05-.569.146-.892l1.682.336a1.429 1.429 0 0 0-.205.76c0 .576.261 1.048.783 1.418.521.37 1.342.557 2.461.557h2.617v1.812h-7.366zM29.812 111.252c-.391.511-.857.851-1.403 1.016l-.776-1.446c.381-.138.68-.329.893-.577.215-.249.321-.544.321-.885a1.2 1.2 0 0 0-.168-.658c-.112-.175-.294-.263-.548-.263-.225 0-.406.105-.548.313-.142.21-.291.534-.446.973-.019.068-.058.17-.117.307-.224.565-.506 1.004-.848 1.315-.34.313-.779.467-1.314.467-.381 0-.727-.102-1.039-.306a2.185 2.185 0 0 1-.744-.84 2.554 2.554 0 0 1-.279-1.207c0-.497.105-.949.314-1.359.211-.408.506-.725.886-.949l.993 1.082c-.43.292-.644.686-.644 1.184a.84.84 0 0 0 .154.504.471.471 0 0 0 .401.212c.176 0 .338-.103.49-.307.15-.205.334-.604.547-1.199.205-.564.474-1.001.805-1.308.332-.308.756-.46 1.271-.46.721 0 1.299.229 1.732.687s.65 1.057.65 1.797c.001.759-.194 1.396-.583 1.907M35.481 17.006l-4.782 14.969h-3.266l-2.584-9.682-2.584 9.682h-3.268l-4.782-14.969h3.713l2.673 10.276 2.525-10.276h3.445l2.524 10.276 2.674-10.276zM37.978 27.163c1.426 0 2.496 1.068 2.496 2.495 0 1.425-1.07 2.495-2.496 2.495-1.425 0-2.494-1.07-2.494-2.495-.001-1.427 1.069-2.495 2.494-2.495"></path></g></svg></a> 146 <a class="award-ribbon award-ribbon--we" href="https://we.directory/collection" target="_blank" rel="noopener noreferrer" aria-label="Featured on WeDirectory â best talents and brands"> 147 <img loading="lazy" decoding="async" src="/img/we_logo3_white.svg" alt="" class="we-ribbon-mark" aria-hidden="true"> 148 <span class="we-ribbon-text" data-i18n="award.we.ribbon">Website of the day</span> 149 </a> 150</div> 151 152<div id="stat-strip"> 153 <div class="context-item"> 154 <span class="mono-tag">
154// LOCATION</span> 155 <div class="context-data">BUENOS AIRES, ARG (GMT-3)</div> 156 </div> 157 158 <div class="context-item" id="hero-live-item"> 159 <span class="mono-tag">// LIVE DATA</span> 160 <div class="context-data" id="hero-live-data"> 161 <span id="hero-clock">00:00</span> 162 <span id="hero-weather-icon" class="material-symbols-outlined">cloud</span> 163 <span id="hero-temp">--°C</span> 164 </div> 165 </div> 166 167 <div class="context-item"> 168 <span class="mono-tag">// SAY HELLO</span> 169 <a href="mailto:[email protected]" class="context-data context-link link-location"> 170 [email protected] 171 </a> 172 </div> 173</div> 174 175<!-- ========================================================== 176 CARD DE PROYECTO â sale al clickear la esfera (diseño tipo 177 "profile card"). El fondo se desenfoca un punto (mismo lugar) y 178 cada click en otra zona de la esfera muestra otro proyecto. 179 Lógica: java/hero-3d.js 180 ========================================================== --> 181<div id="proj-overlay" aria-hidden="true"> 182 <article id="proj-card"> 183 <button class="pj-close" id="proj-close" aria-label="Cerrar">â</button> 184 <div class="pj-inner"> 185 <img class="pj-media" id="pj-img" src="" alt="" decoding="async" draggable="false"> 186 <span class="pj-veil" aria-hidden="true"></span> 187 <div class="pj-body"> 188 <h3 class="pj-title pj-stagger"> 189 <span id="pj-title">Proyecto</span> 190 <span class="pj-badge" aria-hidden="true"> 191 <svg viewBox="0 0 20 20" width="13" height="13"><path fill="currentColor" d="M8.2 12.6 5.4 9.8l1.2-1.2 1.6 1.6 3.8-3.8 1.2 1.2z"/></svg> 192 </span> 193 </h3> 194 <p class="pj-desc pj-stagger" id="pj-desc">Descripción del proyecto.</p> 195 <div class="pj-foot pj-stagger"> 196 <div class="pj-meta" id="pj-meta"></div> 197 <a class="pj-cta" id="pj-cta" href="#">Ver caso <span aria-hidden="true">â</span></a> 198 </div> 199 </div> 200 </div> 201 </article> 202</div> 203 204<!-- Crédito CC-BY del modelo 3D (visible solo cuando se muestra la cara). --> 205<div id="hero-credit" aria-hidden="true"> 206 <a href="https://skfb.ly/U7uW" target="_blank" rel="noopener noreferrer">âWireframe Gregos faceâ</a> 207 by alban · 208 <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">CC BY 4.0</a> 209</div> 210 211<div id="spacer"></div> 212<div class="site-content-wrapper"> 213 <div id="silk-content" aria-hidden="true"></div> 214 <section id="studio-intro" class="studio-section" data-theme="dark"> 215 <div class="studio-stage"> 216 <div class="studio-video-container"> 217 <video preload="metadata" autoplay muted loop playsinline class="studio-video"> 218 <source src="/video/videoStudio.mp4" type="video/mp4"> 219 </video> 220 <div class="video-overlay"></div> 221 </div> 222 <div class="studio-text-container"> 223 <div class="studio-frame-wrap"> 224 <div class="studio-frame"> 225 <span class="studio-corner studio-corner--tl" aria-hidden="true">+</span> 226 <span class="studio-corner studio-corner--tr" aria-hidden="true">+</span> 227 <span class="studio-corner studio-corner--bl" aria-hidden="true">+</span> 228 <span class="studio-corner studio-corner--br" aria-hidden="true">+</span> 229 230 <span class="studio-eyebrow" data-i18n="studio.eyebrow">// QUIÃNES SOMOS</span> 231 232 <h3 class="studio-title-v2"> 233 <span class="studio-reveal-line"><span data-i18n="studio.title.l1">Ideas que toman</span></span> 234 <span class="studio-reveal-line"><span data-i18n="studio.title.l2">forma.</span></span> 235 </h3> 236 237 <p class="studio-statement-v2"> 238 <span class="studio-reveal-line"><span data-i18n="studio.p1">Somos un equipo especializado en diseño estratégico. Trabajamos a la par de tu empresa para traducir sus objetivos comerciales en identidades sólidas.</span></span>
239 <span class="studio-reveal-line"><span data-i18n="studio.p2">Nos apasiona acompañar a marcas en crecimiento, aportando el rigor técnico necesario para transformar su calidad real en calidad percibida, aportando un valor tangible al dÃa a dÃa de tu negocio.</span></span> 240 </p> 241 </div> 242 </div> 243 </div> 244 </div> 245 </section> 246 247 <!-- ========================================================== 248 TRUSTED BY â Marquee infinito de logos de clientes 249 Modelo: https://wearemotto.com/ sección "Trusted By" 250 ========================================================== --> 251 <section class="trusted-by scroll-reveal" aria-label="Clientes que confÃan en Cruz Estudio" data-theme="light"> 252 <div class="trusted-header"> 253 <span class="mono-tag">// TRUSTED BY</span> 254 <h3 class="trusted-title" data-split data-i18n="trusted.title">Marcas que nos eligieron.</h3> 255 </div> 256 257 <div class="trusted-marquee"> 258 <div class="trusted-track"> 259 <!-- Pasada 1 --> 260 <img loading="lazy" decoding="async" src="/img/cliente-trenes-argentinos.svg" alt="Trenes Argentinos Cargas" class="trusted-logo"> 261 <img loading="lazy" decoding="async" src="/img/cliente-union-ferroviaria.svg" alt="Unión Ferroviaria" class="trusted-logo trusted-logo--lg"> 262 <img loading="lazy" decoding="async" src="/img/cielnte-municupio-sc.svg" alt="Municipalidad de San Cristóbal" class="trusted-logo trusted-logo--lg"> 263 <img loading="lazy" decoding="async" src="/img/cliente-suuam.svg" alt="SUUAM" class="trusted-logo"> 264 <img loading="lazy" decoding="async" src="/img/cliente-rovex.svg" alt="Rovex" class="trusted-logo"> 265 <img loading="lazy" decoding="async" src="/img/cliente-rafa-id.svg" alt="Rafa ID" class="trusted-logo"> 266 <img loading="lazy" decoding="async" src="/img/cliente-sohat.svg" alt="Sohat" class="trusted-logo"> 267 <img loading="lazy" decoding="async" src="/img/cliente-estacion-sur.svg" alt="Estación Sur" class="trusted-logo"> 268 <img loading="lazy" decoding="async" src="/img/cliente-pinta-gaucha.svg" alt="Pinta Gaucha" class="trusted-logo trusted-logo--lg"> 269 <img loading="lazy" decoding="async" src="/img/cliente-espacio_maisha.svg" alt="Espacio Maisha" class="trusted-logo trusted-logo--lg"> 270 <img loading="lazy" decoding="async" src="/img/clientes-runakay.svg" alt="Runakay" class="trusted-logo"> 271 <img loading="lazy" decoding="async" src="/img/clientes-bears.svg" alt="Bears" class="trusted-logo"> 272 <img loading="lazy" decoding="async" src="/img/clientes-vdr.svg" alt="VDR" class="trusted-logo"> 273 <img loading="lazy" decoding="async" src="/img/logo-ministerio-carrusel.svg" alt="VDR" class="trusted-logo"> 274 275 276 <!-- Pasada 2 (clonada para loop sin costuras) --> 277 <img loading="lazy" decoding="async" src="/img/cliente-trenes-argentinos.svg" alt="" aria-hidden="true" class="trusted-logo"> 278 <img loading="lazy" decoding="async" src="/img/cliente-union-ferroviaria.svg" alt="" aria-hidden="true" class="trusted-logo trusted-logo--lg"> 279 <img loading="lazy" decoding="async" src="/img/cielnte-municupio-sc.svg" alt="" aria-hidden="true" class="trusted-logo trusted-logo--lg"> 280 <img loading="lazy" decoding="async" src="/img/cliente-suuam.svg" alt="" aria-hidden="true" class="trusted-logo"> 281 <img loading="lazy" decoding="async" src="/img/cliente-rovex.svg" alt="" aria-hidden="true" class="trusted-logo"> 282 <img loading="lazy" decoding="async" src="/img/cliente-rafa-id.svg" alt="" aria-hidden="true" class="trusted-logo"> 283 <img loading="lazy" decoding="async" src="/img/cliente-sohat.svg" alt="" aria-hidden="true" class="trusted-logo"> 284 <img loading="lazy" decoding="async" src="/img/cliente-estacion-sur.svg" alt="" aria-hidden="true" class="trusted-logo"> 285 <img loading="lazy" decoding="async" src="/img/cliente-pinta-gaucha.svg" alt="" aria-hidden="true" class="trusted-logo trusted-logo--lg"> 286 <img loading="lazy" decoding="async" src="/img/cliente-espacio_maisha.svg" alt="" aria-hidden="true" class="trusted-logo trusted-logo--lg"> 287 <img loading="lazy" decoding="async" src="/img/clientes-runakay.svg" alt="" aria-hidden="true" class="trusted-logo"> 288 <img loading="lazy" decoding="async" src="/img/clientes-bears.svg" alt="" aria-hidden="true" class="trusted-logo"> 289 <img loading="lazy" decoding="async" src="/img/clientes-vdr.svg" alt="" aria-hidden="true" class="trusted-logo"> 290 <img loading="lazy" decoding="async" src="/img/logo-ministerio-carrusel.svg" alt="VDR" class="trusted-logo"> 291 </div> 292 </div> 293 </section> 294 295 <section class="selected-work dark-version" id="featured-works" data-theme="dark"> 296 <div class="pw-silk" aria-hidden="true"></div> 297 <div class="sw-inner"> 298 <div class="sw-header scroll-reveal" data-rh>
299 <span class="mono-tag" data-i18n="work.eyebrow">// PROYECTOS SELECCIONADOS</span> 300 <div class="sw-head-row"> 301 <h2 class="sw-title section-display-title" data-split data-i18n="work.title">Proyectos destacados.</h2> 302 <a href="/trabajos" class="pw-viewall link-location" data-i18n="work.viewall">Ver todos los proyectos</a> 303 </div> 304 </div> 305 306 <!-- Grilla asimétrica escalonada (ref. produx.design). Cada imagen 307 se "abre" al entrar en pantalla (java/featured-work.js) --> 308 <div class="pw-grid"> 309 <article class="pw-item pw-item--1"> 310 <a class="pw-media" href="/trenescargas" aria-label="Trenes Argentinos Cargas"> 311 <span class="pw-img-wrap"><img class="pw-img" loading="lazy" decoding="async" src="/img/tac-index.png" alt="Trenes Argentinos Cargas"></span> 312 <span class="pw-tags"><span data-i18n="tag.branding">Branding</span><span data-i18n="tag.identity">Identidad</span><span data-i18n="tag.wayfinding">Señalética</span></span> 313 </a> 314 <div class="pw-info"> 315 <h3 class="pw-name"><a href="/trenescargas">Trenes Argentinos Cargas</a></h3> 316 <p class="pw-desc" data-i18n="work.tac.desc">La logÃstica federal requiere un sistema visual que traduzca el rendimiento y la escala de la operación.</p> 317 </div> 318 </article> 319 320 <article class="pw-item pw-item--2"> 321 <a class="pw-media" href="/sc" aria-label="Municipalidad de San Cristóbal"> 322 <span class="pw-img-wrap"><img class="pw-img" loading="lazy" decoding="async" src="/img/sc-index.png" alt="Municipalidad de San Cristóbal"></span> 323 <span class="pw-tags"><span data-i18n="tag.govbrand">Marca gestión</span><span data-i18n="tag.identity">Identidad</span></span> 324 </a> 325 <div class="pw-info"> 326 <h3 class="pw-name"><a href="/sc">
326Municipalidad de San Cristóbal</a></h3> 327 <p class="pw-desc" data-i18n="work.sc.desc">Revitalización del escudo y del sistema de marca para una identidad institucional cercana.</p> 328 </div> 329 </article> 330 331 <article class="pw-item pw-item--3"> 332 <a class="pw-media" href="/suuam" aria-label="SUUAM"> 333 <span class="pw-img-wrap"><img class="pw-img" loading="lazy" decoding="async" src="/img/suuam-index.png" alt="SUUAM"></span> 334 <span class="pw-tags"><span data-i18n="tag.identity">Identidad</span><span data-i18n="tag.visualsystem">Sistema visual</span><span data-i18n="tag.digital">Digital</span></span> 335 </a> 336 <div class="pw-info"> 337 <h3 class="pw-name"><a href="/suuam">SUUAM</a></h3> 338 <p class="pw-desc" data-i18n="work.suuam.desc">Identidad de alto rendimiento gráfico para una plataforma que ordena y potencia la gestión.</p> 339 </div> 340 </article> 341 342 <article class="pw-item pw-item--4"> 343 <a class="pw-media" href="/rovex" aria-label="Rovex"> 344 <span class="pw-img-wrap"><img class="pw-img" loading="lazy" decoding="async" src="/img/rovex-index.png" alt="Rovex"></span> 345 <span class="pw-tags"><span data-i18n="tag.identity">Identidad</span><span data-i18n="tag.industrial">Industrial</span></span> 346 </a> 347 <div class="pw-info"> 348 <h3 class="pw-name"><a href="/rovex">Rovex</a></h3> 349 <p class="pw-desc" data-i18n="work.rovex.desc">Identidad sólida para maquinaria vial: precisión industrial traducida a sistema visual.</p> 350 </div> 351 </article> 352 </div> 353 </div> 354 </section> 355 356 <!-- ========================================================== 357 PROGRAMA DE SERVICIOS â Acordeón editorial (ref. redondo.design) 358 Sección en tema CLARO: el Silk (#silk-content) vira a su rama 359 blanca+amarilla detrás del crema al 85% â inversión negroâblanco 360 manteniendo el efecto reactbits. Reveal de filas + toggle en 361 java/services-accordion.js (ScrollTrigger, para no pre-disparar). 362 ========================================================== --> 363 <section class="services-accordion" id="services" data-theme="light"> 364 <!-- Fondo texturado claro (mismo color/textura que el loader de proyectos): 365 crema opaco + grano + Silk en modo claro. NUNCA transparente. --> 366 <div class="sva-silk" aria-hidden="true"></div> 367 <!-- Capa de inversión negroâblanco (OJoROgY): arranca oscura+grano y se 368 desvanece con el scroll revelando el fondo blanco. La opacidad la 369 scrubea java/services-accordion.js con ScrollTrigger. --> 370 <div class="sva-cover" aria-hidden="true"></div> 371 <div class="sva-container"> 372 <header class="sva-header" data-rh> 373 <span class="mono-tag sva-eyebrow" data-i18n="sva.eyebrow">// SERVICIOS</span> 374 <h2 class="sva-title section-display-title" data-split data-i18n="sva.title">Hacemos más que logos. Convertimos ideas en marcas.</h2> 375 <p class="sva-sub" data-i18n="sva.sub">Combinamos estrategia, creatividad y diseño para construir identidades que tengan sentido, personalidad y posibilidades de crecer.</p> 376 </header> 377 378 <div class="sva-list" data-sva-list> 379 <article class="sva-item" data-sva-item> 380 <h3 class="sva-heading"> 381 <button type="button" class="sva-row" id="sva-btn-01" aria-expanded="false" aria-controls="sva-panel-01"> 382 <span class="sva-num">01</span> 383 <span class="sva-name" data-split data-i18n="sva.01.name">Branding y diseño de marcas</span> 384 <span class="sva-toggle" aria-hidden="true"></span> 385 </button> 386 </h3> 387 <div class="sva-panel" id="sva-panel-01" role="region" aria-labelledby="sva-btn-01"> 388 <div class="sva-panel-inner"> 389 <p class="sva-desc" data-i18n="sva.01.desc">Definimos los atributos que debe expresar la marca antes de diseñarla para asegurar su máximo rendimiento institucional.</p> 390 </div> 391 </div> 392 </article> 393 394 <article class="sva-item" data-sva-item> 395 <h3 class="sva-heading"> 396 <button type="button" class="sva-row" id="sva-btn-02" aria-expanded="false" aria-controls="sva-panel-02">
397 <span class="sva-num">02</span> 398 <span class="sva-name" data-split data-i18n="sva.02.name">Estrategia y contenido</span> 399 <span class="sva-toggle" aria-hidden="true"></span> 400 </button> 401 </h3> 402 <div class="sva-panel" id="sva-panel-02" role="region" aria-labelledby="sva-btn-02"> 403 <div class="sva-panel-inner"> 404 <p class="sva-desc" data-i18n="sva.02.desc">Planes integrales de comunicación medibles y ajustables para conectar con audiencias especÃficas de manera real.</p> 405 </div> 406 </div> 407 </article> 408 409 <article class="sva-item" data-sva-item> 410 <h3 class="sva-heading"> 411 <button type="button" class="sva-row" id="sva-btn-03" aria-expanded="false" aria-controls="sva-panel-03"> 412 <span class="sva-num">03</span> 413 <span class="sva-name" data-split data-i18n="sva.03.name">Producción audiovisual</span> 414 <span class="sva-toggle" aria-hidden="true"></span> 415 </button> 416 </h3> 417 <div class="sva-panel" id="sva-panel-03" role="region" aria-labelledby="sva-btn-03"> 418 <div class="sva-panel-inner"> 419 <p class="sva-desc" data-i18n="sva.03.desc">Cobertura institucional y spots de alto impacto que combinan de forma precisa ritmo narrativo, estética y funcionalidad.</p> 420 </div> 421 </div> 422 </article> 423 424 <article class="sva-item" data-sva-item> 425 <h3 class="sva-heading"> 426 <button type="button" class="sva-row" id="sva-btn-04" aria-expanded="false" aria-controls="sva-panel-04"> 427 <span class="sva-num">04</span> 428 <span class="sva-name" data-split data-i18n="sva.04.name">UX/UI & Diseño web</span> 429 <span class="sva-toggle" aria-hidden="true"></span> 430 </button> 431 </h3> 432 <div class="sva-panel" id="sva-panel-04" role="region" aria-labelledby="sva-btn-04"> 433 <div class="sva-panel-inner"> 434 <p class="sva-desc" data-i18n="sva.04.desc">Diseñamos interfaces intuitivas centradas en el usuario y desarrollamos sitios web estables para maximizar la conversión digital.</p> 435 </div> 436 </div> 437 </article> 438 </div> 439 </div> 440 </section> 441 442 <!-- ========================================================== 443 WHY US â 2-col Swiss editorial layout 444 H2 grande a la izquierda + body con scroll-to-type reveal a la derecha. 445 La animación scrubea el color de cada palabra con GSAP ScrollTrigger. 446 ========================================================== --> 447 <!-- ========================================================== 448 WHY US â Single column, centered, scroll-to-type effect
449 La sección entera es el "grupo" para una única ScrollTrigger 450 que scrubea el color de cada CARÃCTER del H2 + el body en 451 secuencia, sincronizada con el scroll del usuario. 452 ========================================================== --> 453 <!-- ========================================================== 454 WHY US â Pinned scroll-to-type (estilo jh3y CodePen) 455 La sección se ancla al viewport mientras el usuario scrollea, 456 y los caracteres del H2 + P se iluminan uno a uno en 457 secuencia, atados directamente al scroll wheel (scrub: true). 458 ========================================================== --> 459 <!-- ========================================================== 460 PROCESO DE TRABAJO â Grilla 2 columnas (ref. maqueta Motto): label a la 461 izquierda + contenido a la derecha, dentro del MISMO contenedor que el 462 resto del sitio (bordes alineados). Cada paso es un ACORDEÃN. Dark/Silk. 463 Acordeón: java/proceso.js (uno abierto a la vez). 464 ========================================================== --> 465 <section class="proceso-section" id="proceso" data-theme="dark"> 466 <!-- Fondo Silk oscuro (mismo efecto reactbits que el hero). Opaco. --> 467 <div class="section-silk" data-dark-silk aria-hidden="true"></div> 468 <div class="proceso-inner"> 469 <div class="proceso-grid" data-rh> 470 <aside class="proceso-aside"> 471 <span class="mono-tag proceso-eyebrow" data-i18n="proc.eyebrow">// PROCESO DE TRABAJO</span> 472 </aside> 473 474 <div class="proceso-main"> 475 <h2 class="proceso-title section-display-title" data-split data-i18n="proc.title">Primero entendemos. Después creamos.</h2> 476 <p class="proceso-lead" data-i18n="proc.lead">Cada marca tiene una historia, un contexto y algo que la hace diferente. Nuestro trabajo es descubrirlo, encontrar una idea y convertirla en una identidad que pueda crecer.</p> 477 478 <ul class="proceso-acc" data-proc-list> 479 <li class="proceso-item" data-proc-item> 480 <button type="button" class="proceso-row" id="proc-b1" aria-expanded="false" aria-controls="proc-p1"> 481 <span class="proceso-num">01</span> 482 <span class="proceso-name" data-i18n="proc.01.title">Entender</span> 483 <span class="proceso-icon" aria-hidden="true"></span> 484 </button> 485 <div class="proceso-panel" id="proc-p1" role="region" aria-labelledby="proc-b1"> 486 <div class="proceso-panel-inner"> 487 <p class="proceso-step-lead" data-i18n="proc.01.lead">Antes de diseñar, hacemos preguntas.</p> 488 <p class="proceso-step-desc" data-i18n="proc.01.desc">Conocemos el proyecto, su historia, sus objetivos, sus personas y el contexto en el que se mueve. Investigamos la competencia y buscamos entender qué hace propia a la marca.</p> 489 <p class="proceso-step-tags" data-i18n="proc.01.tags">Exploramos: contexto · competencia · públicos · atributos</p> 490 </div> 491 </div> 492 </li> 493 <li class="proceso-item" data-proc-item> 494 <button type="button" class="proceso-row" id="proc-b2" aria-expanded="false" aria-controls="proc-p2"> 495 <span class="proceso-num">02</span> 496 <span class="proceso-name" data-i18n="proc.02.title">Encontrar la idea</span> 497 <span class="proceso-icon" aria-hidden="true"></span> 498 </button> 499 <div class="proceso-panel" id="proc-p2" role="region" aria-labelledby="proc-b2"> 500 <div class="proceso-panel-inner"> 501 <p class="proceso-step-lead" data-i18n="proc.02.lead">Definimos qué queremos decir y cómo queremos decirlo.</p> 502 <p class="proceso-step-desc" data-i18n="proc.02.desc">Transformamos todo lo que descubrimos en una dirección creativa: posicionamiento, personalidad, tono y una idea que pueda guiar las decisiones de la marca.</p> 503 <p class="proceso-step-tags" data-i18n="proc.02.tags">Definimos: concepto · posicionamiento · personalidad · tono</p> 504 </div> 505 </div> 506 </li> 507 <li class="proceso-item" data-proc-item> 508 <button type="button" class="proceso-row" id="proc-b3" aria-expanded="false" aria-controls="proc-p3">
509 <span class="proceso-num">03</span> 510 <span class="proceso-name" data-i18n="proc.03.title">Darle forma</span> 511 <span class="proceso-icon" aria-hidden="true"></span> 512 </button> 513 <div class="proceso-panel" id="proc-p3" role="region" aria-labelledby="proc-b3"> 514 <div class="proceso-panel-inner"> 515 <p class="proceso-step-lead" data-i18n="proc.03.lead">Convertimos la idea en una identidad.</p> 516 <p class="proceso-step-desc" data-i18n="proc.03.desc">Exploramos caminos visuales y construimos el sistema de identidad: logotipo, tipografÃas, colores, recursos gráficos y todos los elementos que hacen que una marca pueda reconocerse y diferenciarse.</p> 517 <p class="proceso-step-tags" data-i18n="proc.03.tags">Creamos: logotipo · tipografÃa · color · sistema visual</p> 518 </div> 519 </div> 520 </li> 521 <li class="proceso-item" data-proc-item> 522 <button type="button" class="proceso-row" id="proc-b4" aria-expanded="false" aria-controls="proc-p4"> 523 <span class="proceso-num">04</span> 524 <span class="proceso-name" data-i18n="proc.04.title">Hacerla realidad</span> 525 <span class="proceso-icon" aria-hidden="true"></span> 526 </button> 527 <div class="proceso-panel" id="proc-p4" role="region" aria-labelledby="proc-b4"> 528 <div class="proceso-panel-inner"> 529 <p class="proceso-step-lead" data-i18n="proc.04.lead">Una marca no termina cuando se presenta. Empieza ahÃ.</p> 530 <p class="proceso-step-desc" data-i18n="proc.04.desc">Llevamos la identidad a los distintos puntos de contacto y dejamos las herramientas necesarias para que pueda aplicarse de manera consistente y seguir creciendo.</p> 531 <p class="proceso-step-tags" data-i18n="proc.04.tags">Desarrollamos: aplicaciones · piezas · guÃa de marca · activos digitales</p> 532 </div> 533 </div> 534 </li> 535 </ul> 536 </div> 537 </div> 538 </div> 539 </section> 540 541 542 <!-- ========================================================== 543 PREGUNTAS FRECUENTES â Acordeón minimalista (ref. Kudos / NK Studio) 544 Va ANTES del contacto: primero se resuelven dudas, después el CTA final. 545 Reveal "fade in up" con stagger (java/faq.js, GSAP ScrollTrigger). 546 Design system: Geist (tÃtulos) + IBM Plex Sans (cuerpo) + Cofo Sans Mono (labels), 547 tinta #1D1E1C sobre fondo claro corporativo. 548 ========================================================== --> 549 <section class="faq-section" id="faq" aria-labelledby="faq-title" data-theme="light"> 550 <div class="faq-inner"> 551 <div class="faq-head" data-faq-reveal> 552 <span class="faq-eyebrow" data-i18n="faq.eyebrow">// PREGUNTAS FRECUENTES</span> 553 <h2 class="faq-title" id="faq-title" data-i18n="faq.title">Lo que necesitás saber antes de empezar.</h2> 554 <p class="faq-sub" data-i18n="faq.sub">Si estás pensando en trabajar con nosotros, probablemente tengas algunas preguntas. Acá respondemos las más frecuentes. Y si la tuya no aparece, conversemos.</p> 555 </div> 556 557 <ul class="faq-list" data-faq-list> 558 <li class="faq-item" data-faq-item data-faq-reveal> 559 <button class="faq-q" id="faq-b1" aria-expanded="false" aria-controls="faq-a1"> 560 <span class="faq-q-num">01</span> 561 <span class="faq-q-text" data-i18n="faq.q1">¿Cuánto cuesta trabajar con Cruz?</span>
562 <span class="faq-icon" aria-hidden="true"></span> 563 </button> 564 <div class="faq-a" id="faq-a1" role="region" aria-labelledby="faq-b1"> 565 <div class="faq-a-inner"> 566 <p data-i18n="faq.a1">No trabajamos con "paquetes genéricos" ni tarifas estandarizadas, porque no hacemos diseño en serie. Entendemos que la identidad de tu empresa no es un gasto estético, sino un activo comercial. El valor de la inversión depende exclusivamente de la escala del desafÃo, la complejidad del sistema visual y los entregables que tu negocio realmente necesite. Una vez que tenemos nuestra primera sesión de diagnóstico y entendemos tu realidad, armamos una propuesta y un presupuesto a la medida exacta de tu proyecto.</p> 567 </div> 568 </div> 569 </li> 570 571 <li class="faq-item" data-faq-item data-faq-reveal> 572 <button class="faq-q" id="faq-b2" aria-expanded="false" aria-controls="faq-a2"> 573 <span class="faq-q-num">02</span> 574 <span class="faq-q-text" data-i18n="faq.q2">Solo necesito un logo, ¿pueden hacerlo?</span> 575 <span class="faq-icon" aria-hidden="true"></span> 576 </button> 577 <div class="faq-a" id="faq-a2" role="region" aria-labelledby="faq-b2"> 578 <div class="faq-a-inner"> 579 <p data-i18n="faq.a2">En Cruz Estudio no diseñamos "dibujos lindos" ni logotipos aislados. Creemos que una marca gráfica es la firma institucional de tu empresa y debe funcionar dentro de un ecosistema sólido. Por eso, no entregamos un logo suelto; desarrollamos sistemas visuales completos de alto rendimiento (que incluyen estrategia, normativas tipográficas, paletas y aplicaciones) para que tu marca se exprese con coherencia en cada punto de contacto.</p> 580 </div> 581 </div> 582 </li> 583 584 <li class="faq-item" data-faq-item data-faq-reveal> 585 <button class="faq-q" id="faq-b3" aria-expanded="false" aria-controls="faq-a3"> 586 <span class="faq-q-num">03</span> 587 <span class="faq-q-text" data-i18n="faq.q3">Mi empresa ya existe hace años. ¿Tengo que cambiar todo?</span> 588 <span class="faq-icon" aria-hidden="true"></span> 589 </button> 590 <div class="faq-a" id="faq-a3" role="region" aria-labelledby="faq-b3"> 591 <div class="faq-a-inner"> 592 <p data-i18n="faq.a3">Absolutamente no. Cuando un negocio ya está consolidado, el buen diseño no te disfraza de alguien que no sos; revela tu mejor versión. Hacemos un trabajo profundo de auditorÃa para conservar la esencia y los activos que ya funcionan en tu marca, y optimizamos lo que se quedó en el tiempo. El objetivo es que tu imagen alcance el mismo nivel de calidad y profesionalismo que ya tienen tus servicios.</p> 593 </div> 594 </div> 595 </li> 596 597 <li class="faq-item" data-faq-item data-faq-reveal> 598 <button class="faq-q" id="faq-b4" aria-expanded="false" aria-controls="faq-a4"> 599 <span class="faq-q-num">04</span> 600 <span class="faq-q-text" data-i18n="faq.q4">¿Cuánto tiempo lleva desarrollar una identidad?</span> 601 <span class="faq-icon" aria-hidden="true"></span> 602 </button> 603 <div class="faq-a" id="faq-a4" role="region" aria-labelledby="faq-b4"> 604 <div class="faq-a-inner"> 605 <p data-i18n="faq.a4">El rigor técnico requiere método. Un proyecto integral de branding estratégico suele llevar entre 6 y 10 semanas, dependiendo de la magnitud de la empresa. Nuestro proceso no es improvisado: lo dividimos en etapas claras que van desde el Diagnóstico Institucional (Fase 1), pasando por el Desarrollo del sistema visual y verbal (Fase 2), hasta la Sistematización y el Manual de Normas (Fase 3).</p> 606 </div> 607 </div> 608 </li> 609 610 <li class="faq-item" data-faq-item data-faq-reveal> 611 <button class="faq-q" id="faq-b5" aria-expanded="false" aria-controls="faq-a5">
612 <span class="faq-q-num">05</span> 613 <span class="faq-q-text" data-i18n="faq.q5">¿Trabajan con PyMEs o solo con empresas grandes?</span> 614 <span class="faq-icon" aria-hidden="true"></span> 615 </button> 616 <div class="faq-a" id="faq-a5" role="region" aria-labelledby="faq-b5"> 617 <div class="faq-a-inner"> 618 <p data-i18n="faq.a5">Uno de nuestros propósitos principales es la democratización del diseño de alto rendimiento. Esto significa que llevamos el rigor metodológico que usan las grandes marcas internacionales a PyMEs y empresas en pleno crecimiento. Trabajamos tanto con entidades de alcance nacional como con negocios B2B locales que buscan dejar de competir por precio para empezar a comandar respeto en su sector.</p> 619 </div> 620 </div> 621 </li> 622 623 <li class="faq-item" data-faq-item data-faq-reveal> 624 <button class="faq-q" id="faq-b6" aria-expanded="false" aria-controls="faq-a6"> 625 <span class="faq-q-num">06</span> 626 <span class="faq-q-text" data-i18n="faq.q6">No sé exactamente qué servicio necesito. ¿Cómo empezamos?</span> 627 <span class="faq-icon" aria-hidden="true"></span> 628 </button> 629 <div class="faq-a" id="faq-a6" role="region" aria-labelledby="faq-b6"> 630 <div class="faq-a-inner"> 631 <p data-i18n="faq.a6">Todo empieza con una charla. No esperamos que tengas todas las respuestas técnicas; ese es nuestro trabajo. Te invitamos a agendar una sesión de diagnóstico inicial (sin costo). En esos 15 o 20 minutos vamos a escuchar los dolores comerciales de tu empresa, evaluar cómo se está comunicando hoy y contarte con total honestidad si podemos ayudarlos y cuál serÃa la hoja de ruta ideal.</p> 632 </div> 633 </div> 634 </li> 635 </ul> 636 </div> 637 </section> 638 639 <section class="contact-section" id="contact" data-theme="dark"> 640 <!-- Mismo fondo Silk oscuro OPACO que why-us (unificado). El seam entre 641 ambos canvas se disuelve por el mask/feather de .section-silk. --> 642 <div class="section-silk" data-dark-silk aria-hidden="true"></div> 643 <div class="contact-wrapper"> 644 <header class="contact-intro"> 645 <h2 class="contact-display section-display-title" data-split data-i18n="contact.title">Hablemos de tu próximo proyecto.</h2> 646 <p class="mono-label" data-split data-i18n="contact.label">// DISEÃO ESTRATÃGICO â BUENOS AIRES</p> 647 </header> 648 <form action="https://formspree.io/f/xrbekqeb" method="POST" class="form-sistematizado ux-form-grid" data-rise-stagger> 649 <div class="form-intent" data-rise-item> 650 <span class="mono-tag" data-i18n="contact.step1">[01] â ¿EN QUà PODEMOS AYUDARTE?</span> 651 <div class="services-grid"> 652 <label class="service-chip"><input type="checkbox" name="Servicio" value="Branding"><span class="chip-box" data-i18n="contact.chip.branding">BRANDING</span></label> 653 <label class="service-chip"><input type="checkbox" name="Servicio" value="Estrategia"><span class="chip-box" data-i18n="contact.chip.strategy">ESTRATEGIA DIGITAL</span></label> 654 <label class="service-chip"><input type="checkbox" name="Servicio" value="Web_UX"><span class="chip-box" data-i18n="contact.chip.web">DISEÃO WEB / UX</span></label> 655 <label class="service-chip"><input type="checkbox" name="Servicio" value="Audiovisual"><span class="chip-box" data-i18n="contact.chip.av">AUDIOVISUAL</span></label> 656 </div> 657 </div> 658 <div class="form-data"> 659 <span class="mono-tag" data-rise-item data-i18n="contact.step2">[02] â TUS DATOS</span> 660 <div class="input-container full-col" data-rise-item> 661 <input type="text" name="name" id="userName" placeholder=" " required> 662 <label for="userName" data-i18n="contact.name">Tu nombre o empresa (obligatorio)</label> 663 </div> 664 <div class="input-container full-col" data-rise-item> 665 <input type="email" name="email" id="userEmail" placeholder=" " required> 666 <label for="userEmail" data-i18n="contact.email">Correo electrónico (obligatorio)</label> 667 </div> 668 <div class="input-container full-col" data-rise-item> 669 <textarea name="message" id="userMsg" placeholder=" " rows="1" required></textarea> 670 <label for="userMsg" data-i18n="contact.message">Contanos un poco más sobre tu proyecto</label> 671 </div> 672 <div class="reference-block" data-rise-item style="margin-top: 20px; margin-bottom: 20px;">
673 <span class="mono-tag" data-i18n="contact.step3">[03] â REFERENCIA</span> 674 <p style="color: rgba(255, 253, 243, 0.7); font-family: var(--font-reading); font-size: 16px; margin-bottom: 20px; font-weight: 300;" data-i18n="contact.ref.q"> 675 ¿A través de qué medio llegaste a Cruz Estudio? 676 </p> 677 <div class="services-grid"> 678 <label class="service-chip"><input type="radio" name="Origin" value="Recomendacion" required><span class="chip-box" data-i18n="contact.ref.reco">RECOMENDACIÃN</span></label> 679 <label class="service-chip"><input type="radio" name="Origin" value="Instagram" required><span class="chip-box" data-i18n="contact.ref.ig">INSTAGRAM</span></label> 680 <label class="service-chip"><input type="radio" name="Origin" value="Google" required><span class="chip-box" data-i18n="contact.ref.google">BÃSQUEDA (GOOGLE)</span></label> 681 <label class="service-chip"><input type="radio" name="Origin" value="Anuncios" required><span class="chip-box" data-i18n="contact.ref.ads">ANUNCIOS</span></label> 682 </div> 683 </div> 684 <button type="submit" class="cta-submit ux-submit-btn" data-rise-item data-magnetic data-magnetic-strength="0.2"> 685 <span class="cta-text" data-i18n="contact.submit">SOLICITAR REUNIÃN INFORMATIVA</span> 686 <span class="material-symbols-outlined">north_east</span> 687 </button> 688 </div> 689 </form> 690 </div> 691 </section> 692 693 <footer class="footer-global" data-theme="dark"> 694 <div class="footer-line" data-reveal></div> 695 696 <div class="awards-row scroll-reveal" role="list" aria-label="Reconocimientos"> 697 <a href="https://we.directory/collection" target="_blank" rel="noopener noreferrer" class="award-badge" role="listitem" aria-label="Website of the day â WE.directory"> 698 <span class="award-badge-icon material-symbols-sharp" aria-hidden="true">trophy</span> 699 <span class="award-badge-text"> 700 <span class="award-badge-label" data-i18n="footer.we.label">RECONOCIMIENTO</span> 701 <span class="award-badge-title">Website of the day · WE.directory</span> 702 </span> 703 </a> 704 <a href="https://www.awwwards.com/sites/cruz-estudio" target="_blank" rel="noopener noreferrer" class="award-badge" role="listitem" aria-label="Nominee â Awwwards"> 705 <span class="award-badge-icon material-symbols-sharp" aria-hidden="true">social_leaderboard</span> 706 <span class="award-badge-text"> 707 <span class="award-badge-label" data-i18n="footer.we.label">RECONOCIMIENTO</span> 708 <span class="award-badge-title">Nominee · Awwwards</span> 709 </span> 710 </a> 711 <a href="https://www.awwwards.com/sites/cruz-estudio" target="_blank" rel="noopener noreferrer" class="award-badge" role="listitem" aria-label="Honorable Mention â Awwwards"> 712 <span class="award-badge-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M335.38-160v-40H460v-150.15q-51.31-4.08-94.42-41.89-43.12-37.81-52.66-88.42-63.46-7.46-108.19-52.04T160-640v-80h146.15v-80h347.7v80H800v80q0 62.92-44.73 107.5t-108.19 52.04q-9.54 50.61-52.66 88.42-43.11 37.81-94.42 41.89V-200h124.62v40H335.38Zm-29.23-363.38V-680H200v40q0 45.69 30.46 78.5t75.69 38.12Zm267.7 95.56q38.46-38.59 38.46-93.72V-760H347.69v238.46q0 55.13 38.64 93.72 38.65 38.59 93.85 38.59 55.2 0 93.67-38.59Zm80-95.56q45.23-5.31 75.69-38.12Q760-594.31 760-640v-40H653.85v156.62ZM480-574.62Z"/></svg></span> 713 <span class="award-badge-text"> 714 <span class="award-badge-label" data-i18n="footer.we.label">RECONOCIMIENTO</span> 715 <span class="award-badge-title">Honorable Mention · Awwwards</span> 716 </span> 717 </a> 718 </div> 719 720 <div class="footer-grid"> 721 <div class="footer-col" data-reveal>
722 <span class="mono-label" data-i18n="footer.location">UBICACIÃN</span> 723 <div class="col-content"> 724 <p class="reading-small">Buenos Aires, ARG <br> (GMT-3) <span id="footer-clock">00:00</span></p> 725 </div> 726 </div> 727 <div class="footer-col" data-reveal> 728 <span class="mono-label">SAY HELLO</span> 729 <div class="col-content"> 730 <a href="mailto:[email protected]" class="footer-link">[email protected] </a> 731 <p class="reading-small" data-i18n="footer.hello.sub">Branding & Estrategia de marca</p> 732 </div> 733 </div> 734 <div class="footer-col" data-reveal> 735 <span class="mono-label" data-i18n="footer.follow">SEGUINOS</span> 736 <div class="col-content"> 737 <a href="https://www.instagram.com/cruzestudio_/" target="_blank" rel="noopener noreferrer" class="footer-link">Instagram</a> 738 <a href="https://www.linkedin.com/company/cruzdesign" target="_blank" rel="noopener noreferrer" class="footer-link">LinkedIn</a> 739 </div> 740 </div> 741 <div class="footer-col footer-brand-end" data-reveal> 742 <span class="mono-label">©2018â2026</span> 743 <div class="col-content"> 744 <img loading="lazy" decoding="async" src="/img/positivo-pluma.svg" alt="Sello Cruz Estudio" class="pluma-seal"> 745 </div> 746 </div> 747 </div> 748 <div class="custom-cursor"></div> 749 </footer> 750 751 752 753</div> <!-- i18n: PRIMERO entre los defer â traduce el DOM antes de que los 754 splitters (split-reveal/type/faq) partan los titulares en spans. -->
755<script defer src="/java/i18n-dict.js?v=3"></script>
vendor: 1 bytes, line 755
755
756<script defer src="/java/i18n.js?v=1"></script>
vendor: 1 bytes, line 756
756
757<script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
vendor: 1 bytes, line 757
757
758<script defer src="/java/silk-bg.js?v=27"></script>
vendor: 1 bytes, line 758
758
759<script defer src="/java/intro-loader.js?v=24"></script>
vendor: 1 bytes, line 759
759
760<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
vendor: 1 bytes, line 760
760
761<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
vendor: 1 bytes, line 761
761
762<script defer src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
vendor: 1 bytes, line 762
762
763<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
vendor: 1 bytes, line 763
763
764<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
764 765
766<script defer src="/java/loader.js?v=24"></script>
vendor: 1 bytes, line 766
766
767<script defer src="/java/hero-3d.js?v=58"></script>
vendor: 1 bytes, line 767
767
768<script defer src="/java/script.js?v=24"></script>
vendor: 1 bytes, line 768
768
769<script defer src="/java/nav-menu.js?v=24"></script>
769 770<!-- IMPORTANTE: studio-scroll.js DEBE ir antes que type.js y capas.js. 771 Crea el pinSpacer del video (280vh) que shiftea las posiciones de las 772 secciones siguientes. Si los otros pin-triggers (type.js para why-us) 773 se calculan con posiciones viejas, why-us pinea prematuramente y tapa 774 servicios. -->
775<script defer src="/java/studio-scroll.js?v=24"></script>
vendor: 1 bytes, line 775
775
776<script defer src="/java/featured-work.js?v=24"></script>
vendor: 1 bytes, line 776
776
777<script defer src="/java/services-accordion.js?v=24"></script>
vendor: 1 bytes, line 777
777
778<script defer src="/java/text-reveal.js?v=24"></script>
vendor: 1 bytes, line 778
778
779<script defer src="/java/reveal-headers.js?v=24"></script>
vendor: 1 bytes, line 779
779
780<script defer src="/java/split-reveal.js?v=24"></script>
vendor: 1 bytes, line 780
780
781<script defer src="/java/type.js?v=24"></script>
vendor: 1 bytes, line 781
781
782<script defer src="/java/cursor-preview.js?v=24"></script>
vendor: 1 bytes, line 782
782
783<script defer src="/java/theme-watcher.js?v=24"></script>
vendor: 1 bytes, line 783
783
784<script defer src="/java/faq.js?v=25"></script>
vendor: 1 bytes, line 784
784
785<script defer src="/java/proceso.js?v=1"></script>
785 786 787<a href="https://wa.me/5491161105751?text=Hola%20Cruz%20Estudio,%20me%20gustarÃa%20consultar%20por%20un%20proyecto." class="whatsapp-fixed" target="_blank" rel="noopener noreferrer" data-i18n-attr="aria-label:nav.whatsapp" aria-label="Contacto por WhatsApp"> 788 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 789 <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.937 3.658 1.43 5.63 1.43h.004c6.557 0 11.892-5.335 11.895-11.893a11.821 11.821 0 00-3.48-8.413Z"/> 790 </svg> 791</a>
792<script defer src="/java/nav-contrast.js?v=24"></script>
vendor: 1 bytes, line 792
792
793<script defer src="/java/cursor.js?v=26"></script>
vendor: 1 bytes, line 793
793
794<script defer src="/java/lib/lenis.min.js?v=24"></script>
vendor: 1 bytes, line 794
794
795<script defer src="/java/smooth-scroll.js?v=25"></script>
795 796<!-- Reveal del footer: columnas fade-in-up con stagger + lÃnea "line draw" 797 (mismo recurso que about/metodologÃa) -->
798<script> 799(function () { 800 var els = [].slice.call(document.querySelectorAll('.footer-global [data-reveal]')); 801 if (!els.length) return; 802 // Stagger según posición entre hermanos [data-reveal] del mismo bloque. 803 els.forEach(function (el) { 804 var p = el.parentElement; if (!p) return; 805 var sibs = [].filter.call(p.children, function (c) { 806 return c.hasAttribute && c.hasAttribute('data-reveal'); 807 }); 808 var i = sibs.indexOf(el); 809 if (i > 0) el.style.setProperty('--d', (i * 0.1).toFixed(2) + 's'); 810 }); 811 var show = function (e) { e.classList.add('is-visible'); }; 812 if (!('IntersectionObserver' in window) || 813 window.matchMedia('(prefers-reduced-motion: reduce)').matches) { 814 els.forEach(show); return; 815 } 816 var io = new IntersectionObserver(function (entries) { 817 entries.forEach(function (x) { 818 if (x.isIntersecting) { show(x.target); io.unobserve(x.target); } 819 }); 820 }, { threshold: 0.2, rootMargin: '0px 0px -8% 0px' }); 821 els.forEach(function (e) { io.observe(e); }); 822})(); 823</script>
823 824</body> 825</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.