PageSourceSearch

https://www.cruzestudio.com.ar/

html cruzestudio.com.ar collected 2026-10-06 13:34:22 UTC 61,612 bytes, 825 lines download raw bytes

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 &amp; 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.