/* Conexia Telecom — Design Tokens v3 (overlay sobre cx-v2) Aplica el sistema de diseño "ideas/" sin romper lo existente. Carga DESPUÉS de cx-v2.min.css y cx-anim.css. Activado por data-design="v3" en o body, o sin atributo para opt-in selectivo. */ :root { /* Tipografía premium */ --cx3-font: 'Geist', 'Plus Jakarta Sans', ui-sans-serif, -apple-system, sans-serif; --cx3-serif: 'Instrument Serif', Georgia, serif; --cx3-mono: 'Geist Mono', ui-monospace, monospace; --cx3-display: var(--cx3-font); /* Surfaces light */ --cx3-bg: #f9fbfc; --cx3-bg-elev: #FFFFFF; --cx3-surface: #FFFFFF; --cx3-surface-2: #f1f4f6; --cx3-surface-3: #e0e5e9; --cx3-ink-1: #021521; --cx3-ink-2: #172934; --cx3-ink-3: #47555d; --cx3-ink-4: #879197; --cx3-line: rgba(2,21,33, 0.08); --cx3-line-strong: rgba(2,21,33, 0.14); /* Acento cyan-azul (Conexia brand — match logo gradient) */ --cx3-accent: #1ca4af; --cx3-accent-ink: #FFFFFF; --cx3-accent-2: #00575f; --cx3-accent-soft: #edf7f8; --cx3-accent-glow: rgba(28,164,175, 0.20); /* Status */ --cx3-ok: #1e873c; --cx3-warn: #c18400; /* Radii (más generosos que cx-v2) */ --cx3-r-xs: 6px; --cx3-r-sm: 10px; --cx3-r-md: 14px; --cx3-r-lg: 20px; --cx3-r-xl: 28px; /* Shadows con tinte de fondo */ --cx3-shadow-sm: 0 1px 0 rgba(2,21,33,.04), 0 1px 2px rgba(2,21,33,.04); --cx3-shadow-md: 0 1px 0 rgba(2,21,33,.04), 0 8px 24px rgba(2,21,33,.06); --cx3-shadow-lg: 0 1px 0 rgba(2,21,33,.04), 0 24px 60px rgba(2,21,33,.10); --cx3-maxw: 1240px; --cx3-gutter: clamp(20px, 4vw, 56px); } /* Dark mode (opt-in con html[data-theme="dark"]) */ [data-theme="dark"] { --cx3-bg: #021521; --cx3-bg-elev: #0a1e2a; --cx3-surface: #0a1e2a; --cx3-surface-2: #0e2632; --cx3-surface-3: #1c3542; --cx3-ink-1: #f1f4f6; --cx3-ink-2: #c8cfd3; --cx3-ink-3: #aab2b8; --cx3-ink-4: #879197; --cx3-line: rgba(255, 255, 255, 0.08); --cx3-line-strong: rgba(255, 255, 255, 0.14); --cx3-accent-soft: rgba(28,164,175, 0.14); } /* Variantes de acento */ [data-accent="indigo"] { --cx3-accent: #00828c; --cx3-accent-glow: rgba(28,164,175,.20); } [data-accent="emerald"] { --cx3-accent: #1e873c; --cx3-accent-glow: rgba(30,135,60,.20); } [data-accent="coral"] { --cx3-accent: #e0665b; --cx3-accent-glow: rgba(240,87,63,.20); } [data-accent="amber"] { --cx3-accent: #c18400; --cx3-accent-glow: rgba(193,132,0,.22); } /* ═══════════════════════════════════════════════════════════ Utilities — namespace .cx3-* para no chocar con cx-* ═══════════════════════════════════════════════════════════ */ .cx3-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx3-ink-3); } .cx3-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cx3-accent); } .cx3-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; font-family: var(--cx3-font); background: var(--cx3-accent-soft); color: var(--cx3-accent); border: 1px solid color-mix(in oklab, var(--cx3-accent) 18%, transparent); } .cx3-h-display { font-family: var(--cx3-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; color: var(--cx3-ink-1); text-wrap: balance; } .cx3-h-section { font-family: var(--cx3-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(32px, 4vw, 52px); text-wrap: balance; } .cx3-sub { color: var(--cx3-ink-3); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; text-wrap: pretty; font-family: var(--cx3-font); } /* Botones — pill, hover sutil con lift */ .cx3-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-family: var(--cx3-font); font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; } .cx3-btn-primary { background: var(--cx3-ink-1); color: var(--cx3-bg); } .cx3-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2,21,33,.18); color: var(--cx3-bg); } .cx3-btn-accent { background: var(--cx3-accent); color: var(--cx3-accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px var(--cx3-accent-glow); } .cx3-btn-accent:hover { transform: translateY(-1px); color: var(--cx3-accent-ink); } .cx3-btn-ghost { background: transparent; color: var(--cx3-ink-1); border-color: var(--cx3-line-strong); } .cx3-btn-ghost:hover { background: var(--cx3-surface); color: var(--cx3-ink-1); } /* Container */ .cx3-container { max-width: var(--cx3-maxw); margin: 0 auto; padding-left: var(--cx3-gutter); padding-right: var(--cx3-gutter); } /* Section spacing */ .cx3-section { padding-block: clamp(72px, 9vw, 128px); } .cx3-section-sm { padding-block: clamp(48px, 6vw, 80px); } /* Card baseline outline (Emil/Linear style) */ .cx3-card { border-radius: var(--cx3-r-md); background: var(--cx3-surface); border: 1px solid var(--cx3-line); padding: 24px; transition: transform .25s, box-shadow .25s, border-color .25s; } .cx3-card:hover { transform: translateY(-3px); box-shadow: var(--cx3-shadow-lg); border-color: color-mix(in oklab, var(--cx3-accent) 20%, var(--cx3-line)); } /* Service card (con glow accent y flecha al hover) — estilo ideas/ */ .cx3-service-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--cx3-r-md); background: var(--cx3-surface); border: 1px solid var(--cx3-line); position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; } .cx3-service-card:hover { transform: translateY(-3px); box-shadow: var(--cx3-shadow-lg); border-color: color-mix(in oklab, var(--cx3-accent) 25%, var(--cx3-line)); } .cx3-service-card::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(135deg, transparent 60%, var(--cx3-accent-glow)); opacity: 0; transition: opacity .25s; pointer-events: none; border-radius: inherit; } .cx3-service-card:hover::before { opacity: 1; } .cx3-service-card > * { position: relative; z-index: 1; } /* Card icon circular tinted */ .cx3-card-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--cx3-accent-soft); color: var(--cx3-accent); flex-shrink: 0; transition: background .2s, color .2s; } .cx3-card-ico.cx3-ic-blue { background: rgba(74,144,226,.10); color: #00828c; } .cx3-card-ico.cx3-ic-gold { background: rgba(193,132,0,.12); color: #C97B17; } .cx3-card-ico.cx3-ic-cyan { background: rgba(28,164,175,.10); color: #006f78; } .cx3-card-ico.cx3-ic-purple { background: var(--cx3-accent-soft); color: var(--cx3-accent); } .cx3-card-ico.cx3-ic-emerald { background: rgba(30,135,60,.12); color: var(--cx3-ok); } .cx3-card-ico.cx3-ic-coral { background: rgba(240,87,63,.10); color: #e0665b; } /* Arrow indicator (mover al hover) */ .cx3-sc-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cx3-surface-2); color: var(--cx3-ink-2); transition: background .2s, color .2s, transform .2s; margin-top: auto; align-self: flex-end; } .cx3-service-card:hover .cx3-sc-arrow { background: var(--cx3-accent); color: var(--cx3-accent-ink); transform: translateX(3px); } /* Upgrade card: aplica estilo service-card a CUALQUIER card existente cuando lleva .cx3-card-up — clase de opt-in, no rompe lo que no la tenga Spotlight que sigue al cursor (cx-design-v3.js actualiza --cx3-mx/my) */ .cx3-card-up { padding: 26px; border-radius: var(--cx3-r-md); border: 1px solid var(--cx3-line); background: var(--cx3-surface); position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; } .cx3-card-up:hover { transform: translateY(-3px); box-shadow: var(--cx3-shadow-lg); border-color: color-mix(in oklab, var(--cx3-accent) 25%, var(--cx3-line)); } /* Spotlight radial que sigue al cursor (mouse-follow) — sutil */ .cx3-card-up::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(300px circle at var(--cx3-mx, 50%) var(--cx3-my, 50%), color-mix(in oklab, var(--cx3-accent) 10%, transparent), transparent 60%); opacity: 0; transition: opacity .25s; pointer-events: none; border-radius: inherit; z-index: 0; } .cx3-card-up:hover::before { opacity: 1; } /* Border subtle que también responde al cursor — más fino */ .cx3-card-up::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--cx3-mx, 50%) var(--cx3-my, 50%), color-mix(in oklab, var(--cx3-accent) 22%, transparent), transparent 50%); opacity: 0; transition: opacity .3s; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; z-index: 0; } .cx3-card-up:hover::after { opacity: .35; } .cx3-card-up > * { position: relative; z-index: 1; } .cx3-card-up h3 { font-family: var(--cx3-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--cx3-ink-1); } .cx3-card-up p { color: var(--cx3-ink-3); font-size: 14.5px; line-height: 1.55; font-family: var(--cx3-font); } /* Bg deco patterns */ .cx3-bg-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-bg="mesh"] .cx3-bg-deco { background: radial-gradient(60% 50% at 15% 10%, var(--cx3-accent-glow), transparent 60%), radial-gradient(50% 40% at 85% 20%, color-mix(in oklab, var(--cx3-accent) 14%, transparent), transparent 70%), radial-gradient(40% 30% at 50% 90%, color-mix(in oklab, var(--cx3-accent) 8%, transparent), transparent 70%); } [data-bg="grid"] .cx3-bg-deco { background-image: linear-gradient(to right, var(--cx3-line) 1px, transparent 1px), linear-gradient(to bottom, var(--cx3-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } /* ═══════════════════════════════════════════════════════════ CTA final (overlay sobre .cv-cta existente) Refresca el copy y los botones, mantiene el gradient morado ═══════════════════════════════════════════════════════════ */ .cv-cta { border-radius: var(--cx3-r-xl) !important; position: relative; overflow: hidden; /* gradient más profundo, accent violet en lugar de azul */ background: radial-gradient(80% 60% at 10% 0%, color-mix(in oklab, var(--cx3-accent) 28%, #021521) 0%, #021521 60%, #1c3768 100%) !important; } .cv-cta::after { content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 160%; background: radial-gradient(closest-side, var(--cx3-accent-glow), transparent 70%); pointer-events: none; filter: blur(20px); opacity: .9; } .cv-cta__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .cv-cta h2 { font-family: var(--cx3-display) !important; font-size: clamp(28px, 3.4vw, 44px) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.05 !important; text-wrap: balance; margin-bottom: 18px !important; } .cv-cta p { font-family: var(--cx3-font) !important; font-size: clamp(16px, 1.1vw, 18px) !important; line-height: 1.5 !important; color: rgba(255,255,255,.78) !important; text-wrap: pretty; } .cv-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } /* Botón primario del CTA: accent violet con glow */ .cv-cta .cx-btn--primary { background: var(--cx3-accent) !important; color: var(--cx3-accent-ink) !important; border-color: transparent !important; height: 50px !important; padding: 0 24px !important; font-family: var(--cx3-font) !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: -0.005em; border-radius: 999px !important; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 36px var(--cx3-accent-glow); transition: transform .2s, box-shadow .2s; } .cv-cta .cx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 44px var(--cx3-accent-glow); } /* Botón ghost del CTA */ .cv-cta .cx-btn--secondary { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; height: 50px !important; padding: 0 24px !important; font-family: var(--cx3-font) !important; font-weight: 500 !important; font-size: 15px !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, border-color .2s; } .cv-cta .cx-btn--secondary:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.40) !important; color: #fff !important; } .cv-cta__fineprint { margin-top: 22px !important; color: rgba(255,255,255,.55) !important; font-family: var(--cx3-font) !important; font-size: 13px !important; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .cv-cta .cx-eyebrow { font-family: var(--cx3-font) !important; font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,.65) !important; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; } .cv-cta .cx-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx3-accent); display: inline-block; } /* Integraciones — categorías con cards individuales */ .cx3-int-cats { display: flex; flex-direction: column; gap: 36px; margin-top: 24px; } .cx3-int-cat__title { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cx3-ink-4); margin-bottom: 14px; font-family: var(--cx3-font); } .cx3-int-cat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 980px) { .cx3-int-cat__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .cx3-int-cat__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .cx3-int-cat__grid { grid-template-columns: 1fr; } } .cx3-int-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--cx3-surface); border: 1px solid var(--cx3-line); border-radius: var(--cx3-r-sm); text-decoration: none; color: var(--cx3-ink-1); font-family: var(--cx3-font); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; position: relative; overflow: hidden; } .cx3-int-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cx3-accent) 30%, var(--cx3-line)); box-shadow: 0 6px 14px -8px rgba(2,21,33,.10), 0 1px 0 rgba(2,21,33,.04); color: var(--cx3-ink-1); } /* Spotlight mouse-follow para int-card — sutil */ .cx3-int-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px circle at var(--cx3-mx, 50%) var(--cx3-my, 50%), color-mix(in oklab, var(--cx3-accent) 10%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; pointer-events: none; border-radius: inherit; z-index: 0; } .cx3-int-card:hover::before { opacity: 1; } .cx3-int-card > * { position: relative; z-index: 1; } .cx3-int-card__logo { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--cx3-surface-2); flex-shrink: 0; overflow: hidden; padding: 5px; box-sizing: border-box; } .cx3-int-card__logo img, .cx3-int-card__logo svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; object-fit: contain; display: block; } .cx3-int-card__name { font-size: 14px; font-weight: 500; color: var(--cx3-ink-1); letter-spacing: -0.005em; } /* Testimoniales (overlay sobre cv-testimonials-grid existente) */ .cv-testimonials-grid > figure { position: relative; font-family: var(--cx3-font) !important; border-radius: var(--cx3-r-md) !important; border-color: var(--cx3-line) !important; transition: transform .25s, box-shadow .25s, border-color .25s; } .cv-testimonials-grid > figure::before { content: '"'; position: absolute; top: 12px; right: 24px; font-family: var(--cx3-serif); font-size: 84px; line-height: 1; color: var(--cx3-accent-soft); font-style: italic; pointer-events: none; } .cv-testimonials-grid > figure:hover { transform: translateY(-3px); box-shadow: var(--cx3-shadow-lg) !important; border-color: color-mix(in oklab, var(--cx3-accent) 25%, var(--cx3-line)) !important; } .cv-testimonials-grid > figure::after { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--cx3-mx, 50%) var(--cx3-my, 50%), color-mix(in oklab, var(--cx3-accent) 9%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; pointer-events: none; border-radius: inherit; z-index: 0; } .cv-testimonials-grid > figure:hover::after { opacity: 1; } .cv-testimonials-grid > figure > * { position: relative; z-index: 1; } .cv-testimonials-grid > figure blockquote { font-family: var(--cx3-serif) !important; font-size: 1.08rem !important; line-height: 1.55 !important; letter-spacing: -0.01em !important; position: relative; z-index: 1; } .cv-testimonials-grid > figure figcaption strong { font-family: var(--cx3-font); font-weight: 600 !important; letter-spacing: -0.005em; } /* Hero stats (centralita) */ .cx3-hero-stats { display: flex; gap: 28px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--cx3-line); flex-wrap: wrap; } .cx3-hs-n { font-family: var(--cx3-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--cx3-ink-1); } .cx3-hs-l { font-size: 12.5px; color: var(--cx3-ink-3); margin-top: 2px; } /* Trust row */ .cx3-trust-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 28px; color: var(--cx3-ink-3); font-size: 13.5px; flex-wrap: wrap; } .cx3-trust-row svg { color: var(--cx3-accent); } .cx3-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cx3-ink-4); } /* Live indicator */ .cx3-dot-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cx3-ok); box-shadow: 0 0 0 0 color-mix(in oklab, var(--cx3-ok) 50%, transparent); animation: cx3-dot-pulse 1.8s infinite; } @keyframes cx3-dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cx3-ok) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* Selection */ ::selection { background: var(--cx3-accent); color: var(--cx3-accent-ink); } /* Focus visible (accesible) */ :focus-visible { outline: 2px solid var(--cx3-accent); outline-offset: 3px; border-radius: 8px; } /* ── Responsive guard: HEROES ─────────────────────────────────────── Los items de un grid tienen `min-width:auto` por defecto, lo que les impide encoger por debajo de su contenido y hace que el H1 / texto del hero se desborde del viewport en móvil (p.ej. el del typewriter en una sola línea de ~650px). Forzamos `min-width:0` en TODOS los hero inners (convención `*-hero__inner`) para que sus columnas puedan encoger y el contenido haga wrap dentro del ancho disponible. Seguro en desktop (donde sobra espacio). Complementa el fix de wrap en cx-tw.css. */ /* Sólo la(s) columna(s) de TEXTO necesitan min-width:0 para que el H1 haga wrap. Se EXCLUYE el visual (`*-hero__visual`): tiene `margin-left:auto` (shrink-to-fit) y con min-width:0 + colapsaba a 0×0 (imagen del hero invisible en desktop y móvil). */ [class*="-hero__inner"] > *:not([class*="-hero__visual"]) { min-width: 0; } /* Hero visuals CON imagen: ancho DEFINIDO (width:100%, capado por el max-width per-page → ~520px en desktop, full en móvil). Sin esto el contenedor era shrink-to-fit (por `margin-left:auto`) y, con la aún sin descargar (max-content=0), colapsaba a 0×0 → la imagen no tenía caja y el navegador NUNCA la cargaba (ni desktop ni móvil; calendario, starlink, fibra-standard, esim… ~29 landings). `:has(> img)` excluye los mockups CSS /