.ol-art-hero::before { content: ''; position: absolute; top: -30%; left: -10%; width: 70%; height: 140%; background: radial-gradient(ellipse at center, rgba(129,140,248,0.07) 0%, transparent 60%); pointer-events: none; } .ol-art-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent); } .ol-art-hero-inner { width: 90%; max-width: 1600px; margin: 0 auto; position: relative; z-index: 1; } .ol-art-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } @media (max-width: 1000px) { .ol-art-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .ol-art-hero-right { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 0.25rem; } .ol-art-hero-copy { font-size: 15px; color: rgba(240,240,245,0.48); line-height: 1.8; margin: 0; } .ol-art-badges { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .ol-art-cat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid; } .ol-art-cat.rendimiento { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); color: #818CF8; } .ol-art-cat.tecnologia { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); color: #38BDF8; } .ol-art-cat.diseno { background: rgba(236,72,153,0.1); border-color: rgba(236,72,153,0.3); color: #F472B6; } .ol-art-cat.ecommerce { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #34D399; } .ol-art-cat.estrategia { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #FBBF24; } .ol-art-readtime { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 12px; font-weight: 600; color: rgba(240,240,245,0.5); padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } .ol-art-title { font-size: clamp(2.2rem, 4.5vw, 3.75rem); font-weight: 900; color: #F0F0F5; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 1.5rem; } .ol-art-excerpt { font-size: 1.0625rem; color: rgba(240,240,245,0.55); line-height: 1.75; margin: 0 0 2rem; } .ol-art-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); } .ol-art-meta-author { display: flex; align-items: center; gap: 0.75rem; } .ol-art-meta-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #C9A84C, #8B7236); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #08080E; border: 1px solid rgba(201,168,76,0.3); } .ol-art-meta-author-info { display: flex; flex-direction: column; gap: 2px; } .ol-art-meta-author-name { font-size: 13px; font-weight: 700; color: rgba(240,240,245,0.85); } .ol-art-meta-author-role { font-size: 11.5px; color: rgba(240,240,245,0.4); } .ol-art-meta-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.08); } .ol-art-meta-item { font-size: 12.5px; color: rgba(240,240,245,0.45); display: inline-flex; align-items: center; gap: 0.35rem; } .ol-art-meta-item svg { opacity: 0.5; } /* ============================================================ FEATURED IMAGE BAND ============================================================ */ .ol-art-featured-band { background: #04040A; padding: 3rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .ol-art-featured-inner { width: 90%; max-width: 1600px; margin: 0 auto; } .ol-art-featured { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(201,168,76,0.15); background: #0C0C18; box-shadow: 0 30px 80px rgba(0,0,0,0.45); } .ol-art-featured img { width: 100%; height: auto; display: block; aspect-ratio: 21/9; object-fit: cover; } @media (max-width: 760px) { .ol-art-featured img { aspect-ratio: 16/10; } } .ol-art-featured-caption { position: absolute; left: 1.25rem; bottom: 1.25rem; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(8,8,14,0.72); border: 1px solid rgba(201,168,76,0.25); color: #C9A84C; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================================ ARTICLE LAYOUT ============================================================ */ .ol-art-section { background: #08080E; padding: 5rem 0 6rem; position: relative; } .ol-art-inner { width: 90%; max-width: 1600px; margin: 0 auto; } .ol-art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5rem; align-items: start; } @media (max-width: 1100px) { .ol-art-layout { grid-template-columns: 1fr; gap: 3rem; } } /* ============================================================ ARTICLE BODY ============================================================ */ .ol-art-body { max-width: none; width: 100%; font-family: 'Inter', system-ui, sans-serif; } .ol-art-body > h2 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 800; color: #F0F0F5; letter-spacing: -0.025em; margin: 3.5rem 0 1.25rem; line-height: 1.2; scroll-margin-top: 110px; position: relative; } .ol-art-body > h2::before { content: ''; position: absolute; left: -1.25rem; top: 0.5em; width: 4px; height: 1.1em; background: linear-gradient(180deg, #C9A84C, rgba(201,168,76,0.2)); border-radius: 2px; } @media (max-width: 760px) { .ol-art-body > h2::before { display: none; } } .ol-art-body > h2:first-child { margin-top: 0; } .ol-art-body > h3 { font-size: 1.125rem; font-weight: 700; color: rgba(240,240,245,0.9); margin: 2rem 0 0.75rem; letter-spacing: -0.015em; } .ol-art-body > p { font-size: 1.0625rem; color: rgba(240,240,245,0.72); line-height: 1.85; margin: 0 0 1.25rem; } .ol-art-body > p.lead::first-letter { float: left; font-size: 3.75rem; font-weight: 900; color: #C9A84C; line-height: 0.9; padding: 0.3rem 0.75rem 0 0; letter-spacing: -0.04em; } .ol-art-body strong { color: #F0F0F5; font-weight: 700; } .ol-art-body a:not([class]) { color: #C9A84C; text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.3); transition: all 0.2s; } .ol-art-body a:not([class]):hover { border-bottom-color: #C9A84C; color: #E0BB5D; } .ol-art-body > ul, .ol-art-body > ol { margin: 0 0 1.5rem 0; padding: 0; list-style: none; } .ol-art-body > ul > li, .ol-art-body > ol > li { position: relative; padding: 0.25rem 0 0.25rem 1.75rem; font-size: 1.0625rem; color: rgba(240,240,245,0.72); line-height: 1.8; margin-bottom: 0.5rem; } .ol-art-body > ul > li::before { content: ''; position: absolute; left: 0; top: 0.85rem; width: 6px; height: 6px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.15); } .ol-art-body > ol { counter-reset: li; } .ol-art-body > ol > li { counter-increment: li; } .ol-art-body > ol > li::before { content: counter(li); position: absolute; left: 0; top: 0.35rem; font-size: 11px; font-weight: 800; color: #C9A84C; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .ol-art-body > blockquote { position: relative; margin: 2.5rem 0; padding: 1.75rem 1.75rem 1.75rem 3.5rem; background: linear-gradient(135deg, rgba(201,168,76,0.06), rgba(201,168,76,0.02)); border: 1px solid rgba(201,168,76,0.15); border-left: 3px solid #C9A84C; border-radius: 0 12px 12px 0; } .ol-art-body > blockquote::before { content: '"'; position: absolute; left: 1rem; top: 0.25rem; font-size: 3.5rem; font-weight: 900; color: rgba(201,168,76,0.35); font-family: Georgia, serif; line-height: 1; } .ol-art-body > blockquote p { margin: 0; font-size: 1.125rem; font-style: italic; color: rgba(240,240,245,0.85); line-height: 1.7; } .ol-art-cta-inline { margin: 3.5rem 0; padding: 2.25rem 2.5rem; background: radial-gradient(ellipse at 70% 30%, rgba(201,168,76,0.15) 0%, transparent 60%), #0C0C18; border: 1px solid rgba(201,168,76,0.25); border-radius: 16px; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } @media (max-width: 700px) { .ol-art-cta-inline { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; } } .ol-art-cta-inline-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(201,168,76,0.7); margin: 0 0 0.5rem; } .ol-art-cta-inline h3 { margin: 0 0 0.5rem; font-size: 1.375rem; font-weight: 800; color: #F0F0F5; letter-spacing: -0.02em; line-height: 1.25; } .ol-art-cta-inline p { margin: 0; font-size: 0.9375rem; color: rgba(240,240,245,0.6); line-height: 1.65; } .ol-art-cta-inline-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; background: #C9A84C; color: #08080E; font-size: 13.5px; font-weight: 700; text-decoration: none; border-radius: 8px; white-space: nowrap; transition: background 0.2s, transform 0.15s; } .ol-art-cta-inline-btn:hover { background: #D4B45C; transform: translateY(-1px); } .ol-art-share { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 3.5rem 0 2rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); } .ol-art-share-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,240,245,0.58); margin-right: 0.5rem; } .ol-art-share-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: rgba(240,240,245,0.55); text-decoration: none; transition: all 0.2s; } .ol-art-share-btn:hover { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); color: #C9A84C; } .ol-art-author-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 1.25rem; align-items: center; margin: 2rem 0 0; padding: 1.75rem; background: #0C0C18; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; } @media (max-width: 600px) { .ol-art-author-card { grid-template-columns: 56px 1fr; gap: 1rem; } .ol-art-author-card-btn { grid-column: 1 / -1; text-align: center; } } .ol-art-author-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #C9A84C, #8B7236); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 900; color: #08080E; border: 2px solid rgba(201,168,76,0.3); } .ol-art-author-info .label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(201,168,76,0.85); margin-bottom: 0.3rem; } .ol-art-author-info .name { display: block; font-size: 1rem; font-weight: 700; color: #F0F0F5; margin-bottom: 0.15rem; } .ol-art-author-info .bio { font-size: 13px; color: rgba(240,240,245,0.5); line-height: 1.5; } .ol-art-author-card-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.1rem; border: 1px solid rgba(201,168,76,0.3); border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #C9A84C; text-decoration: none; transition: all 0.2s; } .ol-art-author-card-btn:hover { background: rgba(201,168,76,0.08); border-color: #C9A84C; } /* ============================================================ SIDEBAR ============================================================ */ .ol-art-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 110px; } @media (max-width: 1100px) { .ol-art-sidebar { position: static; } } .ol-sb-widget { background: #0C0C18; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 1.5rem; } .ol-sb-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,240,245,0.58); margin: 0 0 1.1rem; } .ol-sb-cta { background: rgba(201,168,76,0.05); border-color: rgba(201,168,76,0.18); text-align: center; padding: 1.75rem 1.5rem; } .ol-sb-cta-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: #C9A84C; } .ol-sb-cta-title { font-size: 1rem; font-weight: 700; color: #F0F0F5; letter-spacing: -0.02em; margin: 0 0 0.45rem; line-height: 1.3; } .ol-sb-cta-sub { font-size: 12.5px; color: rgba(240,240,245,0.58); line-height: 1.6; margin: 0 0 1.25rem; } .ol-sb-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; padding: 0.75rem 1rem; background: #C9A84C; border: none; border-radius: 7px; font-size: 13px; font-weight: 700; color: #08080E; text-decoration: none; transition: background 0.2s, transform 0.15s; } .ol-sb-cta-btn:hover { background: #D4B45C; transform: translateY(-1px); } .ol-sb-cta-wa { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 11.5px; color: #25D366; text-decoration: none; margin-top: 0.75rem; font-weight: 600; } .ol-sb-cta-wa:hover { opacity: 0.8; } .ol-sb-toc { display: flex; flex-direction: column; gap: 0; } .ol-sb-toc-link { position: relative; display: block; font-size: 12.5px; color: rgba(240,240,245,0.5); text-decoration: none; padding: 0.55rem 0 0.55rem 1rem; border-left: 2px solid rgba(255,255,255,0.06); line-height: 1.45; transition: all 0.2s; } .ol-sb-toc-link:hover { color: rgba(240,240,245,0.85); border-left-color: rgba(201,168,76,0.4); } .ol-sb-toc-link.active { color: #C9A84C; border-left-color: #C9A84C; background: linear-gradient(90deg, rgba(201,168,76,0.06), transparent); font-weight: 600; } .ol-sb-services { display: flex; flex-direction: column; gap: 0.5rem; } .ol-sb-svc-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.75rem; border-radius: 8px; text-decoration: none; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); transition: all 0.2s; } .ol-sb-svc-link:hover { background: rgba(201,168,76,0.06); border-color: rgba(201,168,76,0.15); } .ol-sb-svc-icon { width: 30px; height: 30px; border-radius: 6px; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.12); display: flex; align-items: center; justify-content: center; color: rgba(201,168,76,0.7); flex-shrink: 0; } .ol-sb-svc-text { display: flex; flex-direction: column; gap: 0.1rem; } .ol-sb-svc-name { font-size: 13px; font-weight: 600; color: rgba(240,240,245,0.75); line-height: 1.2; } .ol-sb-svc-link:hover .ol-sb-svc-name { color: #C9A84C; } .ol-sb-svc-sub { font-size: 11px; color: rgba(240,240,245,0.58); } .ol-sb-related { display: flex; flex-direction: column; gap: 0; } .ol-sb-related-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); text-decoration: none; align-items: flex-start; transition: all 0.2s; } .ol-sb-related-item:last-child { border-bottom: none; padding-bottom: 0; } .ol-sb-related-item:first-child { padding-top: 0; } .ol-sb-related-num { font-size: 11px; font-weight: 800; color: rgba(201,168,76,0.85); min-width: 18px; margin-top: 2px; } .ol-sb-related-info { display: flex; flex-direction: column; gap: 0.2rem; } .ol-sb-related-title { font-size: 13px; font-weight: 600; color: rgba(240,240,245,0.65); line-height: 1.35; transition: color 0.2s; } .ol-sb-related-item:hover .ol-sb-related-title { color: #C9A84C; } .ol-sb-related-meta { font-size: 11px; color: rgba(240,240,245,0.58); } /* ============================================================ NEXT READ ============================================================ */ .ol-art-nextread { background: #0A0A14; padding: 5rem 0 4rem; border-top: 1px solid rgba(255,255,255,0.06); position: relative; } .ol-art-nextread::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.15), transparent); } .ol-art-nextread-inner { width: 90%; max-width: 1600px; margin: 0 auto; } .ol-art-nextread-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 2.5rem; gap: 2rem; flex-wrap: wrap; } .ol-art-nextread-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(201,168,76,0.7); margin: 0 0 0.75rem; } .ol-art-nextread-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: #F0F0F5; letter-spacing: -0.025em; line-height: 1.15; margin: 0; } .ol-art-nextread-all { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 13px; font-weight: 600; color: #C9A84C; text-decoration: none; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(201,168,76,0.3); transition: all 0.2s; } .ol-art-nextread-all:hover { border-bottom-color: #C9A84C; } .ol-art-nextread-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .ol-art-nextread-grid { grid-template-columns: 1fr; } } .ol-art-nextread-card { background: #0C0C18; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: all 0.25s; } .ol-art-nextread-card:hover { border-color: rgba(201,168,76,0.25); } .ol-art-nextread-thumb { position: relative; background: linear-gradient(135deg, #0D0D1E, #14142A, #0A0A18); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ol-art-nextread-thumb::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.1) 0%, transparent 65%); } .ol-art-nextread-thumb::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px); background-size: 28px 28px; } .ol-art-nextread-num { position: relative; z-index: 1; font-size: 3rem; font-weight: 900; color: rgba(201,168,76,0.25); letter-spacing: -0.05em; } .ol-art-nextread-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; } .ol-art-nextread-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .ol-art-nextread-meta { font-size: 11px; color: rgba(240,240,245,0.3); } .ol-art-nextread-h { font-size: 1rem; font-weight: 700; color: #F0F0F5; letter-spacing: -0.02em; line-height: 1.3; margin: 0; transition: color 0.2s; } .ol-art-nextread-card:hover .ol-art-nextread-h { color: #C9A84C; } .ol-art-nextread-excerpt { font-size: 13px; color: rgba(240,240,245,0.5); line-height: 1.6; margin: 0; flex: 1; } .ol-art-nextread-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 12px; font-weight: 600; color: #C9A84C; margin-top: 0.25rem; } .ol-blog-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); color: #C9A84C; } .ol-blog-cat.rendimiento { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); color: #818CF8; } .ol-blog-cat.tecnologia { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.2); color: #38BDF8; } .ol-blog-cat.diseno { background: rgba(236,72,153,0.1); border-color: rgba(236,72,153,0.2); color: #F472B6; } .ol-blog-cat.ecommerce { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #34D399; } .ol-blog-cat.estrategia { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); color: #FBBF24; } /* ============================================================ CTA BAND ============================================================ */ .ol-blog-cta-band { background: #04040A; padding: 5rem 0; position: relative; } .ol-blog-cta-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent); } .ol-blog-cta-band-inner { width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; } @media (max-width: 760px) { .ol-blog-cta-band-inner { grid-template-columns: 1fr; gap: 2rem; } } .ol-blog-cta-band-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(201,168,76,0.85); margin: 0 0 0.75rem; } .ol-blog-cta-band-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #F0F0F5; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 0.75rem; } .ol-blog-cta-band-sub { font-size: 15px; color: rgba(240,240,245,0.58); line-height: 1.7; margin: 0; max-width: 60ch; } .ol-blog-cta-band-actions { display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; } .ol-blog-cta-band-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.75rem; background: #C9A84C; border-radius: 8px; font-size: 14px; font-weight: 700; color: #08080E; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.15s; } .ol-blog-cta-band-btn:hover { background: #D4B45C; transform: translateY(-1px); } .ol-blog-cta-band-wa { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 12.5px; font-weight: 600; color: #25D366; text-decoration: none; } .ol-blog-cta-band-wa:hover { opacity: 0.8; }
Saltar al contenido
Atención personalizada  ·  Ciudad de México
Cotizar proyecto →
Analítica 9 min de lectura

Cómo vincular Google Analytics 4 a tu sitio

Google Analytics 4 te dice qué hace la gente en tu sitio: de dónde llega, qué ve y dónde se va. Te mostramos cómo vincularlo paso a paso, sin código complicado.

OL
Equipo OrigenLab Desarrollo Web & Diseño Digital
Guía profesional

Tener un sitio bonito no sirve de mucho si no sabes qué pasa dentro. ¿La gente llega y se va? ¿Qué página los convence? ¿Desde qué celular o ciudad entran? Sin medición, todo es adivinar.

Google Analytics 4 responde esas preguntas gratis. En esta guía lo conectamos de principio a fin: crear la cuenta, obtener tu ID de medición, instalar el código y confirmar que los datos ya estén entrando.

Por qué medir tu sitio con Google Analytics

Un sitio sin analítica es como una tienda sin caja registradora: sabes que entra gente, pero no cuánta, ni qué mira, ni qué la hace comprar.

Google Analytics 4 (GA4) es la herramienta gratuita de Google para responder esas preguntas. Te muestra cuántas personas visitan tu sitio, de dónde llegan (Google, redes, un anuncio), qué páginas ven, desde qué dispositivo y en qué punto se van.

Con esos datos dejas de adivinar. Sabes qué campaña trae clientes reales, qué página convierte y qué contenido nadie lee. En OrigenLab dejamos Google Analytics configurado en cada proyecto que entregamos, justamente para que el cliente vea resultados desde el primer día.

Esta guía te lleva de cero a tener Google Analytics funcionando. Aplica igual para un sitio hecho a medida, un WordPress o una tienda Shopify.

Paso 1: Crea tu cuenta y propiedad de Google Analytics 4

Entra a analytics.google.com con tu cuenta de Google. Si es tu primera vez, Google te pedirá crear una cuenta (el contenedor general, normalmente el nombre de tu empresa).

Dentro de la cuenta creas una propiedad, que es donde vive la información de un sitio. Haz clic en Administrar (el engrane), luego Crear → Propiedad, y define:

  • Nombre de la propiedad — por ejemplo, "Sitio web de tu empresa".
  • Zona horaria — la de México, para que los reportes cuadren con tus horarios.
  • Moneda — pesos mexicanos (MXN), si vendes en México.

Google te preguntará el tamaño y la categoría de tu negocio. Son datos informativos; elige lo que más se acerque y continúa.

Paso 2: Crea un flujo de datos web

Una vez creada la propiedad, Google te pide elegir una plataforma. Para un sitio o tienda, selecciona Web.

Ahí creas un flujo de datos (data stream): escribe la URL de tu sitio y un nombre para identificarlo.

Deja activada la medición mejorada. Con eso, Google Analytics registra automáticamente los eventos útiles — páginas vistas, scroll, clics a enlaces externos, búsquedas internas, envíos de formulario y reproducción de videos — sin que configures nada.

Paso 3: Copia tu ID de medición (G-XXXXXXX)

Al terminar el flujo de datos, Google te muestra el ID de medición (Measurement ID). Tiene el formato G-XXXXXXX y es la "matrícula" que conecta tu sitio con tu propiedad de Analytics.

Si no lo ves, lo encuentras siempre en Administrar → Recogida y modificación de datos → Flujos de datos, abriendo tu flujo web. Cópialo: lo vas a necesitar en el siguiente paso.

Guarda tu ID de medición a la mano. Todo lo que sigue depende de pegar ese G-XXXXXXX en el lugar correcto de tu sitio.

Paso 4: Instala el código en tu sitio

Hay dos caminos. Elige uno solo — instalar por dos vías a la vez duplica los datos.

Opción A: etiqueta gtag.js directa

En el mismo flujo de datos, Google te da una etiqueta de Google (gtag.js): un bloque de código que empieza con <!-- Google tag -->. Cópialo completo y pégalo dentro de la sección <head> de tu sitio, en todas las páginas. Es la vía más directa cuando tienes acceso al código.

Opción B: Google Tag Manager

Si prefieres no tocar el código cada vez, instala Google Tag Manager una sola vez y, desde su panel, agrega una etiqueta de "Google Analytics: GA4" con tu ID de medición. Es ideal si vas a manejar varias etiquetas (Analytics, píxeles, conversiones) sin depender de un programador.

Paso 5: Conéctalo en WordPress o Shopify

Si tu sitio corre en una plataforma, tienes atajos:

  • WordPress — usa un plugin oficial de Google (Site Kit) o inserta el contenedor de Tag Manager. Evita pegar el código en dos plugins distintos.
  • Shopify — conéctalo desde el canal de Google y YouTube, que inserta el código en toda la tienda automáticamente. Si prefieres manual, pega la etiqueta en la sección <head> del archivo theme.liquid.

La regla de oro es la misma: una sola vía de instalación por sitio.

Paso 6: Verifica que esté midiendo

No des por hecho que quedó bien: confírmalo. En Google Analytics abre el informe Tiempo real y, en otra pestaña, navega tu propio sitio.

  1. Entra a tu sitio y muévete por un par de páginas.
  2. Vuelve a Google Analytics y mira el informe Tiempo real.
  3. Si aparece 1 usuario activo (tú) y el evento page_view, quedó instalado.

Para revisar eventos con más detalle, usa DebugView. Si después de unos minutos no aparece nada, casi siempre es que el código no está en todas las páginas o que hay dos instalaciones peleando entre sí.

Cuándo conviene que alguien lo haga por ti

Vincular Google Analytics es accesible, pero medir bien es otra cosa: definir qué es una conversión para tu negocio, marcar los eventos que importan (cotización enviada, clic a WhatsApp, compra) y leer los reportes sin ahogarte en datos.

En OrigenLab entregamos cada sitio con Google Analytics 4 ya configurado y con los eventos clave marcados, para que desde el primer día veas qué está funcionando y qué no. Si quieres que revisemos tu medición o la dejemos lista, escríbenos — te decimos en concreto qué te falta.

Siguiente paso

¿Listo para llevar tu sitio al siguiente nivel?

Hacemos diagnóstico técnico y estratégico sin costo. Te decimos exactamente qué frena a tu sitio hoy y qué camino tiene más sentido para tu negocio — sin compromiso de compra.

Solicitar diagnóstico
Compartir
OL
Escrito por Equipo OrigenLab Agencia mexicana de desarrollo web. Construimos sitios rápidos, modernos y pensados para convertir — para empresas en CDMX, Monterrey y Guadalajara.
Conocer al equipo

¿Listo para actuar?

Lo que lees aquí lo aplicamos
en cada proyecto.

Si este artículo te hizo preguntarte cómo se aplica en tu negocio, la respuesta más rápida es una conversación directa. Sin compromiso, sin ventas de presión — solo claridad sobre lo que necesitas.