<section class=”gnx” aria-label=”GN Arquitectos”>
<!– Imagen de fondo: reemplaza por la URL de WordPress (Medios) –>
<img
class=”gnx__bg”
src=”REEMPLAZA_ESTA_URL_POR_TU_IMAGEN_EN_WORDPRESS.png”
alt=”Espacio exterior moderno con estructura y lona de GN Arquitectos”
loading=”lazy”
decoding=”async”
/>
<!– Overlays –>
<div class=”gnx__vignette” aria-hidden=”true”></div>
<div class=”gnx__grain” aria-hidden=”true”></div>
<div class=”gnx__grid” aria-hidden=”true”></div>
<div class=”gnx__wrap”>
<!– Top bar –>
<header class=”gnx__top”>
<div class=”gnx__brand” aria-label=”Marca GN Arquitectos”>
<div class=”gnx__mark” aria-hidden=”true”>GN.</div>
<div class=”gnx__brandText”>
<div class=”gnx__brandName”>GN Arquitectos</div>
<div class=”gnx__brandTag”>Arquitectura + Construcción + Dirección de obra</div>
</div>
</div>
<nav class=”gnx__nav” aria-label=”Navegación rápida”>
<a class=”gnx__navLink” href=”#gnx-proyectos”>Proyectos</a>
<a class=”gnx__navLink” href=”#gnx-servicios”>Servicios</a>
<a class=”gnx__navLink gnx__navLink–cta” href=”#gnx-contacto”>Cotizar</a>
</nav>
</header>
<!– Main grid –>
<div class=”gnx__main”>
<!– Left: Copy –>
<div class=”gnx__left”>
<div class=”gnx__kicker”>
<span class=”gnx__pill”>
<span class=”gnx__pulse” aria-hidden=”true”></span>
Obra con control, no con fe
</span>
<span class=”gnx__pill gnx__pill–soft”>Acabados premium</span>
<span class=”gnx__pill gnx__pill–soft”>Presupuesto defendible</span>
</div>
<h1 class=”gnx__title”>
Construimos espacios que
<span class=”gnx__accent”>se ven caros</span>
y
<span class=”gnx__accent2″>se sienten sólidos</span>.
</h1>
<p class=”gnx__sub”>
Diseño ejecutivo, planeación y ejecución con supervisión real.
Si quieres lujo, durabilidad y claridad en obra — aquí se trabaja con estándares, bitácora y criterio.
</p>
<!– CTA row –>
<div class=”gnx__ctaRow”>
<a class=”gnx__btn gnx__btn–primary” href=”#gnx-contacto”>
Solicitar cotización
<span class=”gnx__arrow” aria-hidden=”true”>→</span>
</a>
<a class=”gnx__btn gnx__btn–ghost” href=”#gnx-proyectos”>
Ver evidencia
<span class=”gnx__arrow” aria-hidden=”true”>↗</span>
</a>
</div>
<!– Trust strip –>
<div class=”gnx__trust” role=”list” aria-label=”Indicadores de confianza”>
<div class=”gnx__stat” role=”listitem”>
<div class=”gnx__statKpi”>+15</div>
<div class=”gnx__statLbl”>años en obra real</div>
</div>
<div class=”gnx__stat” role=”listitem”>
<div class=”gnx__statKpi”>3</div>
<div class=”gnx__statLbl”>sectores: res/com/ind</div>
</div>
<div class=”gnx__stat” role=”listitem”>
<div class=”gnx__statKpi”>Control</div>
<div class=”gnx__statLbl”>tiempos, costos, calidad</div>
</div>
</div>
<!– “Select a path” chips –>
<div class=”gnx__chooser” id=”gnx-servicios” aria-label=”Selecciona tu necesidad”>
<button class=”gnx__chip is-active” data-gnx-tab=”lux” type=”button”>
Residencial de lujo
</button>
<button class=”gnx__chip” data-gnx-tab=”reno” type=”button”>
Remodelación / Rehabilitación
</button>
<button class=”gnx__chip” data-gnx-tab=”ind” type=”button”>
Comercial / Industrial
</button>
</div>
<!– Tab panels –>
<div class=”gnx__panelWrap”>
<div class=”gnx__panel is-active” data-gnx-panel=”lux”>
<ul class=”gnx__bullets”>
<li><strong>Acabados que perduran</strong>: especificación + instalación con estándar.</li>
<li><strong>Arquitectura a tu identidad</strong>: espacios que se sienten “tu poder”.</li>
<li><strong>Sin sorpresas</strong>: alcance claro, presupuesto por partidas y control de cambios.</li>
</ul>
</div>
<div class=”gnx__panel” data-gnx-panel=”reno”>
<ul class=”gnx__bullets”>
<li><strong>Diagnóstico técnico</strong>: patologías, humedad, estructura, instalaciones.</li>
<li><strong>Plan por etapas</strong>: intervención sin destruir de más.</li>
<li><strong>Resultado limpio</strong>: detalles, remates y coherencia estética.</li>
</ul>
</div>
<div class=”gnx__panel” data-gnx-panel=”ind”>
<ul class=”gnx__bullets”>
<li><strong>Eficiencia</strong>: flujo, operación, mantenimiento, seguridad.</li>
<li><strong>Entrega a tiempo</strong>: programación, supervisión y control de proveedores.</li>
<li><strong>Obra defendible</strong>: evidencias, bitácora, revisiones y entregables.</li>
</ul>
</div>
</div>
</div>
<!– Right: Card / Lead –>
<aside class=”gnx__right” aria-label=”Tarjeta de contacto y conversión”>
<div class=”gnx__card”>
<div class=”gnx__cardHead”>
<div class=”gnx__badge”>
<span class=”gnx__badgeDot” aria-hidden=”true”></span>
Disponible para cotizar
</div>
<div class=”gnx__cardTitle”>Cotiza en 60 segundos</div>
<div class=”gnx__cardHint”>Te respondemos con el siguiente paso claro.</div>
</div>
<div class=”gnx__quick”>
<a class=”gnx__quickRow gnx__quickRow–wa” href=”https://wa.me/52TU_NUMERO” target=”_blank” rel=”noopener”>
<span class=”gnx__ico” aria-hidden=”true”>✦</span>
<span class=”gnx__quickTxt”>
<small>Mensaje directo</small>
</span>
<span class=”gnx__go” aria-hidden=”true”>→</span>
</a>
<a class=”gnx__quickRow” href=”mailto:contacto@tudominio.com”>
<span class=”gnx__ico” aria-hidden=”true”>✉</span>
<span class=”gnx__quickTxt”>
Correo
<small>contacto@tudominio.com</small>
</span>
<span class=”gnx__go” aria-hidden=”true”>→</span>
</a>
<a class=”gnx__quickRow” href=”https://gnarquitectos.mx” target=”_blank” rel=”noopener”>
<span class=”gnx__ico” aria-hidden=”true”>⌁</span>
<span class=”gnx__quickTxt”>
Sitio web
<small>gnarquitectos.mx</small>
</span>
<span class=”gnx__go” aria-hidden=”true”>↗</span>
</a>
</div>
<div class=”gnx__divider” role=”separator”></div>
<div class=”gnx__form” id=”gnx-contacto”>
<div class=”gnx__formTitle”>Mini-brief</div>
<div class=”gnx__formGrid”>
<label class=”gnx__field”>
<span>Tipo de proyecto</span>
<select class=”gnx__input” id=”gnx-type”>
<option>Residencial</option>
<option>Comercial</option>
<option>Industrial</option>
<option>Remodelación</option>
</select>
</label>
<label class=”gnx__field”>
<span>Ciudad</span>
<input class=”gnx__input” id=”gnx-city” placeholder=”Guanajuato / Mazatlán / …” />
</label>
<label class=”gnx__field gnx__field–full”>
<span>Qué quieres lograr</span>
<input class=”gnx__input” id=”gnx-goal” placeholder=”Ej: remodelación premium, obra nueva, ampliación…” />
</label>
</div>
<button class=”gnx__btn gnx__btn–secondary” type=”button” id=”gnx-send”>
Enviar por WhatsApp
<span class=”gnx__arrow” aria-hidden=”true”>→</span>
</button>
<p class=”gnx__fine”>
*Esto no envía nada automáticamente: abre WhatsApp con el mensaje listo.
</p>
</div>
<div class=”gnx__quote”>
<div class=”gnx__quoteMark” aria-hidden=”true”>“</div>
<div>
<div class=”gnx__quoteTxt”>
Lo que prometemos es simple: <strong>criterio</strong>, <strong>control</strong> y <strong>ejecución</strong>.
La estética sin técnica es puro maquillaje.
</div>
<div class=”gnx__quoteBy”>— Dirección GN</div>
</div>
</div>
</div>
<!– Floating proof strip –>
<div class=”gnx__proof” id=”gnx-proyectos” aria-label=”Evidencia rápida”>
<div class=”gnx__proofItem”>
<span class=”gnx__proofKpi”>Bitácora</span>
<span class=”gnx__proofLbl”>y reportes</span>
</div>
<div class=”gnx__proofItem”>
<span class=”gnx__proofKpi”>Partidas</span>
<span class=”gnx__proofLbl”>claras</span>
</div>
<div class=”gnx__proofItem”>
<span class=”gnx__proofKpi”>Detalles</span>
<span class=”gnx__proofLbl”>bien rematados</span>
</div>
</div>
</aside>
</div>
</div>
</section>
<!– Sticky mobile CTA –>
<div class=”gnxSticky” role=”region” aria-label=”Acciones rápidas”>
<a class=”gnxSticky__btn” href=”#gnx-contacto”>Cotizar</a>
<a class=”gnxSticky__btn gnxSticky__btn–wa” href=”https://wa.me/52TU_NUMERO” target=”_blank” rel=”noopener”>WhatsApp</a>
</div>
<style>
/* ========== GNX (SCOPED) ========== */
.gnx{
position:relative; isolation:isolate;
border-radius:28px; overflow:hidden;
min-height: clamp(640px, 78vh, 920px);
background:#070a0f;
}
.gnx__bg{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
transform: scale(1.04);
filter: contrast(1.08) saturate(1.08);
}
.gnx__vignette{
position:absolute; inset:0;
background:
radial-gradient(1100px 700px at 18% 24%, rgba(255,255,255,0.12), transparent 58%),
radial-gradient(900px 700px at 82% 40%, rgba(255, 50, 50, 0.18), transparent 62%),
linear-gradient(90deg, rgba(6,8,12,0.90) 0%, rgba(6,8,12,0.62) 52%, rgba(6,8,12,0.84) 100%),
linear-gradient(0deg, rgba(6,8,12,0.86) 0%, rgba(6,8,12,0.18) 54%, rgba(6,8,12,0.55) 100%);
}
/* Subtle grain + grid for “premium” */
.gnx__grain{
position:absolute; inset:0; opacity:.08; mix-blend-mode: overlay;
background-image:url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’260′ height=’260’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’.9′ numOctaves=’3′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’260′ height=’260′ filter=’url(%23n)’ opacity=’.55’/%3E%3C/svg%3E”);
}
.gnx__grid{
position:absolute; inset:0; opacity:.10;
background-image:
linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(closest-side at 50% 40%, #000 0%, transparent 70%);
}
.gnx__wrap{
position:relative; z-index:2;
max-width:1200px;
margin:0 auto;
padding: clamp(18px, 3.6vw, 48px);
color:#fff;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Apple Color Emoji”,”Segoe UI Emoji”;
}
/* Top */
.gnx__top{
display:flex; align-items:center; justify-content:space-between;
gap:14px;
margin-bottom: clamp(16px, 2.8vw, 28px);
}
.gnx__brand{ display:flex; align-items:center; gap:12px; }
.gnx__mark{
width:54px; height:54px;
border-radius:18px;
display:grid; place-items:center;
font-weight:900;
letter-spacing:-0.04em;
background: rgba(255, 50, 50, .18);
border: 1px solid rgba(255, 50, 50, .35);
box-shadow: 0 18px 55px rgba(255,50,50,0.18);
}
.gnx__brandName{ font-weight:900; letter-spacing:-.02em; font-size:14px; line-height:1.1; }
.gnx__brandTag{ font-size:12.5px; color: rgba(255,255,255,.74); margin-top:3px; }
.gnx__nav{ display:flex; gap:10px; flex-wrap:wrap; }
.gnx__navLink{
text-decoration:none; color: rgba(255,255,255,.86);
font-size: 13px; font-weight:700;
padding:10px 12px; border-radius: 14px;
border:1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.gnx__navLink:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.gnx__navLink–cta{
background: linear-gradient(135deg, #ff3232, #ff1f1f);
border-color: transparent;
color:#0a0d12;
}
.gnx__navLink–cta:hover{ background: linear-gradient(135deg, #ff3b3b, #ff1f1f); }
/* Main */
.gnx__main{
display:grid;
grid-template-columns: 1.18fr .92fr;
gap: clamp(16px, 2.8vw, 30px);
align-items:start;
}
.gnx__kicker{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom: 14px; }
.gnx__pill{
display:inline-flex; align-items:center; gap:10px;
padding: 9px 12px;
border-radius: 999px;
border:1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.09);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
font-size: 12.5px; font-weight:800;
letter-spacing: .2px;
}
.gnx__pill–soft{
font-weight:700;
color: rgba(255,255,255,.82);
background: rgba(255,255,255,.06);
}
.gnx__pulse{
width:9px; height:9px; border-radius:50%;
background:#ff3232;
box-shadow: 0 0 0 6px rgba(255,50,50,.16);
}
.gnx__title{
margin: 0 0 12px;
font-size: clamp(30px, 4.2vw, 56px);
line-height: 1.03;
letter-spacing: -0.035em;
text-wrap: balance;
}
.gnx__accent{
color:#ff3232;
text-shadow: 0 18px 70px rgba(255,50,50,.26);
}
.gnx__accent2{
color: rgba(255,255,255,.96);
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
text-decoration-color: rgba(255,50,50,.55);
}
.gnx__sub{
margin:0 0 18px;
max-width: 66ch;
font-size: clamp(14.5px, 1.55vw, 18.5px);
line-height: 1.55;
color: rgba(255,255,255,.84);
}
.gnx__ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin: 14px 0 18px; }
.gnx__btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding: 12px 16px;
border-radius: 16px;
text-decoration:none;
border: 1px solid transparent;
font-weight: 900;
letter-spacing: .1px;
font-size: 14px;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
user-select:none;
}
.gnx__btn:hover{ transform: translateY(-1px); }
.gnx__btn:active{ transform: translateY(0px); }
.gnx__btn–primary{
background: linear-gradient(135deg, #ff3232, #ff1f1f);
color:#0a0d12;
box-shadow: 0 22px 65px rgba(255,50,50,.26);
}
.gnx__btn–primary:hover{ box-shadow: 0 26px 80px rgba(255,50,50,.30); }
.gnx__btn–ghost{
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.16);
color: rgba(255,255,255,.92);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.gnx__btn–ghost:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.gnx__btn–secondary{
width:100%;
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.16);
color: rgba(255,255,255,.92);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.gnx__btn–secondary:hover{ background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); }
.gnx__arrow{ font-weight: 1000; opacity: .9; }
.gnx__trust{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 8px 0 14px;
}
.gnx__stat{
border-radius: 18px;
padding: 12px 12px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gnx__statKpi{ font-weight: 1000; letter-spacing:-.02em; font-size: 16px; margin-bottom: 4px; }
.gnx__statLbl{ font-size: 12.5px; color: rgba(255,255,255,.76); line-height:1.25; }
/* chooser */
.gnx__chooser{
display:flex; gap:8px; flex-wrap:wrap;
margin-top: 10px;
}
.gnx__chip{
cursor:pointer;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.86);
font-weight: 900;
font-size: 12.5px;
letter-spacing: .1px;
transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.gnx__chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.gnx__chip.is-active{
background: rgba(255,50,50,.18);
border-color: rgba(255,50,50,.32);
}
.gnx__panelWrap{ margin-top: 12px; }
.gnx__panel{
display:none;
border-radius: 20px;
background: rgba(0,0,0,.20);
border: 1px solid rgba(255,255,255,.14);
padding: 14px 14px;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gnx__panel.is-active{ display:block; }
.gnx__bullets{
margin: 0;
padding-left: 18px;
color: rgba(255,255,255,.86);
line-height: 1.5;
font-size: 13.8px;
}
.gnx__bullets li{ margin: 6px 0; }
/* Right card */
.gnx__card{
border-radius: 24px;
overflow:hidden;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 35px 95px rgba(0,0,0,.36);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.gnx__cardHead{
padding: 16px 16px 12px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.gnx__badge{
display:inline-flex; align-items:center; gap:10px;
padding: 8px 12px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
background: rgba(34,197,94,.14);
border: 1px solid rgba(34,197,94,.28);
color: rgba(255,255,255,.92);
margin-bottom: 10px;
}
.gnx__badgeDot{
width: 9px; height: 9px; border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}
.gnx__cardTitle{ font-size: 18px; font-weight: 1000; letter-spacing:-.02em; }
.gnx__cardHint{ margin-top: 4px; color: rgba(255,255,255,.74); font-size: 12.8px; }
.gnx__quick{ padding: 12px 16px 8px; display:grid; gap: 10px; }
.gnx__quickRow{
text-decoration:none;
display:grid;
grid-template-columns: 36px 1fr 18px;
align-items:center;
gap: 10px;
padding: 12px;
border-radius: 18px;
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.92);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.gnx__quickRow:hover{ transform: translateY(-1px); background: rgba(0,0,0,.26); border-color: rgba(255,255,255,.24); }
.gnx__quickRow–wa .gnx__ico{
background: rgba(34,197,94,.14);
border-color: rgba(34,197,94,.28);
}
.gnx__ico{
width: 36px; height: 36px;
border-radius: 14px;
display:grid; place-items:center;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
font-weight: 1000;
}
.gnx__quickTxt{ font-weight: 900; }
.gnx__quickTxt small{
display:block; margin-top: 2px;
font-weight: 700;
color: rgba(255,255,255,.70);
font-size: 12px;
}
.gnx__go{ font-weight: 1000; opacity: .85; }
.gnx__divider{ height:1px; background: rgba(255,255,255,.12); margin: 8px 0; }
.gnx__form{ padding: 12px 16px 12px; }
.gnx__formTitle{ font-weight: 1000; margin-bottom: 10px; letter-spacing: -.02em; }
.gnx__formGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.gnx__field{ display:grid; gap: 6px; }
.gnx__field–full{ grid-column: 1 / -1; }
.gnx__field span{ font-size: 12px; color: rgba(255,255,255,.74); font-weight: 800; }
.gnx__input{
width: 100%;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.18);
color: rgba(255,255,255,.92);
outline: none;
}
.gnx__input:focus{
border-color: rgba(255,50,50,.35);
box-shadow: 0 0 0 6px rgba(255,50,50,.12);
}
.gnx__fine{
margin: 8px 0 0;
font-size: 11.8px;
color: rgba(255,255,255,.62);
line-height: 1.35;
}
.gnx__quote{
margin: 10px 16px 16px;
padding: 14px 14px;
border-radius: 20px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
display:grid;
grid-template-columns: 26px 1fr;
gap: 10px;
}
.gnx__quoteMark{ font-size: 32px; line-height: 1; opacity: .9; color: rgba(255,50,50,.95); }
.gnx__quoteTxt{ font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.45; }
.gnx__quoteBy{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.70); font-weight: 800; }
.gnx__proof{
margin-top: 12px;
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
}
.gnx__proofItem{
border-radius: 18px;
padding: 12px 12px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gnx__proofKpi{ display:block; font-weight: 1000; font-size: 13px; }
.gnx__proofLbl{ display:block; font-weight: 800; font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px; }
/* Sticky CTA (mobile) */
.gnxSticky{
position: fixed;
left: 0; right: 0; bottom: 12px;
display:none;
z-index: 9999;
justify-content: center;
gap: 10px;
padding: 0 12px;
}
.gnxSticky__btn{
max-width: 220px;
width: 46%;
text-align:center;
text-decoration:none;
font-weight: 1000;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
color: rgba(255,255,255,.92);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.gnxSticky__btn–wa{
background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.95));
border-color: transparent;
color: #06110a;
}
/* Responsive */
@media (max-width: 980px){
.gnx__main{ grid-template-columns: 1fr; }
.gnx__nav{ display:none; }
.gnx__trust{ grid-template-columns: 1fr; }
.gnx__proof{ grid-template-columns: 1fr; }
.gnx__formGrid{ grid-template-columns: 1fr; }
.gnxSticky{ display:flex; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.gnx__navLink, .gnx__btn, .gnx__quickRow, .gnx__chip{ transition:none; }
.gnx__bg{ transform:none; }
}
</style>
<script>
(function(){
// Tabs
const chips = document.querySelectorAll(“.gnx__chip”);
const panels = document.querySelectorAll(“.gnx__panel”);
function activate(tab){
chips.forEach(c => c.classList.toggle(“is-active”, c.dataset.gnxTab === tab));
panels.forEach(p => p.classList.toggle(“is-active”, p.dataset.gnxPanel === tab));
}
chips.forEach(c => c.addEventListener(“click”, () => activate(c.dataset.gnxTab)));
// WhatsApp composer (mini-brief)
const btn = document.getElementById(“gnx-send”);
const type = document.getElementById(“gnx-type”);
const city = document.getElementById(“gnx-city”);
const goal = document.getElementById(“gnx-goal”);
if(btn){
btn.addEventListener(“click”, () => {
const t = (type && type.value) ? type.value : “Proyecto”;
const c = (city && city.value) ? city.value : “—”;
const g = (goal && goal.value) ? goal.value : “—”;
const msg =
“Hola GN Arquitectos. Quiero cotizar:\n” +
“• Tipo: ” + t + “\n” +
“• Ciudad: ” + c + “\n” +
“• Objetivo: ” + g + “\n\n” +
“¿Cuál es el siguiente paso y qué información necesitas para darme un estimado?”;
const phone = “52TU_NUMERO”; // <– CAMBIA ESTO (52 + número con lada, sin espacios)
const url = “https://wa.me/” + phone + “?text=” + encodeURIComponent(msg);
window.open(url, “_blank”, “noopener”);
});
}
})();
</script>