/* ============================================================================ service.css — Hoja de estilos COMPARTIDA de las páginas de servicio de Vértice ---------------------------------------------------------------------------- Una sola fuente de verdad para las 6+ páginas de servicio. Editas aquí, cambian todas. Organizado en capas: 1. TOKENS (:root — identidad + escala tipográfica + sombras + cremas) 2. BASE (reset, body, tipografía base) 3. PRIMITIVAS (.container, .section, .asym, .full-bleed) 4. CHROME (nav, footer, botones) 5. BLOQUES (cada uno = un patrón de maquetación reutilizable) 6. UTILIDADES (eyebrow, reveal, iconos de color) 7. RESPONSIVE IDENTIDAD: mono-tema crema + Source Serif 4 (titulares) + Inter (cuerpo). No romper. El color de ACENTO de cada servicio se inyecta por página con `style="--accent: var(--teal)"` en el (default = azul). ========================================================================== */ /* ── 1. TOKENS ───────────────────────────────────────────────────────────── */ :root { /* color de marca */ --blue: #2563eb; --blue-lt: #3b82f6; --teal: #0ea5e9; --emerald: #10b981; --amber: #f59e0b; /* superficies — tres planos de luz sobre crema (NO tema dual) */ --cream: #f7f5f0; --cream-deep: #f1ece2; /* sección alterna, -1 paso de luz */ --surface: #ffffff; /* cards / formularios */ --ink: #16203d; /* texto */ --ink-band: #131c34; /* única banda oscura (clímax / cadena de valor) */ --muted: #5b6478; --border: rgba(22, 32, 61, 0.10); --border-strong: rgba(22, 32, 61, 0.16); /* acento por página (lo sobreescribe cada servicio) */ --accent: var(--blue); --accent-soft: rgba(37, 99, 235, 0.10); /* radios */ --radius: 12px; --radius-lg: 20px; /* tipografía */ --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, sans-serif; /* escala tipográfica fluida (la jerarquía nace del tamaño, no del color) */ --step--1: clamp(0.8rem, 0.77rem + 0.12vw, 0.875rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --step-1: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem); --step-2: clamp(1.85rem, 1.4rem + 1.9vw, 2.7rem); --step-3: clamp(2.3rem, 1.65rem + 3.2vw, 3.9rem); --step-4: clamp(3.2rem, 1.9rem + 6.4vw, 6.5rem); /* sombras en cascada, tintadas de tinta (nunca negro puro sobre crema) */ --shadow-sm: 0 1px 2px rgba(22, 32, 61, 0.04), 0 2px 6px rgba(22, 32, 61, 0.04); --shadow-md: 0 2px 4px rgba(22, 32, 61, 0.05), 0 8px 16px rgba(22, 32, 61, 0.06), 0 16px 32px rgba(22, 32, 61, 0.05); --shadow-lg: 0 4px 8px rgba(22, 32, 61, 0.05), 0 12px 24px rgba(22, 32, 61, 0.07), 0 28px 56px rgba(22, 32, 61, 0.08); /* kit de UI ilustrada (mockups nativos consistentes) */ --skel: rgba(22, 32, 61, 0.085); --skel-2: rgba(22, 32, 61, 0.06); --tile: rgba(22, 32, 61, 0.045); } /* ── 2. BASE ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* grano sutilísimo para tactilidad sobre el crema liso (atmósfera, no ruido) */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; } /* ── 3. PRIMITIVAS DE LAYOUT ─────────────────────────────────────────────── */ .container { max-width: 1120px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); } .section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; } .section--alt { background: var(--cream-deep); } .section--ink { background: var(--ink-band); color: var(--cream); } .section--ink::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 25% 0%, rgba(37, 99, 235, 0.16), transparent 62%); pointer-events: none; } .section--ink .container { position: relative; z-index: 1; } /* layout asimétrico (editorial > centrado simétrico) */ .asym { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: start; } .asym--reverse { grid-template-columns: 1.35fr 1fr; } /* índice de sección como marca de agua (número grande crema-sobre-crema) */ .sec-index { position: absolute; top: clamp(1.5rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem); font-family: var(--serif); font-size: var(--step-4); line-height: 1; font-weight: 600; color: rgba(22, 32, 61, 0.05); pointer-events: none; z-index: 0; } .section--ink .sec-index { color: rgba(247, 245, 240, 0.07); } /* ── 4. CHROME (nav / footer / botones) ──────────────────────────────────── */ nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(247, 245, 240, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding-inline: 24px; } .nav-inner { max-width: 1120px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .logo-mark { width: 34px; height: 34px; background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); } .logo-text { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .logo-text span { color: var(--blue); } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { text-decoration: none; color: var(--muted); font-size: 14px; transition: color .2s; } .nav-links a:hover { color: var(--ink); } .btn-nav { background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 8px; text-decoration: none; transition: background .2s, transform .15s; } .btn-nav:hover { background: var(--blue-lt); transform: translateY(-1px); } .btn-primary { display: inline-block; background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; padding: 15px 32px; border-radius: 10px; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 24px rgba(37, 99, 235, 0.25); } .btn-primary:hover { background: var(--blue-lt); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35); } footer { padding: 40px 24px; border-top: 1px solid var(--border); } .footer-inner { max-width: 1120px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-copy, .footer-tagline { font-size: 13px; color: var(--muted); } .footer-tagline { text-align: center; } .footer-tagline span { color: var(--blue); font-weight: 600; } .footer-links { display: flex; gap: 20px; } .footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; } .footer-links a:hover { color: var(--ink); } /* ── 5. BLOQUES REUTILIZABLES ────────────────────────────────────────────── */ /* 5.0 Cabecera de sección (eyebrow línea+label + H2 + subtítulo) */ .eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; } .eyebrow::before { content: ''; width: 2.5rem; height: 1px; background: var(--accent); } .section--ink .eyebrow { color: var(--blue-lt); } .h2 { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; max-width: 20ch; margin-bottom: 1.1rem; } .lede { font-size: var(--step-1); color: var(--muted); max-width: 42ch; line-height: 1.55; font-weight: 400; } .section--ink .lede { color: rgba(247, 245, 240, 0.72); } /* 5.1 Statement grande (hero / problema) — respira con max-width corto */ .statement { font-family: var(--serif); font-size: var(--step-3); font-weight: 600; line-height: 1.07; letter-spacing: -.02em; max-width: 16ch; } .prose { font-size: var(--step-0); color: var(--muted); line-height: 1.75; max-width: 52ch; } .prose strong { color: var(--ink); font-weight: 600; } .prose + .prose { margin-top: 1.1rem; } /* 5.2 HERO de servicio */ .svc-hero { padding-top: 150px; padding-bottom: clamp(3rem, 7vw, 6rem); background: radial-gradient(ellipse 120% 90% at 12% 0%, #ffffff 0%, var(--cream) 56%); position: relative; overflow: hidden; } /* rejilla "blueprint" sutil de fondo: textura sin imagen */ .svc-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(22, 32, 61, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(22, 32, 61, 0.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 20% 10%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 10%, #000 0%, transparent 70%); pointer-events: none; } .svc-hero .container { position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 26px; } .breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span { color: rgba(22, 32, 61, 0.30); } .svc-hero h1 { font-family: var(--serif); font-size: var(--step-3); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; max-width: 18ch; margin: 18px 0 26px; } .svc-hero h1 .highlight { background: linear-gradient(90deg, var(--blue), var(--teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .svc-hero .lead { font-size: var(--step-1); color: var(--ink); line-height: 1.55; max-width: 40ch; margin-bottom: 28px; font-weight: 400; } /* badge de herramienta / partner */ .tool-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px 8px 8px; font-size: 14px; color: var(--muted); box-shadow: var(--shadow-sm); } .tool-badge b { color: var(--ink); font-weight: 600; } .tool-badge .chip { background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; } /* credencial de partner (sello oficial + texto) */ .partner-cred { display: inline-flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 20px 10px 12px; box-shadow: var(--shadow-sm); } .partner-cred__badge { width: 54px; height: auto; flex-shrink: 0; } .partner-cred__txt { display: flex; flex-direction: column; line-height: 1.3; } .partner-cred__txt strong { font-size: 14px; font-weight: 700; color: var(--ink); } .partner-cred__txt span { font-size: 12.5px; color: var(--muted); } .tag { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border: 1px solid rgba(37, 99, 235, 0.30); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; } .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* hero a dos columnas (texto + visual) */ .svc-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .svc-hero__media { position: relative; } /* marco tipo "ventana de app" para enmarcar un screenshot como pieza de producto */ .window { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; } .window__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(22, 32, 61, 0.02); } .window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .window img { width: 100%; height: auto; display: block; } /* 5.3 SÍNTOMAS — lista numerada grande (números serif como gráfico) */ .symptom-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; margin-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--border); } .symptom { display: flex; gap: 1.25rem; align-items: baseline; padding: 1.75rem 1.5rem 1.75rem 0; border-bottom: 1px solid var(--border); } .symptom__n { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 1.6ch; } .symptom__t { font-size: var(--step-0); color: var(--muted); line-height: 1.55; } .symptom__t strong { color: var(--ink); font-weight: 600; } /* 5.4 CARDS de capacidades ("lo que hacemos") */ .do-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(2.25rem, 4vw, 3.5rem); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(37, 99, 235, 0.28); } .card--feature { grid-column: 1 / -1; border-color: rgba(37, 99, 235, 0.28); background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), rgba(255, 255, 255, 0)), var(--surface); box-shadow: var(--shadow-md); } /* fila de 3 capacidades de texto + fila de 2 cards con mockup */ .do-grid-3 { grid-template-columns: repeat(3, 1fr); } .do-grid + .do-grid { margin-top: 18px; } .card__icon { line-height: 0; margin-bottom: 16px; } .card__icon svg { width: 28px; height: 28px; stroke-width: 1.75; } .card h3 { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; } .card p { font-size: var(--step-0); color: var(--muted); line-height: 1.66; } .card p strong { color: var(--ink); font-weight: 600; } .pill-ai { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; margin-bottom: 14px; } /* 5.5 INFOGRAFÍA de flujo (Fuentes → Núcleo → Canales) en CSS, no Mermaid */ .flow { margin-top: clamp(2.5rem, 4vw, 3.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.75rem); box-shadow: var(--shadow-md); } .flow__caption { font-size: var(--step-0); color: var(--muted); max-width: 60ch; margin-bottom: 2rem; line-height: 1.65; } .flow__caption strong { color: var(--ink); font-weight: 600; } .flow__stage { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; align-items: center; gap: 18px; } .flow__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; text-align: center; } .flow__chip { background: var(--cream); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 10px; text-align: center; line-height: 1.35; } .flow__chip small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; } .flow__chip--src { border-left: 3px solid var(--blue); } .flow__chip--out { border-left: 3px solid var(--emerald); } .flow__core { background: linear-gradient(160deg, var(--blue), var(--blue-lt)); color: #fff; border-radius: 16px; padding: 26px 22px; text-align: center; box-shadow: 0 14px 36px rgba(37, 99, 235, 0.32); } .flow__core .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; } .flow__core .t { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-bottom: 8px; } .flow__core .d { font-size: 12.5px; line-height: 1.5; opacity: .92; } .flow__arrow { display: flex; align-items: center; justify-content: center; color: var(--blue); } .flow__arrow svg { width: 30px; height: 30px; stroke-width: 1.75; } /* callout de entrega */ .deliver { margin-top: 2rem; display: flex; gap: 16px; align-items: flex-start; background: rgba(16, 185, 129, 0.07); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius-lg); padding: 24px 28px; } .deliver svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--emerald); stroke-width: 2; margin-top: 2px; } .deliver p { font-size: var(--step-0); color: var(--ink); line-height: 1.6; } .deliver p strong { font-weight: 700; } /* 5.6 CASO — sticky imagen + texto, imagen con doble marco editorial */ .case-intro { font-size: var(--step-1); color: var(--muted); line-height: 1.55; max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); font-weight: 400; } .case-intro strong { color: var(--ink); font-weight: 600; } .sticky-case { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .sticky-case__media { position: sticky; top: 96px; align-self: start; } .figure-frame { padding: 0.75rem; background: var(--surface); border-radius: calc(var(--radius-lg) + 0.75rem); box-shadow: var(--shadow-lg); margin: 0; } .figure-frame img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } .figure-frame figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.5; font-style: italic; padding-inline: 0.25rem; } .case-build h4 { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; margin-bottom: 18px; } .case-list { list-style: none; display: flex; flex-direction: column; gap: 16px; } .case-list li { position: relative; padding-left: 28px; font-size: var(--step-0); color: var(--muted); line-height: 1.6; } .case-list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .case-list li strong { color: var(--ink); font-weight: 600; } /* mockup CSS nativo de conectores activos (limpio, sin datos internos) */ .conn-mock { margin-top: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .conn-mock__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } .conn-mock__count { color: var(--accent); } .conn-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--border); } .conn-row:last-child { border-bottom: 0; } .conn-row__ico { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .conn-row__ico svg { width: 17px; height: 17px; stroke-width: 2; } .conn-row__name { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--ink); } .conn-row__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--emerald); } .conn-row__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); } /* sub-etiqueta del caso (Reto / Solución / Resultado) — estructura escaneable */ .case-kicker { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; } .case-kicker.mt { margin-top: clamp(2.5rem, 4vw, 3.5rem); } .case-kicker.mt + .stats { margin-top: 0; } /* pull-quote (cita real de cliente) — se rellena cuando llegue la cita de Imprex */ .pullquote { margin: clamp(2.5rem, 5vw, 4rem) 0; border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.75rem; max-width: 60ch; } .pullquote p { font-family: var(--serif); font-size: var(--step-1); font-weight: 500; line-height: 1.42; color: var(--ink); letter-spacing: -.01em; } .pullquote cite { display: block; margin-top: 1rem; font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 600; color: var(--muted); } /* 5.7 STAT cards editoriales (divisor de 1px, número serif gigante) */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(2.5rem, 4vw, 3.5rem); } .stat { background: var(--cream); padding: 30px 26px; } .section--alt .stat { background: var(--cream-deep); } .stat__num { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat__num em { color: var(--accent); font-style: normal; } .stat__label { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.5; } /* 5.8 TIMELINE numerada ("cómo arrancamos") */ .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); counter-reset: step; } .tl-step { position: relative; padding-top: 2.75rem; } .tl-step::before { counter-increment: step; content: '/' counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: var(--step-1); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* línea conectora entre pasos */ .tl-step:not(:last-child)::after { content: ''; position: absolute; top: 0.95rem; left: 3.5rem; right: -1.25rem; height: 1px; background: var(--border-strong); } .tl-step h4 { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; margin-bottom: 10px; } .tl-step p { font-size: var(--step-0); color: var(--muted); line-height: 1.65; } .start-note { margin-top: clamp(2rem, 4vw, 2.75rem); font-size: var(--step-1); color: var(--ink); line-height: 1.55; max-width: 46ch; font-weight: 400; } .start-note strong { font-weight: 700; } /* 5.9 CADENA DE VALOR (sobre banda oscura) — eslabones, los bloqueados sin link */ .chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; margin-top: clamp(2.5rem, 4vw, 3.5rem); } .chain-node { border-radius: var(--radius-lg); padding: 30px 28px; border: 1px solid rgba(247, 245, 240, 0.14); background: rgba(247, 245, 240, 0.04); } .chain-node.here { border-color: var(--blue-lt); background: linear-gradient(170deg, rgba(59, 130, 246, 0.18), rgba(247, 245, 240, 0.02)); box-shadow: 0 12px 40px rgba(37, 99, 235, 0.25); } .chain-node.soon { opacity: .72; border-style: dashed; cursor: default; } .chain-step { font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: rgba(247, 245, 240, 0.55); margin-bottom: 10px; } .chain-node.here .chain-step { color: var(--blue-lt); } .chain-node h4 { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; margin-bottom: 8px; color: var(--cream); } .chain-node p { font-size: 14px; color: rgba(247, 245, 240, 0.68); line-height: 1.6; } .chain-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; } .chain-pill.now { color: #fff; background: var(--blue); } .chain-pill.later { color: rgba(247, 245, 240, 0.7); background: rgba(247, 245, 240, 0.10); } .chain-arrow { display: flex; align-items: center; justify-content: center; color: rgba(247, 245, 240, 0.35); } .chain-arrow svg { width: 26px; height: 26px; stroke-width: 1.75; } .chain-foot { margin-top: clamp(2rem, 4vw, 2.5rem); font-size: var(--step-1); color: rgba(247, 245, 240, 0.78); line-height: 1.55; max-width: 52ch; font-weight: 400; } .chain-foot strong { color: var(--cream); font-weight: 600; } /* 5.10 CTA de cierre */ .cta-box { max-width: 880px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: clamp(2.5rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .cta-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 0%, var(--accent-soft), transparent 70%); pointer-events: none; } .cta-box h2 { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; margin-bottom: 18px; position: relative; } .cta-box p { font-size: var(--step-0); color: var(--muted); max-width: 52ch; margin: 0 auto 34px; position: relative; } .cta-mail { display: block; margin-top: 18px; font-size: 14px; color: var(--muted); position: relative; } .cta-mail a { color: var(--accent); text-decoration: none; } /* ── 5.11 KIT DE UI ILUSTRADA ──────────────────────────────────────────────── Lenguaje visual ÚNICO para todos los mockups nativos de la web (catálogo, canales, ficha…). Misma "chrome", mismos colores, mismos skeletons. */ .ui { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; } .ui__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .ui__logo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--teal)); } .ui__title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .ui__sub { margin-left: auto; font-size: 11px; color: var(--muted); } /* skeletons (texto/dato simulado) */ .skel { display: block; height: 9px; border-radius: 5px; background: var(--skel); } .skel--xs { width: 30%; } .skel--sm { width: 45%; } .skel--md { width: 65%; } .skel--lg { width: 85%; } /* casillas y barras */ .ui-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); position: relative; } .ui-check.on { background: var(--blue); border-color: var(--blue); } .ui-check.on::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .ui-thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--tile); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); } .ui-thumb svg { width: 20px; height: 20px; stroke-width: 1.75; } .ui-bar { height: 10px; border-radius: 6px; background: var(--skel); overflow: hidden; } .ui-bar__fill { height: 100%; border-radius: 6px; background: var(--emerald); } .ui-bar__fill.amber { background: var(--amber); } /* tabla de catálogo (hero) */ .ui-cat__row { display: grid; grid-template-columns: 18px 40px 1fr 88px; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); } .ui-cat__row:last-child { border-bottom: 0; } .ui-cat__row .nm { display: flex; flex-direction: column; gap: 6px; } .ui-cat__head { background: rgba(22, 32, 61, 0.02); padding-block: 9px; } .ui-cat__head span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* rejilla de canales (card "Conectores de salida") */ .ui-ch { padding: 16px; } .ui-ch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ch-chip { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; border-radius: 10px; background: var(--cream); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; } .ch-chip svg { width: 20px; height: 20px; stroke-width: 1.75; color: var(--accent); } /* ficha de producto validada (card "Activos digitales ordenados") */ .ui-pf { padding: 16px; display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; } .ui-pf__img { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--tile); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); } .ui-pf__img svg { width: 30px; height: 30px; stroke-width: 1.5; } .ui-pf__badge { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--emerald); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); } .ui-pf__badge svg { width: 14px; height: 14px; color: #fff; stroke-width: 3; } .ui-pf__attrs { display: flex; flex-direction: column; gap: 0; } .ui-pf__attr { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .ui-pf__attr:last-child { border-bottom: 0; } .ui-pf__attr .k { color: var(--muted); } .ui-pf__attr .v { color: var(--ink); font-weight: 600; margin-left: auto; } .ui-pf__attr .ok { width: 15px; height: 15px; color: var(--emerald); flex-shrink: 0; } /* variante de card que lidera con un mockup en vez de icono */ .card--visual .card__mock { margin-bottom: 20px; } /* 5.12 VÉRTICES CONECTADOS (Datos · Branding · Comunicación) — no secuencial */ .vertices { position: relative; max-width: 720px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; } .vx-stage { position: relative; min-height: 360px; } .vx-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .vx-node { position: absolute; width: 250px; border-radius: var(--radius-lg); border: 1px solid rgba(247, 245, 240, 0.16); background: rgba(247, 245, 240, 0.05); padding: 22px 24px; } .vx-node h4 { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; color: var(--cream); margin-bottom: 6px; } .vx-node p { font-size: 13.5px; line-height: 1.55; color: rgba(247, 245, 240, 0.7); } .vx-node--top { top: 0; left: 50%; transform: translateX(-50%); } .vx-node--left { bottom: 0; left: 0; } .vx-node--right { bottom: 0; right: 0; } .vx-node.is-here { border-color: var(--blue-lt); background: linear-gradient(170deg, rgba(59, 130, 246, 0.20), rgba(247, 245, 240, 0.02)); box-shadow: 0 12px 40px rgba(37, 99, 235, 0.25); } .vx-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; } @media (max-width: 768px) { .vx-stage { min-height: 0; display: flex; flex-direction: column; gap: 14px; } .vx-node { position: static; width: 100%; transform: none; } .vx-edges { display: none; } } /* ── 6. UTILIDADES ───────────────────────────────────────────────────────── */ .ico-blue { color: var(--blue); } .ico-teal { color: var(--teal); } .ico-emerald { color: var(--emerald); } .ico-amber { color: var(--amber); } .ico-blue-lt { color: var(--blue-lt); } /* reveal escalonado — mejora progresiva: VISIBLE por defecto; solo se oculta cuando el JS marca (si el JS falla, el contenido se ve igual). */ .reveal { transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--i, 0) * 80ms); } .js .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); } @media (prefers-reduced-motion: reduce) { .js .reveal:not(.is-visible) { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ── 7. RESPONSIVE ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .asym, .asym--reverse, .svc-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; } .svc-hero__media { margin-top: 0.5rem; } .do-grid { grid-template-columns: 1fr; } .sticky-case { grid-template-columns: 1fr; } .sticky-case__media { position: static; } .timeline { grid-template-columns: 1fr; } .tl-step { padding-top: 2.5rem; } .tl-step:not(:last-child)::after { display: none; } .flow__stage, .chain { grid-template-columns: 1fr; } .flow__arrow svg, .chain-arrow svg { transform: rotate(90deg); } } @media (max-width: 768px) { .nav-links { display: none; } .svc-hero { padding-top: 120px; } }