/* ========================================================= Sandstone Corp — estilos (v7 · plata) Web de varias páginas: index · soluciones · portfolio · metodologia · auditoria Estados en : .js · .motion (GSAP activo) · .no-motion · .seen (ya vio la intro) Las maquetas se miden en em: su contenedor fija el font-size. Referencia de marca: docs/posicionamiento-sandstone.md ========================================================= */ :root { /* Plata: fondos claros metálicos, tinta grafito, sin negros de fondo */ --bg: #EEF0F3; --bg-2: #E5E8EC; --bg-3: #D9DDE2; --card: #FFFFFF; --card-2: #F7F8FA; --ink: #12151A; --ink-2: #434A55; --muted: #6B7280; --line: #D6DAE0; --line-2: #C5CAD2; --metal: radial-gradient(120% 90% at 50% 0%, #FBFCFD 0%, #E8EBEF 55%, #D4D8DE 100%); --metal-band: linear-gradient(180deg, #E1E4E9 0%, #CDD2D9 100%); --silver-text: linear-gradient(100deg, #1C2027 0%, #6F7782 48%, #2A2F37 100%); --silver-logo: linear-gradient(180deg, #9AA1AB 0%, #5C636D 100%); /* Azul corporativo: acción, etiquetas y detalles de marca. Alternativas: ?color=grafito · ?color=arenisca */ --accent: #2456D6; --accent-2: #1B43AE; --accent-soft: #E8EEFC; --hl: var(--accent); --hl-soft: var(--accent-soft); --blue-text: linear-gradient(100deg, #1B43AE 0%, #3F6FE6 45%, #8095BC 100%); --ok: #16A34A; --ok-soft: #DCFCE7; --ok-tx: #15803D; --warn: #D97706; --warn-soft: #FEF3C7; --warn-tx: #B45309; --err: #DC2626; --err-soft: #FEE2E2; --err-tx: #B91C1C; --info-soft: #DBEAFE; --info-tx: #1D4ED8; --display: "Inter Tight", "Inter", system-ui, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --brand: "Montserrat", "Inter", sans-serif; --wrap: 1280px; --gutter: clamp(16px, 4vw, 48px); --navh: 72px; --ease: cubic-bezier(.16, 1, .3, 1); --shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(15, 18, 23, .35); } html[data-accent="grafito"] { --accent: #12151A; --accent-2: #2A2F37; --accent-soft: #E5E8EC; --blue-text: var(--silver-text); } html[data-accent="arenisca"] { --accent: #B8683A; --accent-2: #96532C; --accent-soft: #F6E9E0; --blue-text: linear-gradient(100deg, #96532C, #C98A5F 50%, #8A8F98); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html.no-js, html.no-motion { scroll-behavior: smooth; } html, body { overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; } ::selection { background: var(--ink); color: #fff; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ——— Tipografía ——— */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.03em; } h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -.04em; } h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; } h1 em, h2 em, h3 em, .wall-msg em { font-style: normal; background: var(--blue-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; } :is(h1, h2, h3) em * { background-image: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hl); } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; transform: rotate(45deg); } .sec-lead { font-size: 18px; color: var(--ink-2); max-width: 56ch; margin: 0; } .split-line-mask { padding-bottom: .1em; margin-bottom: -.1em; } /* ——— Botones ——— */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .45s var(--ease), border-color .45s var(--ease); } .btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--fill, #fff); transform: translateY(102%); transition: transform .55s var(--ease); } .btn:hover::before, .btn:focus-visible::before { transform: none; } .btn svg { width: 16px; height: 16px; transition: transform .45s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn-dark { background: var(--accent); color: #fff; --fill: var(--accent-2); box-shadow: 0 12px 26px -14px rgba(36, 86, 214, .75); } .btn-dark:hover { color: #fff; } .btn-line { border-color: var(--line-2); color: var(--ink); background: rgba(255, 255, 255, .55); --fill: var(--ink); } .btn-line:hover { color: #fff; border-color: var(--ink); } .text-link { color: var(--accent); } .text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; color: var(--ink); } .text-link svg { width: 15px; height: 15px; transition: transform .4s var(--ease); } .text-link:hover svg { transform: translateX(4px); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hl); outline-offset: 3px; border-radius: 6px; } /* ——— Intro del logo (solo la primera página de la visita) ——— */ .intro { display: none; } .js .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--metal); animation: intro-failsafe .6s ease 6s forwards; } .js.seen .intro { display: none; } @keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .js .intro { display: none; } } .intro-inner { display: grid; justify-items: center; gap: 18px; } .intro-mark { width: 88px; } .intro-mark img { width: 100%; height: auto; filter: grayscale(1) contrast(1.15) brightness(.95) drop-shadow(0 18px 30px rgba(15, 18, 23, .28)); } .intro-word { display: flex; gap: .06em; font: 700 clamp(26px, 4vw, 40px)/1 var(--brand); letter-spacing: .08em; overflow: hidden; padding: 4px 0; background: var(--silver-logo); -webkit-background-clip: text; background-clip: text; color: transparent; } .intro-word span { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; } .intro-sub { font: 600 12px var(--brand); letter-spacing: .6em; color: var(--muted); margin-left: .6em; } .intro-bar { position: absolute; left: 50%; bottom: 12vh; width: 140px; height: 2px; margin-left: -70px; background: rgba(15, 18, 23, .08); overflow: hidden; border-radius: 2px; } .intro-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); } /* ——— Cortina entre páginas ——— */ .curtain { display: none; } .js .curtain { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; background: var(--metal); pointer-events: none; visibility: hidden; } .js.seen .curtain { visibility: visible; animation: curtain-failsafe .5s ease 3s forwards; } @keyframes curtain-failsafe { to { visibility: hidden; opacity: 0; } } .curtain img { width: 56px; filter: grayscale(1) contrast(1.15) brightness(.95); opacity: .9; } .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; pointer-events: none; } .progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(.002); background: var(--hl); will-change: transform; } /* ——— Navegación ——— */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--navh); background: rgba(238, 240, 243, .94); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; } .logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); } .logo img { height: 36px; width: auto; filter: grayscale(1) contrast(1.15) brightness(.92); } .logo-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--brand); } .logo-text b { font-weight: 700; font-size: 16px; letter-spacing: .07em; background: var(--silver-logo); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo-text span { font-weight: 600; font-size: 9px; letter-spacing: .5em; color: var(--muted); margin-top: 4px; } .nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); } .nav-links a { display: block; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background-color .3s ease, color .3s ease; } .nav-links a:hover { background: rgba(15, 18, 23, .06); color: var(--ink); } .nav-links a.is-active { background: var(--accent); color: #fff; } .nav-cta { height: 42px; padding: 0 18px; font-size: 14px; } .menu-btn { display: none; align-items: center; gap: 10px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 999px; height: 42px; padding: 0 16px; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; } .menu-btn i { position: relative; width: 16px; height: 8px; } .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); } .menu-btn i::before { top: 0; } .menu-btn i::after { top: 6.5px; } .menu-btn[aria-expanded="true"] i::before { top: 3.25px; transform: rotate(45deg); } .menu-btn[aria-expanded="true"] i::after { top: 3.25px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: calc(var(--navh) + 24px) var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); } .mobile-menu[hidden] { display: none; } .mobile-menu.open { clip-path: inset(0 0 0 0); } .mobile-menu nav { display: grid; } .mobile-menu a { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; font: 600 clamp(30px, 8vw, 44px)/1.05 var(--display); letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .mobile-menu a small { font: 600 11px var(--sans); letter-spacing: .14em; color: var(--hl); } .mobile-menu.open a { opacity: 1; transform: none; } .mobile-menu.open a:nth-child(2) { transition-delay: .05s; } .mobile-menu.open a:nth-child(3) { transition-delay: .1s; } .mobile-menu.open a:nth-child(4) { transition-delay: .15s; } .mobile-menu.open a:nth-child(5) { transition-delay: .2s; } .mobile-menu p { margin: 0; color: var(--muted); } /* ========================================================= HERO (inicio): muro de pantallas que se endereza con el scroll ========================================================= */ .hero { position: relative; background: var(--metal); overflow: hidden; } .hero-stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: calc(var(--navh) + 24px) 0 64px; overflow: hidden; } .hero-copy { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; } .pill-label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 7px 14px 7px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 500; color: var(--ink-2); } .pill-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } } .hero-title { font-size: clamp(42px, min(6.6vw, 10.5vh), 100px); line-height: .98; letter-spacing: -.05em; max-width: 16ch; } .hero-lead { margin: 26px 0 36px; max-width: 58ch; font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-2); } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .hero-note { text-align: center; margin: 0; padding: 0 var(--gutter) 24px; font-size: 12px; color: var(--muted); } .wall-wrap { position: absolute; inset: 0; overflow: hidden; perspective: 2200px; } .wall { position: absolute; left: 50%; top: 50%; display: flex; align-items: flex-start; gap: 2.6em; font-size: max(4.4px, calc(100vw / 205)); will-change: transform; backface-visibility: hidden; } .no-motion .wall, .no-js .wall, .js:not(.motion) .wall { transform: translate(-50%, -50%) rotateX(46deg) rotateZ(-22deg) scale(1.2); } .wcol { flex: none; display: flex; flex-direction: column; width: 34em; will-change: transform; } .wcol:nth-child(even) { margin-top: -18em; } .wcol img { display: block; width: calc(34em * 556 / 476); max-width: none; height: auto; margin: -2.86em; } .wall-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 62% 56% at 50% 52%, rgba(238, 240, 243, .97) 0%, rgba(238, 240, 243, .9) 45%, rgba(238, 240, 243, .4) 80%, rgba(238, 240, 243, .14) 100%), linear-gradient(180deg, rgba(238, 240, 243, .9) 0%, rgba(238, 240, 243, 0) 22%, rgba(238, 240, 243, 0) 70%, rgba(238, 240, 243, 1) 100%); } .wall-msg { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 55% 42% at 50% 50%, rgba(238, 240, 243, .94) 0%, rgba(238, 240, 243, .7) 55%, rgba(238, 240, 243, 0) 85%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 var(--gutter); text-align: center; pointer-events: none; opacity: 0; } .wall-msg p { margin: 0; font: 600 clamp(30px, 5.2vw, 78px)/1.02 var(--display); letter-spacing: -.045em; max-width: 18ch; } .wall-msg p + p { margin-top: clamp(14px, 2.4vh, 30px); } .no-motion .wall-msg, .no-js .wall-msg { display: none; } /* Modo animado: la portada queda fija por CSS (sticky) mientras el muro se endereza */ .motion .hero { height: calc(100vh + 180vh); height: calc(100svh + 180vh); overflow: visible; } .motion .hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; } .motion .hero-copy, .motion .wall-shade, .motion .wall-msg { will-change: transform, opacity; } .motion .wall { transform-style: preserve-3d; } .motion .wcol { will-change: auto; } .motion .wcol img { will-change: transform; } .hero-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; } /* Portada con fotogramas ya renderizados (ordenadores y navegadores sin aceleración): en lugar del muro 3D */ .seq-mode .hero { background: var(--bg); } .seq-mode .hero-stage { background: url(../img/wall-flat.webp) center / cover no-repeat; } .seq-mode .hero-stage.seq-ready { background: none !important; } .seq-mode .seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* sin escalar: cada fotograma se ve píxel a píxel */ .lite .hero-copy, .lite .progress i, .lite [data-reveal] { will-change: auto !important; } @media (max-width: 640px) { .wall { font-size: calc(100vw / 128); } .wall-shade { background: radial-gradient(ellipse 95% 55% at 50% 50%, rgba(238, 240, 243, .96) 0%, rgba(238, 240, 243, .85) 55%, rgba(238, 240, 243, .4) 100%), linear-gradient(180deg, rgba(238, 240, 243, .9) 0%, transparent 20%, transparent 75%, rgba(238, 240, 243, 1) 100%); } } /* ——— Cinta de herramientas ——— */ .tools { padding: 34px 0 44px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tools-label { text-align: center; margin: 0 0 20px; font-size: 13px; color: var(--muted); } .tools-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .tools-track { display: flex; width: max-content; animation: marquee 40s linear infinite; } .tools-group { display: flex; } .tools-group span { padding: 0 clamp(20px, 3vw, 40px); font: 600 clamp(18px, 2vw, 24px)/1 var(--display); letter-spacing: -.02em; color: #9AA1AB; white-space: nowrap; } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================= Secciones comunes ========================================================= */ .section { position: relative; padding: clamp(96px, 11vw, 160px) 0; } .bg-white { background: var(--card); } .bg-2 { background: var(--bg-2); } .bg-metal { background: var(--metal-band); } .sec-head { display: grid; gap: 22px; max-width: 900px; margin-bottom: clamp(44px, 5.5vw, 80px); } .sec-head .eyebrow { margin: 0; } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; } /* Cabecera de las páginas interiores */ .page-hero { position: relative; background: var(--metal); padding: calc(var(--navh) + clamp(64px, 9vw, 120px)) 0 clamp(64px, 8vw, 104px); overflow: hidden; border-bottom: 1px solid var(--line); } .page-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 18, 23, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 18, 23, .045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 80% at 70% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 0%, #000 20%, transparent 75%); pointer-events: none; } .page-hero .wrap { position: relative; z-index: 1; display: grid; gap: 24px; } .page-hero h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.05em; max-width: 16ch; } .page-hero h1 + p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); max-width: 60ch; } .page-hero .eyebrow { margin: 0; } .page-hero + .section { padding-top: clamp(56px, 6vw, 88px); } .crumbs { margin: 0; font: 500 13px var(--sans); color: var(--muted); } .page-hero .hero-actions { justify-content: flex-start; margin-top: 8px; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); } /* ——— El problema ——— */ .pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .pain { padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); } .pain-vis { height: 170px; margin-bottom: 26px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; overflow: hidden; } .pain-n { font: 600 12px var(--sans); letter-spacing: .14em; color: var(--hl); } .pain h3 { margin: 8px 0 10px; font-size: 23px; } .pain p { margin: 0; color: var(--ink-2); } .v-double .mw { width: 38%; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; gap: 6px; } .v-double .mw b { font-size: 12px; } .v-double .mw i { height: 6px; border-radius: 3px; background: #E5E7EB; } .v-double .mw i.s { width: 60%; } .v-double .mw u { text-decoration: none; white-space: nowrap; font: 600 10px var(--mono); padding: 3px 5px; border-radius: 4px; background: #F3F4F6; } .v-double .mw u.bad { background: var(--err-soft); color: var(--err-tx); } .copy-arrow { display: grid; justify-items: center; gap: 2px; color: var(--muted); font: 500 11px var(--mono); } .copy-arrow svg { width: 44px; } .v-excel { flex-direction: column; } .xg { display: grid; grid-template-columns: repeat(6, 1fr); width: 88%; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); background: #fff; } .xg span { height: 22px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font: 600 10px var(--mono); display: grid; place-items: center; } .xg .err { background: var(--err-soft); color: var(--err-tx); } .lock { font: 600 11px var(--mono); color: var(--warn-tx); text-align: center; } .v-trace { flex-direction: column; align-items: stretch; gap: 6px; background: #EFE7DD; } .v-trace .bub { align-self: flex-start; max-width: 88%; padding: 5px 9px; border-radius: 10px; background: #fff; font-size: 12px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); } .v-trace .bub.me { align-self: flex-end; background: #D9FDD3; } .typing { display: flex; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #fff; align-self: flex-start; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; will-change: transform, opacity; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ========================================================= Qué construimos: recorrido horizontal (inicio) ========================================================= */ .caps { position: relative; overflow: hidden; background: var(--bg-2); } .caps-pin { padding: clamp(96px, 11vw, 150px) 0 clamp(72px, 8vw, 110px); } .caps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(36px, 5vw, 64px); } .caps-head h2 { max-width: 17ch; } .caps-nav { display: none; align-items: center; gap: 14px; font: 600 13px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 14px; } .caps-nav i { width: 140px; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; } .caps-nav b { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.25); } .caps-count { color: var(--ink); } .caps-track { display: grid; gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .cap { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 3.6vw, 52px); border: 1px solid var(--line); border-radius: 32px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); } .cap-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 22px; background: var(--accent); color: #fff; font: 600 15px var(--display); } .cap h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -.035em; margin-bottom: 16px; } .cap-copy > p { margin: 0 0 24px; color: var(--ink-2); font-size: 17px; max-width: 44ch; } .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .chips li { padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--card-2); } .cap-visual { position: relative; font-size: min(10px, calc((100vw - 64px) / 120)); min-height: 42em; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(160deg, #FFFFFF 0%, #E3E6EA 100%); overflow: hidden; } /* 01 · panel central */ .ds { display: grid; grid-template-columns: 6em 1fr 17em; width: 62em; height: 37em; border-radius: 1.2em; overflow: hidden; background: #fff; font-family: var(--sans); color: #0A0A0B; box-shadow: 0 1.5em 2.7em -1em rgba(15, 23, 42, .35), 0 0 0 .1em rgba(0, 0, 0, .06); } .ds-side { display: flex; flex-direction: column; align-items: center; gap: 1.2em; padding: 1.6em 0; background: #F3F4F6; border-right: .1em solid #E5E7EB; } .ds-side img { width: 3em; filter: grayscale(1) contrast(1.15) brightness(.92); margin-bottom: .8em; } .ds-side span { width: 2.6em; height: 2.6em; border-radius: .8em; background: #E5E7EB; } .ds-side span.on { background: var(--accent); } .ds-main { display: flex; flex-direction: column; gap: 1.2em; padding: 1.8em 2em; min-width: 0; } .ds-tool { display: flex; align-items: center; gap: 1.2em; } .ds-tool b { font-size: 2.2em; letter-spacing: -.03em; } .ds-search { flex: 1; height: 3em; border-radius: .9em; background: #F4F4F5; } .ds-tool em { font-style: normal; padding: .8em 1.4em; border-radius: .9em; background: var(--accent); color: #fff; font-size: 1.15em; font-weight: 600; white-space: nowrap; } .ds-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; } .ds-kpis div { padding: .9em 1em; border: .1em solid #EEF0F2; border-radius: .9em; } .ds-kpis small { display: block; font-size: 1em; color: #9CA3AF; } .ds-kpis b { font-size: 2.2em; letter-spacing: -.03em; } .ds-kpis .w b { color: var(--warn); } .ds-table { border: .1em solid #EEF0F2; border-radius: 1em; overflow: hidden; } .ds-r { display: grid; grid-template-columns: 4.5em 1fr 5.5em 9em; align-items: center; gap: 1em; padding: .9em 1.4em; border-bottom: .1em solid #F4F4F5; font-size: 1.15em; } .ds-r:last-child { border-bottom: 0; } .ds-r.h { background: #FAFAFA; color: #A1A1AA; font-weight: 600; font-size: 1.05em; } .ds-r.sel { background: #F3F5F8; } .ds-r b { display: block; height: .75em; width: 75%; border-radius: .4em; background: #E4E4E7; } .ds-r .src { justify-self: start; font-size: .85em; color: #6B7280; padding: .15em .5em; border: .1em solid #E5E7EB; border-radius: .4em; font-style: normal; } .ds-detail { display: flex; flex-direction: column; gap: 1em; padding: 1.8em; border-left: .1em solid #EEF0F2; background: #FAFAFA; } .ds-detail small { font-size: 1.1em; color: #71717A; } .ds-detail > b { font-size: 2em; letter-spacing: -.03em; margin-top: -.4em; } .ds-f { display: grid; gap: .7em; } .ds-f span { display: flex; justify-content: space-between; padding: .7em .9em; border-radius: .8em; background: #fff; border: .1em solid #E4E4E7; font-size: 1.1em; color: #6B7280; } .ds-f span b { color: #111827; } .ds-steps { display: flex; gap: .5em; margin-top: .4em; } .ds-steps i { flex: 1; height: .6em; border-radius: .4em; background: #E4E4E7; } .ds-steps i.ok { background: var(--ok); } .ds-steps i.cur { background: var(--accent); } .ds-detail u { margin-top: auto; display: grid; place-items: center; height: 3.4em; border-radius: .9em; background: var(--accent); color: #fff; text-decoration: none; font-size: 1.15em; font-weight: 600; } /* Estados en maquetas claras */ .st { display: inline-block; justify-self: start; padding: .3em .8em; border-radius: 99em; font-style: normal; font-size: .9em; font-weight: 600; white-space: nowrap; font-family: var(--sans); } .st.ok { background: var(--ok-soft); color: var(--ok-tx); } .st.wip { background: var(--info-soft); color: var(--info-tx); } .st.warn { background: var(--warn-soft); color: var(--warn-tx); } .st.err { background: var(--err-soft); color: var(--err-tx); } .st.new { background: #F3F4F6; color: #4B5563; } /* 02 · integraciones */ .int-lines { position: absolute; inset: 6% 5%; width: 90%; height: 88%; } .int-lines .base path { stroke: #C9CED6; stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; } .int-lines .flow path { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-dasharray: 14 400; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: flow 2.8s linear infinite; } .int-lines .flow path:nth-child(2) { animation-delay: .45s; } .int-lines .flow path:nth-child(3) { animation-delay: .9s; } .int-lines .flow path:nth-child(4) { animation-delay: 1.35s; } .int-lines .flow path:nth-child(5) { animation-delay: 1.8s; } .int-lines .flow path:nth-child(6) { animation-delay: 2.25s; } @keyframes flow { from { stroke-dashoffset: 414; } to { stroke-dashoffset: 0; } } .int-core { position: relative; z-index: 2; display: grid; justify-items: center; gap: .4em; padding: 2.4em 3.2em; border-radius: 2em; background: #fff; font-family: var(--sans); box-shadow: 0 1.5em 2.7em -1em rgba(15, 23, 42, .35), 0 0 0 .1em rgba(0, 0, 0, .06), 0 0 0 .9em rgba(255, 255, 255, .6); } .int-core img { width: 4.6em; filter: grayscale(1) contrast(1.15) brightness(.92); margin-bottom: .5em; } .int-core b { font-size: 2em; letter-spacing: -.03em; } .int-core small { font-size: 1.2em; color: #6B7280; } .int-n { position: absolute; z-index: 2; display: flex; align-items: center; gap: .9em; padding: 1em 1.6em 1em 1em; border-radius: 1.4em; background: #fff; font-family: var(--sans); box-shadow: 0 .8em 1.44em -.6em rgba(15, 23, 42, .3), 0 0 0 .1em rgba(0, 0, 0, .05); } .int-n i { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 1em; color: #fff; font-style: normal; font-weight: 700; font-size: 1.2em; background: var(--c, #4B5563); } .int-n span { font-size: 1.4em; font-weight: 600; } .int-n.n1 { left: 10%; top: 12%; } .int-n.n2 { right: 10%; top: 12%; } .int-n.n3 { left: 3%; top: 50%; margin-top: -2.6em; } .int-n.n4 { right: 3%; top: 50%; margin-top: -2.6em; } .int-n.n5 { left: 17%; bottom: 8%; } .int-n.n6 { right: 17%; bottom: 8%; } /* 03 · automatizaciones */ .auto { width: 50em; padding: 2.4em; border-radius: 1.6em; background: #fff; font-family: var(--sans); box-shadow: 0 1.5em 2.7em -1em rgba(15, 23, 42, .35), 0 0 0 .1em rgba(0, 0, 0, .05); } .auto-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8em; } .auto-h b { font-size: 2em; letter-spacing: -.03em; } .auto-h span { display: inline-flex; align-items: center; gap: .5em; font-size: 1.15em; color: var(--ok-tx); font-weight: 600; } .auto-h span::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--ok); } .auto-step { position: relative; display: grid; grid-template-columns: 3.6em 1fr auto; align-items: center; gap: 1.2em; padding: 1.1em 1.3em; border: .1em solid #E8EAEE; border-radius: 1.1em; background: #FAFBFC; } .auto-step + .auto-step { margin-top: 1.6em; } .auto-step + .auto-step::before { content: ""; position: absolute; left: 3.1em; top: -1.7em; height: 1.6em; width: .15em; background: repeating-linear-gradient(180deg, #9AA1AB 0 .3em, transparent .3em .6em); } .auto-step i { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 1em; background: var(--accent); color: #fff; font-style: normal; font-weight: 700; font-size: 1.1em; } .auto-step.trig i { background: #E5E7EB; color: #111418; } .auto-step b { display: block; font-size: 1.35em; letter-spacing: -.01em; } .auto-step small { font-size: 1.1em; color: #6B7280; } .auto-step em { font-style: normal; font: 600 1.1em var(--sans); color: #9CA3AF; } /* 04 · app de campo */ .v-apps { perspective: 1400px; } .pp { position: absolute; top: 50%; width: 19em; aspect-ratio: 9 / 19.2; margin-top: -20.3em; padding: .7em; border-radius: 3.4em; background: linear-gradient(145deg, #3f3f46, #18181b); box-shadow: inset 0 0 0 .18em #52525b, 0 2em 3.15em -1.25em rgba(15, 23, 42, .5); } .pp-s { position: relative; height: 100%; overflow: hidden; border-radius: 2.8em; background: #F4F4F5; display: flex; flex-direction: column; gap: 1em; padding: 0 1.5em 1.5em; font-family: var(--sans); color: #0A0A0B; } .pp-top { height: 4.2em; flex: none; position: relative; } .pp-top::after { content: ""; position: absolute; left: 50%; top: 1.1em; width: 7em; height: 2em; margin-left: -3.5em; border-radius: 2em; background: #050506; } .pp-1 { left: 50%; margin-left: -29.5em; transform: rotate(-9deg) translateY(2.5em); } .pp-2 { left: 50%; margin-left: -9.5em; z-index: 2; } .pp-3 { left: 50%; margin-left: 10.5em; transform: rotate(9deg) translateY(2.5em); } .pp-hd small { font-size: 1.2em; color: #71717A; } .pp-hd b { display: block; font-size: 2.4em; letter-spacing: -.03em; } .pp-hero { position: relative; padding: 1.6em; border-radius: 1.8em; background: var(--accent); color: #fff; overflow: hidden; } .pp-hero small { font-size: 1.1em; opacity: .7; } .pp-hero b { display: block; font-size: 3.6em; letter-spacing: -.04em; } .pp-hero span { font-size: 1.15em; color: #D6E2FF; } .pp-row { display: flex; align-items: center; gap: 1em; padding: 1.1em; border-radius: 1.3em; background: #fff; } .pp-row i { width: 1.6em; height: 1.6em; border-radius: .5em; background: var(--ok); flex: none; } .pp-row i.no { background: #fff; border: .18em solid #D1D5DB; } .pp-row span { flex: 1; height: .9em; border-radius: .4em; background: #E4E4E7; } .pp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; } .pp-thumbs i { position: relative; aspect-ratio: 1; border-radius: .7em; background: linear-gradient(160deg, #cbd5e1, #64748b); } .pp-thumbs i::after { content: ""; position: absolute; right: .35em; bottom: .35em; width: .9em; height: .9em; border-radius: 50%; background: #22c55e; } .pp-thumbs i.new::after { background: #f59e0b; } .pp-tab { margin-top: auto; display: flex; justify-content: space-around; padding: 1.2em .5em .4em; } .pp-tab i { width: 2.2em; height: 2.2em; border-radius: .7em; background: #E4E4E7; } .pp-tab i.on { background: var(--accent); } .pp-3 .pp-s { padding: 0; gap: 0; } .pp-map { position: relative; flex: 1; background: #EEF1F0; color: #111418; } .pp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .pp-map .route { animation: dash 1.6s linear infinite; } @keyframes dash { to { stroke-dashoffset: -20; } } .pp-sheet { padding: 1.8em 1.8em 2.4em; border-radius: 2em 2em 0 0; background: #fff; margin-top: -2em; position: relative; } .pp-sheet small { font-size: 1.2em; color: #71717A; } .pp-sheet b { display: block; font-size: 2.6em; letter-spacing: -.04em; } .pp-sheet span { display: grid; place-items: center; height: 3.6em; border-radius: 1.1em; background: #111418; color: #fff; font-size: 1.2em; font-weight: 600; margin-top: 1em; } /* Recorrido horizontal (escritorio con animación) */ .h-caps .caps { height: calc(100vh + var(--caps-dist, 0px)); overflow: visible; } .h-caps .caps-pin { position: sticky; top: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--navh) + 12px) 0 28px; } .h-caps .caps-nav { display: flex; } .h-caps .caps-head { width: 100%; margin-bottom: clamp(20px, 3vh, 40px); } .h-caps .caps-head h2 { font-size: clamp(30px, 3.6vw, 54px); } .h-caps .caps-track { display: flex; gap: 24px; max-width: none; width: max-content; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } .h-caps .cap { flex: none; width: min(1180px, calc(100vw - 2 * var(--gutter))); height: min(620px, calc(100vh - var(--navh) - 210px)); } .h-caps .cap-visual > * { will-change: transform; } /* Sin tarjeta gráfica sale más barato repintar el visual que componer una capa aparte en cada fotograma */ .lite.h-caps .cap-visual > * { will-change: auto; } .h-caps .cap-visual { height: 100%; min-height: 0; font-size: min(10px, calc((100vw - 64px) / 120), calc((100vh - 300px) / 44)); } /* ========================================================= Antes / después (fijado con scroll, inicio) ========================================================= */ .versus { position: relative; overflow: hidden; background: var(--metal-band); } .versus-pin { position: relative; padding: clamp(96px, 12vw, 160px) 0; } @media (min-width: 961px) { .motion .versus-pin { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--navh) + 8px) 0 24px; } .motion .versus-inner { width: 100%; } .motion .versus-title { font-size: clamp(32px, 3.3vw, 50px); margin-bottom: 20px; } .motion .vs-steps { margin-bottom: 20px; } .motion .vs-list li { padding: 9px 0; } .motion .vs-panel h3 { font-size: clamp(22px, 2vw, 30px); } } .versus-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .versus-title { margin-bottom: 34px; } .vs-steps { display: flex; gap: 10px; margin-bottom: 32px; } .vs-step { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, .45); color: var(--muted); font-weight: 600; font-size: 16px; cursor: pointer; text-align: left; transition: color .4s ease, background-color .4s ease, border-color .4s ease; } .vs-step span { font-size: 12px; color: var(--hl); } .vs-step i { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 2px; background: rgba(15, 18, 23, .1); border-radius: 2px; overflow: hidden; } .vs-step i b { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); } .vs-step.is-on { color: var(--ink); background: #fff; border-color: var(--line-2); box-shadow: var(--shadow); } .vs-step.is-on i b { transform: scaleX(1); } .vs-panels { display: grid; } .vs-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; } .vs-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s, visibility 0s; } .vs-panel h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; margin-bottom: 16px; } .vs-list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line-2); } .vs-list li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; } .vs-list b { font-weight: 600; } .vs-list span { color: var(--ink-2); } .vs-panel.before .vs-list span::before { content: "✕"; margin-right: 8px; color: var(--err); font-weight: 700; } .vs-panel.after .vs-list span::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 700; } .vs-visual { position: relative; display: grid; font-size: min(10px, calc((100vw - 64px) / 66)); } .mv { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transform: translateY(30px) scale(.96); transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s .8s; } .mv.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s; } /* Antes: ventanas sueltas */ .chaos { position: relative; width: 62em; height: 50em; } .frag { position: absolute; border-radius: .9em; background: #fff; color: #1F2328; font-family: var(--sans); overflow: hidden; box-shadow: 0 1.4em 2.6em -1.2em rgba(15, 18, 23, .45), 0 0 0 .1em rgba(15, 18, 23, .06); } .fw-bar { display: flex; align-items: center; gap: .7em; height: 3em; padding: 0 1.1em; color: #fff; } .fw-bar i { width: 1.4em; height: 1.4em; border-radius: .35em; background: rgba(255, 255, 255, .9); flex: none; } .fw-bar b { font-size: 1.15em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fw-bar em { margin-left: auto; padding: .1em .6em; border-radius: 99em; background: #fff; color: #1D4ED8; font: 700 1.05em var(--sans); } .fw-bar.xls { background: #1D6F42; } .fw-bar.mail { background: #1D4ED8; } .fw-bar.pdf { background: #B42318; } .fw-bar.chat { background: #128C7E; } .fw-bar.portal { background: #4B5563; } .fw-bar.erp { background: #2447A6; height: 2.6em; } /* color sólido: el degradado provocaba un tirón de ~160 ms */ .fw-bar.erp .x { margin-left: auto; width: 1.8em; height: 1.8em; border-radius: .2em; background: #C0C0C0; color: #000; font-style: normal; display: grid; place-items: center; font-weight: 700; } .chaos .f-xls { width: 31em; left: 0; top: 3em; transform: rotate(-4deg); } .xls-grid { display: grid; grid-template-columns: 2.4em repeat(4, 1fr); font: 1.1em var(--sans); } .xls-grid span { height: 2.3em; padding: 0 .5em; display: flex; align-items: center; border-right: .1em solid #E5E7EB; border-bottom: .1em solid #E5E7EB; white-space: nowrap; overflow: hidden; } .xls-grid .h { background: #F3F4F6; color: #6B7280; justify-content: center; } .xls-grid .err { background: #FEE2E2; color: #B91C1C; font-weight: 700; } .xls-warn { padding: .8em 1.1em; background: #FEF3C7; color: #92400E; font-size: 1.1em; font-weight: 600; } .chaos .f-mail { width: 30em; right: 0; top: 0; transform: rotate(3deg); } .mail-row { display: grid; gap: .2em; padding: 1em 1.2em; border-bottom: .1em solid #EEF0F2; } .mail-row b { font-size: 1.2em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-row.unread b { font-weight: 700; } .mail-row span { font-size: 1.05em; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chaos .f-pdf { width: 20em; background: #525659; left: 22em; top: 17em; transform: rotate(-2deg); z-index: 2; } .pdf-page { margin: 1.2em; padding: 1.4em; background: #fff; display: grid; gap: .7em; } .pdf-page b { font-size: 1.4em; letter-spacing: .08em; } .pdf-page > i { height: .7em; border-radius: .2em; background: #E5E7EB; } .pdf-page > i.s { width: 60%; } .pdf-t { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .35em; } .pdf-t span { height: 1.4em; background: #F3F4F6; } .chaos .f-chat { width: 24em; background: #EFE7DD; padding-bottom: 1em; left: 2em; bottom: 0; transform: rotate(3deg); z-index: 3; } .f-chat .bub { max-width: 80%; margin: .8em 1em 0; padding: .6em .9em; border-radius: .9em; background: #fff; font-size: 1.2em; } .f-chat .bub.me { margin-left: auto; background: #D9FDD3; } .chaos .f-erp { width: 27em; background: #D4D0C8; border-radius: .3em; font-family: var(--mono); right: 1em; top: 21em; transform: rotate(-3deg); } .erp-body { padding: 1.2em; display: grid; gap: .7em; } .erp-body label { display: grid; grid-template-columns: 9em 1fr; align-items: center; font-size: 1.05em; color: #111; } .erp-body label span { height: 1.9em; background: #fff; box-shadow: inset .15em .15em 0 #808080; } .erp-keys { display: flex; gap: .5em; margin-top: .3em; } .erp-keys em { padding: .35em .7em; background: #D4D0C8; box-shadow: inset -.15em -.15em 0 #808080, inset .15em .15em 0 #fff; font-style: normal; font-size: 1em; } .chaos .f-note { width: 17em; padding: 1.4em; border-radius: .2em; background: #FDE68A; color: #3F2E00; display: grid; gap: .5em; font-family: "Segoe Print", "Comic Sans MS", cursive; right: 5em; bottom: 1em; transform: rotate(6deg); z-index: 3; box-shadow: 0 1em 2em -1em rgba(15, 18, 23, .45); } .f-note b { font-size: 1.5em; } .f-note span { font-size: 1.2em; } .chaos-badge { position: absolute; left: 50%; top: -1em; z-index: 5; transform: translateX(-50%); padding: .7em 1.4em; border-radius: 99em; background: var(--err); color: #fff; font: 700 1.3em var(--sans); white-space: nowrap; box-shadow: 0 1em 2em -1em rgba(220, 38, 38, .6); } /* Después: Torre de Control (clara) */ .tower { display: grid; grid-template-columns: 6em 1fr; width: 64em; height: 46em; border-radius: 1.4em; background: #fff; overflow: hidden; font-family: var(--sans); box-shadow: 0 3em 5em -2.4em rgba(15, 18, 23, .45), 0 0 0 .1em rgba(15, 18, 23, .06); } .tw-side { display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding: 1.6em 0; border-right: .1em solid #E8EAEE; background: #F6F7F9; } .tw-side img { width: 2.8em; filter: grayscale(1) contrast(1.15) brightness(.92); margin-bottom: 1em; } .tw-side i { width: 2.5em; height: 2.5em; border-radius: .7em; background: #E6E8EC; } .tw-side i.on { background: var(--accent); } .tw-main { display: flex; flex-direction: column; gap: 1.4em; padding: 1.8em 2em; min-width: 0; } .tw-top { display: flex; align-items: center; gap: 1.4em; } .tw-top small { display: block; font: 1.05em var(--mono); color: #9CA3AF; } .tw-top b { font: 600 2.1em var(--display); letter-spacing: -.03em; } .tw-search { flex: 1; height: 3em; border: .1em solid #E8EAEE; border-radius: .8em; background: #F8F9FA; } .tw-sync { display: flex; align-items: center; gap: .6em; font: 1.05em var(--mono); color: #6B7280; white-space: nowrap; } .tw-sync i { width: .8em; height: .8em; border-radius: 50%; background: var(--ok); } .tw-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; } .tw-kpis div { padding: 1.1em 1.3em; border: .1em solid #EEF0F2; border-radius: 1em; } .tw-kpis small { display: block; font-size: 1.05em; color: #9CA3AF; margin-bottom: .2em; } .tw-kpis b { font: 600 2.7em var(--display); letter-spacing: -.04em; } .tw-kpis .w b { color: var(--warn); } .tw-body { flex: 1; display: grid; grid-template-columns: 1fr 22em; gap: 1.2em; min-height: 0; } .tw-table { border: .1em solid #EEF0F2; border-radius: 1em; overflow: hidden; } .tw-r { display: grid; grid-template-columns: 5em 6.5em 1fr 4.6em; align-items: center; gap: .8em; padding: .95em 1.3em; border-bottom: .1em solid #F2F3F5; font-size: 1.15em; } .tw-r:last-child { border-bottom: 0; } .tw-r.h { background: #FAFAFA; color: #9CA3AF; font-size: 1em; font-weight: 600; } .tw-r .src { justify-self: start; padding: .15em .5em; border: .1em solid #E5E7EB; border-radius: .4em; font-style: normal; font-size: .85em; color: #6B7280; } .tw-r .l { font: .95em var(--mono); color: #6B7280; } .tw-side2 { display: grid; gap: 1em; align-content: start; } .tw-box { padding: 1.2em 1.3em; border: .1em solid #EEF0F2; border-radius: 1em; display: grid; gap: .6em; } .tw-box > small { font: 600 .95em var(--sans); color: #9CA3AF; text-transform: uppercase; letter-spacing: .08em; } .int { display: flex; align-items: center; gap: .7em; font-size: 1.2em; } .int i { width: .7em; height: .7em; border-radius: 50%; background: var(--ok); } .int span { margin-left: auto; font: .85em var(--mono); color: #9CA3AF; } .al { padding: .6em .8em; border-radius: .6em; font-size: 1.1em; border-left: .3em solid; } .al.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-tx); } .al.err { background: var(--err-soft); border-color: var(--err); color: var(--err-tx); } /* ——— El problema: escenas ——— */ .pains { align-items: stretch; } .pain { display: flex; flex-direction: column; } .pv { position: relative; height: 230px; margin-bottom: 26px; border-radius: 16px; background: linear-gradient(160deg, #F7F8FA 0%, #E6E9EE 100%); border: 1px solid var(--line); overflow: hidden; font-size: 6.6px; } .pv .frag { position: absolute; } .pv-many .w1 { left: 4%; top: 9%; width: 30em; transform: rotate(-3deg); } .pv-many .w2 { right: 3%; top: 6%; width: 28em; transform: rotate(3deg); } .pv-many .w3 { left: 22%; top: 36%; width: 30em; z-index: 2; } .pv-many .w4 { right: 6%; bottom: 20%; width: 24em; transform: rotate(-2deg); z-index: 3; } .mini-rows { display: grid; gap: .5em; padding: 1em 1.2em 1.2em; } .mini-rows i { height: .9em; border-radius: .3em; background: #E5E7EB; } .mini-rows i:nth-child(2) { width: 70%; } .mini-rows i:nth-child(3) { width: 85%; } .mini-rows b { font: 700 1.2em var(--mono); color: #111827; } .mini-rows b.bad { color: var(--err-tx); background: var(--err-soft); padding: .1em .4em; border-radius: .3em; justify-self: start; } .taskbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: .9em; padding: 1em; background: rgba(255, 255, 255, .92); border-top: .1em solid var(--line); } .taskbar i { position: relative; width: 3.4em; height: 3.4em; border-radius: .9em; background: var(--c, #9CA3AF); } .taskbar i:first-child::after { content: "8"; position: absolute; right: -.7em; top: -.7em; width: 2em; height: 2em; border-radius: 50%; background: var(--err); color: #fff; font: 700 1.2em/2em var(--sans); text-align: center; } .cursor { position: absolute; z-index: 5; left: 22%; top: 30%; width: 2.6em; animation: cursor 3.2s var(--ease) infinite; will-change: transform; } @keyframes cursor { 0%, 12% { transform: translate(0, 0); } 45%, 60% { transform: translate(30em, 10em); } 92%, 100% { transform: translate(0, 0); } } .copytag { position: absolute; z-index: 5; left: 50%; top: 4%; transform: translateX(-50%); padding: .5em 1.1em; border-radius: 99em; background: var(--ink); color: #fff; font: 600 1.35em var(--mono); white-space: nowrap; } .pv-xls .frag { left: 5%; right: 5%; top: 8%; } .pv-xls .xls-grid { font-size: 1.15em; } .dlg { position: absolute; z-index: 3; left: 50%; top: 66%; width: 34em; transform: translate(-50%, -50%); padding: 1.6em; border-radius: .8em; background: #fff; box-shadow: 0 1.6em 3.2em -1.2em rgba(15, 18, 23, .45), 0 0 0 .1em rgba(15, 18, 23, .08); font-family: var(--sans); } .dlg b { display: flex; align-items: center; gap: .6em; font-size: 1.5em; } .dlg b::before { content: "!"; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--warn); color: #fff; font-size: .9em; } .dlg p { margin: .7em 0 1.2em; font-size: 1.3em; color: #4B5563; line-height: 1.4; } .dlg div { display: flex; justify-content: flex-end; gap: .6em; } .dlg span { padding: .5em 1.2em; border-radius: .4em; border: .1em solid #D1D5DB; font-size: 1.2em; } .dlg span.p { background: #1D4ED8; border-color: #1D4ED8; color: #fff; } .pv-chat .frag { left: 8%; right: 8%; top: 7%; bottom: -2em; background: #EFE7DD; } .pv-chat .bub { font-size: 1.55em; } .pv-chat .typing { display: inline-flex; margin: .8em 1em 0; } .symptoms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding: 22px 26px; border: 1px dashed var(--line-2); border-radius: 20px; } .symptoms b { font: 600 16px var(--display); margin-right: 6px; } .symptoms span { padding: 8px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); } .symptoms span::before { content: "•"; margin-right: 8px; color: var(--err); } /* ——— Dos caminos ——— */ .paths { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 16px; } .path { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); } .path.result { background: var(--accent); border-color: var(--accent); color: #fff; } .path .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); } .path.result .ico { background: rgba(255, 255, 255, .16); color: #fff; } .path .ico svg { width: 26px; height: 26px; } .path small { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .path.result small { color: #D6E2FF; } .path h3 { font-size: 26px; line-height: 1.12; } .path p { margin: 0; color: var(--ink-2); } .path.result p { color: #E4EBFF; } .path ul { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; } .path li::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 700; } .path.result li::before { color: #fff; } .path-op { display: grid; place-items: center; font: 600 30px var(--display); color: var(--muted); } /* ——— Qué construimos: 04 en cualquier dispositivo ——— */ .multi { position: relative; width: 62em; height: 44em; } .mw { position: absolute; border-radius: 1.2em; overflow: hidden; background: #fff; font-family: var(--sans); box-shadow: 0 1.8em 3em -1.4em rgba(15, 23, 42, .4), 0 0 0 .1em rgba(0, 0, 0, .06); } .mw-bar { display: flex; align-items: center; gap: .6em; height: 3.2em; padding: 0 1.2em; background: #F1F2F4; border-bottom: .1em solid #E5E7EB; } .mw-bar i { width: 1em; height: 1em; border-radius: 50%; background: #D8DBE0; } .mw-bar span { margin-left: 1em; padding: .4em 1.2em; border-radius: .6em; background: #fff; font-size: 1.1em; color: #6B7280; } .mw-bar b { margin-left: 1em; font-size: 1.15em; color: #374151; } .mw-browser { left: 0; top: 0; width: 42em; } .mw-desk { right: 0; top: 12em; width: 31em; z-index: 2; } .mw-desk .mw-bar { justify-content: space-between; background: #E9ECF1; } .mw-desk .mw-bar em { font-style: normal; font-size: 1.1em; color: #6B7280; letter-spacing: .4em; } .mw-body { display: grid; grid-template-columns: 7em 1fr; min-height: 22em; } .mw-side { display: grid; align-content: start; gap: .8em; padding: 1.2em; background: #F6F7F9; border-right: .1em solid #EEF0F2; } .mw-side i { height: 1.2em; border-radius: .4em; background: #E3E6EB; } .mw-side i:first-child { background: var(--accent); } .mw-main { display: grid; align-content: start; gap: 1em; padding: 1.4em; } .mw-main > b { font-size: 1.8em; letter-spacing: -.02em; } .mw-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; } .mw-k div { padding: .8em; border: .1em solid #EEF0F2; border-radius: .8em; } .mw-k small { display: block; font-size: 1em; color: #9CA3AF; } .mw-k strong { font-size: 1.8em; letter-spacing: -.03em; } .mw-l { display: grid; gap: .5em; } .mw-l i { height: 1.6em; border-radius: .5em; background: #F3F4F6; } .multi .pp { top: auto; bottom: -3em; left: 5em; margin: 0; width: 14em; z-index: 3; transform: rotate(-6deg); } .oschips { position: absolute; right: 0; bottom: 0; display: flex; gap: .6em; z-index: 4; } .oschips span { padding: .6em 1.3em; border-radius: 99em; background: var(--ink); color: #fff; font: 600 1.2em var(--sans); } /* ——— Antes/después: una sola ventana con todo conectado ——— */ .hub { position: relative; width: 66em; height: 50em; } .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .hub-lines .base path { stroke: #8FA6D9; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; opacity: .7; } .hub-lines .flow path { stroke: var(--accent); stroke-width: 2.6; fill: none; stroke-dasharray: 16 400; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: flow 2.6s linear infinite; } .hub-lines .flow path:nth-child(2) { animation-delay: .5s; } .hub-lines .flow path:nth-child(3) { animation-delay: 1s; } .hub-lines .flow path:nth-child(4) { animation-delay: 1.5s; } .hub-lines .flow path:nth-child(5) { animation-delay: 2s; } .hub-src { position: absolute; z-index: 2; border: .12em solid var(--accent-soft); display: flex; align-items: center; gap: .7em; padding: .8em 1.3em .8em .8em; border-radius: 1.2em; background: #fff; font: 600 1.3em var(--sans); box-shadow: 0 .8em 1.6em -.8em rgba(15, 23, 42, .35), 0 0 0 .08em rgba(0, 0, 0, .06); } .hub-src i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .7em; color: #fff; font-style: normal; font-size: .9em; background: var(--c); } .hub-src.s1 { left: 0; top: 8em; } .hub-src.s2 { left: 0; bottom: 8em; } .hub-src.s3 { right: 0; top: 3em; } .hub-src.s4 { right: 0; top: 23em; } .hub-src.s5 { right: 3em; bottom: 3em; } .hub-app { position: absolute; z-index: 1; left: 12em; top: 7em; width: 42em; height: 36em; display: grid; grid-template-columns: 11em 1fr; border-radius: 1.3em; overflow: hidden; background: #fff; font-family: var(--sans); box-shadow: 0 3em 5em -2.4em rgba(15, 18, 23, .45), 0 0 0 .1em rgba(15, 18, 23, .06), 0 0 0 .9em rgba(36, 86, 214, .08); } .hub-nav { display: grid; align-content: start; gap: .35em; padding: 1.3em .9em; background: #F6F7F9; border-right: .1em solid #EEF0F2; } .hub-nav img { width: 2.6em; margin: 0 0 .9em .4em; filter: grayscale(1) contrast(1.15) brightness(.92); } .hub-nav span { padding: .55em .7em; border-radius: .6em; font-size: 1.1em; color: #6B7280; } .hub-nav span.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .hub-main { display: flex; flex-direction: column; gap: 1.1em; padding: 1.5em 1.7em; min-width: 0; } .hub-top { display: flex; justify-content: space-between; align-items: center; } .hub-top small { display: block; font-size: 1em; color: #9CA3AF; } .hub-top b { font: 600 1.9em var(--display); letter-spacing: -.03em; } .hub-top em { display: inline-flex; align-items: center; gap: .5em; font-style: normal; font: 600 1em var(--sans); color: var(--ok-tx); background: var(--ok-soft); padding: .35em .8em; border-radius: 99em; } .hub-top em::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--ok); } .hub-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; } .hub-k div { padding: .8em 1em; border: .1em solid #EEF0F2; border-radius: .8em; } .hub-k small { display: block; font-size: .95em; color: #9CA3AF; } .hub-k strong { font: 600 1.7em var(--display); letter-spacing: -.03em; white-space: nowrap; } .hub-feed { display: grid; gap: .5em; } .hub-feed > small { font: 600 .95em var(--sans); color: #9CA3AF; text-transform: uppercase; letter-spacing: .08em; } .hub-feed div { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: .8em; padding: .6em .8em; border: .1em solid #F0F1F4; border-radius: .7em; font-size: 1.1em; } .hub-feed i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .6em; color: #fff; font-style: normal; font-size: .85em; background: var(--c); } .hub-feed span { color: #6B7280; font-size: .9em; } /* ——— Diagnóstico: todo termina en una sola ventana ——— */ .uni { position: relative; width: 64em; border-radius: 1.4em; overflow: hidden; background: #fff; font-family: var(--sans); box-shadow: 0 3em 5em -2.4em rgba(15, 18, 23, .45), 0 0 0 .1em rgba(15, 18, 23, .06), 0 0 0 1em rgba(36, 86, 214, .08); } .uni-bar { display: flex; align-items: center; gap: .7em; height: 3.8em; padding: 0 1.6em; background: #F1F3F6; border-bottom: .1em solid #E4E7EC; } .uni-bar > i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #D5D9E0; } .uni-bar b { margin-left: 1em; font-size: 1.3em; color: #374151; } .uni-bar em { margin-left: auto; display: inline-flex; align-items: center; gap: .5em; font-style: normal; font: 600 1.1em var(--sans); color: var(--ok-tx); background: var(--ok-soft); padding: .35em .9em; border-radius: 99em; } .uni-bar em::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--ok); } .uni-body { display: grid; grid-template-columns: 11em 1fr; } .uni-nav { display: grid; align-content: start; gap: .35em; padding: 1.4em .9em; background: #F7F8FA; border-right: .1em solid #EEF0F2; } .uni-nav img { width: 2.6em; margin: 0 0 1em .4em; filter: grayscale(1) contrast(1.15) brightness(.92); } .uni-nav span { padding: .55em .7em; border-radius: .6em; font-size: 1.12em; color: #6B7280; } .uni-nav span.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .uni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: 1.4em; } .ut { position: relative; display: grid; align-content: start; gap: .55em; min-height: 13.5em; padding: 1.1em 1.2em 1.2em; border: .1em solid #ECEEF2; border-radius: 1em; background: #fff; } .ut::before { content: ""; position: absolute; left: 0; top: 1.2em; bottom: 1.2em; width: .3em; border-radius: 0 .3em .3em 0; background: var(--c); } .ut > b { font-size: 1.35em; letter-spacing: -.01em; } .ut > small { font-size: 1em; color: #9CA3AF; } .ut > small:not(.nb)::before { content: "antes: "; } .ut-rows { display: grid; gap: .35em; margin-top: .2em; } .ut-rows div { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .45em .6em; border-radius: .5em; background: #F7F8FA; font-size: 1.05em; } .ut-rows .st { font-size: .85em; } .ut-big { font: 600 2.2em var(--display); letter-spacing: -.03em; color: var(--ink); margin-top: .2em; } .ut-meter { height: .6em; border-radius: .4em; background: #EEF0F3; overflow: hidden; } .ut-meter i { display: block; width: 78%; height: 100%; background: var(--accent); } .ut-bars { display: flex; align-items: flex-end; gap: .35em; height: 4.2em; margin-top: .3em; } .ut-bars i { flex: 1; border-radius: .25em .25em 0 0; background: #C9D5F5; } .ut-bars i:last-child { background: var(--accent); } .ut-task { display: flex; align-items: center; gap: .6em; padding: .5em .6em; border-radius: .5em; background: #F7F8FA; font-size: 1.05em; } .ut-task i { width: 1.2em; height: 1.2em; border-radius: .35em; border: .15em solid var(--accent); flex: none; } .ut-task i.ok { background: var(--accent); } /* En escritorio con animación, GSAP controla las dos maquetas a la vez (vuelo de ventanas) */ .vs-scrub .mv { opacity: 1; visibility: visible; transform: none; transition: none; } .vs-scrub .mv-after { pointer-events: none; } .vs-scrub .mv-before { z-index: 2; } .vs-sticky .versus { height: calc(100vh + 160vh); overflow: visible; } .vs-sticky .versus-pin { position: sticky; top: 0; height: 100vh; } /* ——— Resultados: antes y después de cada caso ——— */ .impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .imp { display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); } .imp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .imp-head a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; } .imp-head a:hover { text-decoration: underline; } .imp h3 { font-size: 22px; line-height: 1.15; } .imp-row { display: grid; gap: 10px; padding: 16px; border-radius: 16px; } .imp-row.before { flex: 1; align-content: start; background: #F6F3F3; border: 1px dashed #E7C9C9; } .imp-row.after { background: var(--accent-soft); border: 1px solid #CFDBF8; } .imp-row small { font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--err-tx); } .imp-row.after small { color: var(--accent); } .imp-row span { font-size: 15px; color: var(--ink-2); line-height: 1.4; } .imp-row.after span { color: var(--ink); font-weight: 500; } .blocks { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; align-items: center; } .blocks i { width: 22px; height: 22px; border-radius: 6px; background: var(--c, #CBD2DC); transform: scale(0); transition: transform .5s var(--ease); } .blocks.one i { width: 100%; max-width: 180px; height: 30px; border-radius: 9px; background: var(--accent); transform-origin: left; } .blocks.one i::after { content: "1 sistema"; display: block; padding: 0 12px; font: 600 13px/30px var(--sans); color: #fff; } .imp-bar { height: 14px; border-radius: 99px; background: rgba(15, 18, 23, .06); overflow: hidden; } .imp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--err); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); } .imp-row.after .imp-bar i { background: var(--accent); } .impact.is-in .blocks i { transform: none; } .impact.is-in .imp-bar i { transform: scaleX(var(--w, 1)); } .impact.is-in .blocks i:nth-child(2) { transition-delay: .04s; } .impact.is-in .blocks i:nth-child(3) { transition-delay: .08s; } .impact.is-in .blocks i:nth-child(4) { transition-delay: .12s; } .impact.is-in .blocks i:nth-child(5) { transition-delay: .16s; } .impact.is-in .blocks i:nth-child(6) { transition-delay: .2s; } .impact.is-in .blocks i:nth-child(7) { transition-delay: .24s; } .impact.is-in .blocks i:nth-child(8) { transition-delay: .28s; } .impact.is-in .blocks i:nth-child(n+9) { transition-delay: .32s; } .impact.is-in .imp-row.after .blocks i, .impact.is-in .imp-row.after .imp-bar i { transition-delay: .5s; } .no-js .blocks i, .no-motion .blocks i { transform: none; } .no-js .imp-bar i, .no-motion .imp-bar i { transform: scaleX(var(--w, 1)); } .imp-foot { display: flex; justify-content: center; margin-top: 32px; } /* ——— Resultados (inicio) ——— */ .proof { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 26px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); } .proof div { padding: 32px 28px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; } .proof div:last-child { border-right: 0; } .proof b { font: 600 clamp(34px, 3.4vw, 48px)/1 var(--display); letter-spacing: -.04em; color: var(--accent); } .proof span { font-size: 15px; color: var(--ink-2); } .proof small { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .proof-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; } .proof-foot p { margin: 0; color: var(--muted); font-size: 14px; } /* ——— Qué hacemos / qué no ——— */ .dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .dd { padding: clamp(26px, 3vw, 40px); border-radius: 26px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); } .dd.no { background: var(--bg-2); box-shadow: none; } .dd h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 22px; } .dd h3 i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-style: normal; font-size: 18px; color: #fff; background: var(--ok); } .dd.no h3 i { background: var(--err); } .dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .dd li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); } .dd.no li { background: transparent; border-style: dashed; } .dd li svg { width: 22px; height: 22px; margin: 4px auto 0; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dd.no li svg { color: var(--muted); } .dd li b { display: block; font: 600 16px var(--display); } .dd.no li b { text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, .6); text-decoration-thickness: 2px; color: var(--ink-2); } .dd li span { font-size: 14px; color: var(--ink-2); } /* ——— Metodología: conexión y puesta en marcha ——— */ .conn { position: relative; width: 46em; height: 40em; } .conn svg { position: absolute; inset: 0; width: 100%; height: 100%; } .conn .ln path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 300; stroke-dashoffset: 300; vector-effect: non-scaling-stroke; } .sv.is-on .conn .ln path { animation: draw 1.4s var(--ease) forwards; } .sv.is-on .conn .ln path:nth-child(2) { animation-delay: .25s; } .sv.is-on .conn .ln path:nth-child(3) { animation-delay: .5s; } .sv.is-on .conn .ln path:nth-child(4) { animation-delay: .75s; } @keyframes draw { to { stroke-dashoffset: 0; } } .conn-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3em; padding: 1.8em 2.4em; border-radius: 1.6em; background: #fff; box-shadow: 0 1.5em 2.7em -1em rgba(15, 23, 42, .35), 0 0 0 .8em rgba(36, 86, 214, .1); font-family: var(--sans); } .conn-core img { width: 3.6em; filter: grayscale(1) contrast(1.15) brightness(.92); } .conn-core b { font-size: 1.7em; letter-spacing: -.02em; } .conn-n { position: absolute; display: grid; gap: .3em; padding: 1em 1.3em; border-radius: 1.1em; background: #fff; font-family: var(--sans); box-shadow: 0 .8em 1.4em -.6em rgba(15, 23, 42, .3), 0 0 0 .1em rgba(0, 0, 0, .05); min-width: 14em; } .conn-n b { font-size: 1.3em; } .conn-n span { font: 600 1.05em var(--sans); color: var(--ok-tx); } .conn-n span.w { color: var(--accent); } .conn-n span.p { color: #9CA3AF; } .conn-n.a { left: 0; top: 0; } .conn-n.b { right: 0; top: 0; } .conn-n.c { left: 0; bottom: 0; } .conn-n.d { right: 0; bottom: 0; } .golive { width: 46em; display: grid; gap: 1.2em; } .gl-card { padding: 1.8em 2em; border-radius: 1.4em; background: #fff; box-shadow: 0 1.5em 2.7em -1.25em rgba(15, 23, 42, .3); font-family: var(--sans); } .gl-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2em; } .gl-h b { font-size: 1.8em; letter-spacing: -.02em; } .gl-h span { font: 600 1.1em var(--sans); color: var(--ok-tx); } .team { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; } .team div { display: grid; justify-items: center; gap: .4em; padding: 1em .5em; border-radius: 1em; background: #F7F8FA; font-size: 1.1em; } .team i { position: relative; width: 3.4em; height: 3.4em; border-radius: 50%; background: linear-gradient(135deg, #C7D2FE, #6B83D6); } .team i::after { content: ""; position: absolute; right: 0; bottom: 0; width: .9em; height: .9em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .2em #fff; } .uptime { display: flex; gap: .3em; height: 3.4em; align-items: flex-end; } .uptime i { flex: 1; height: 100%; border-radius: .25em; background: #86EFAC; } .uptime i.l { height: 70%; background: #FCD34D; } .gl-foot { display: flex; justify-content: space-between; margin-top: .6em; font-size: 1.05em; color: #9CA3AF; } /* ========================================================= Casos destacados (inicio) ========================================================= */ .feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feat-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); text-decoration: none; box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s var(--ease); overflow: hidden; } .feat-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 50px -30px rgba(15, 18, 23, .45); } .feat-card .tag { align-self: flex-start; } .feat-card h3 { font-size: 24px; line-height: 1.15; } .feat-card p { margin: 0; color: var(--ink-2); font-size: 15px; } .feat-metric { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; } .feat-metric b { font: 600 34px/1 var(--display); letter-spacing: -.04em; white-space: nowrap; color: var(--accent); } .feat-metric span { font-size: 13px; color: var(--muted); } .feat-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; } .feat-go svg { width: 15px; height: 15px; transition: transform .4s var(--ease); } .feat-card:hover .feat-go svg { transform: translateX(4px); } .feat-foot { display: flex; justify-content: center; margin-top: 40px; } .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); } .tag.live { background: var(--ok-soft); color: var(--ok-tx); border-color: transparent; } .tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } /* ——— Franja de llamada a la acción ——— */ .cta-band { position: relative; background: var(--metal-band); padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; border-top: 1px solid var(--line-2); } .cta-inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; } .cta-inner h2 { font-size: clamp(34px, 4.6vw, 64px); max-width: 17ch; } .cta-inner p { margin: 18px 0 0; color: var(--ink-2); font-size: 18px; max-width: 50ch; } .cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .cta-actions small { font-size: 13px; color: var(--muted); } /* ========================================================= Soluciones ========================================================= */ .mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .mod { padding: 32px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); } .mod svg { width: 30px; height: 30px; margin-bottom: 24px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .mod h3 { font-size: 21px; margin-bottom: 10px; } .mod p { margin: 0; color: var(--ink-2); font-size: 15px; } .compare { overflow-x: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); } .compare table { width: 100%; border-collapse: collapse; min-width: 640px; } .compare th, .compare td { padding: 20px 26px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; } .compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; } .compare thead th { font: 600 19px var(--display); letter-spacing: -.02em; background: var(--card-2); } .th-tag { display: block; font: 600 12px var(--sans); letter-spacing: .08em; margin-bottom: 4px; color: var(--muted); } .compare thead th.bad .th-tag { color: var(--err-tx); } .compare thead th.good .th-tag { color: var(--ok-tx); } .compare tbody th { width: 20%; color: var(--muted); font-weight: 500; } .compare td { color: var(--ink-2); width: 40%; } .compare td.good { color: var(--ink); font-weight: 500; } .compare td + td, .compare th + td, .compare thead th + th { border-left: 1px solid var(--line); } .calc { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 32px; align-items: center; margin-top: 24px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); } .calc h3 { font-size: 24px; margin-bottom: 8px; } .calc-copy p:not(.eyebrow) { margin: 0; color: var(--ink-2); font-size: 15px; } .calc .eyebrow { margin-bottom: 12px; } .calc-ctrl { display: grid; gap: 22px; } .calc-ctrl label { display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); } .calc-ctrl label span { display: flex; justify-content: space-between; gap: 12px; } .calc-ctrl output { font: 600 14px var(--mono); color: var(--ink); } .calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--line-2); outline-offset: 6px; } .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; } .calc input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; cursor: pointer; } .calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .calc-out div { padding: 18px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); } .calc-out b { display: block; font: 600 34px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent); } .calc-out small { font-size: 13px; color: var(--muted); } .calc-f { grid-column: 1 / -1; margin: 0; font: 11px var(--mono); color: var(--muted); } .notwe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .notwe div { padding: 26px; border: 1px dashed var(--line-2); border-radius: 20px; } .notwe b { display: block; font: 600 18px var(--display); margin-bottom: 6px; } .notwe b::before { content: "✕ "; color: var(--err); } .notwe p { margin: 0; color: var(--ink-2); font-size: 15px; } /* ========================================================= Portfolio ========================================================= */ .pf-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; } .filters { display: flex; flex-wrap: wrap; gap: 8px; } .filters button { padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 99px; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .35s var(--ease); } .filters button:hover { border-color: var(--ink); color: var(--ink); } .filters button.is-on { background: var(--accent); color: #fff; border-color: var(--accent); } .pf-count { font: 500 13px var(--mono); color: var(--muted); } .cases { display: grid; gap: 28px; } .case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 552px); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: 32px; background: var(--card); box-shadow: var(--shadow); scroll-margin-top: calc(var(--navh) + 24px); } .case[hidden] { display: none; } .case.flip { grid-template-columns: minmax(0, 552px) minmax(0, 1fr); } .case.flip .case-copy { order: 2; } .case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .case-num { font: 600 12px var(--sans); letter-spacing: .14em; color: var(--hl); } .case h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; margin: 8px 0 10px; } .case-sub { margin: 0 0 24px; color: var(--muted); font-size: 16px; } .case-dl { margin: 0 0 24px; display: grid; gap: 16px; } .case-dl dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .case-dl dd { margin: 0; color: var(--ink-2); } .metrics { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .metrics li { display: grid; gap: 2px; min-width: 150px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); } .metrics b { font: 600 26px/1 var(--display); letter-spacing: -.03em; color: var(--accent); } .metrics span { font-size: 12px; color: var(--muted); } .case-cta { display: grid; gap: 8px; justify-items: start; } .case-cta small { font-size: 13px; color: var(--muted); max-width: 46ch; } .case-visual { position: relative; font-size: min(7.4px, calc((min(100vw, 1280px) - 200px) / 150)); border-radius: 22px; background: linear-gradient(160deg, #FFFFFF 0%, #E3E6EA 100%); min-height: 60em; padding: 4em 2em; display: grid; place-items: center; overflow: hidden; } .cases + .pf-more { margin-top: 28px; } .pf-more { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 34px clamp(28px, 4vw, 56px); border: 1px dashed var(--line-2); border-radius: 28px; } .pf-more h3 { font-size: 24px; margin-bottom: 6px; } .pf-more p { margin: 0; color: var(--ink-2); max-width: 60ch; } .pf-note { margin: 18px 0 0; font-size: 12px; color: var(--muted); } /* Capturas reales del portfolio. Cada imagen se genera al tamaño exacto en que se muestra (1 px de imagen = 1 px de pantalla en escritorio, con versión @2x) y se pinta sin giros ni parallax: así los textos de la captura se ven nítidos. Escenario de 1000x800em; 1em = 0.52 px en escritorio y escala en pantallas más estrechas. */ .shots { container-type: inline-size; display: block; min-height: 0; padding: 16px; } .shots-stage { position: relative; font-size: min(.52px, calc(100cqw / 1000)); width: 1000em; height: 800em; margin: 0 auto; } .shot { position: absolute; margin: 0; } .shot img { display: block; width: 100%; height: auto; } .shot-win { border-radius: 20em; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(15, 18, 23, .07), 0 40em 80em -34em rgba(15, 18, 23, .5); } .shot-bar { display: flex; align-items: center; gap: 11em; height: 44em; padding: 0 20em; background: #F1F2F4; border-bottom: 1px solid #E4E6EA; } .shot-bar i { width: 15em; height: 15em; border-radius: 50%; background: #FF5F57; } .shot-bar i:nth-child(2) { background: #FEBC2E; } .shot-bar i:nth-child(3) { background: #28C840; } .shot-bar span { display: flex; align-items: center; gap: .5em; margin-left: .8em; font: 500 21em/1 var(--sans); color: #374151; } .shot-bar b { width: .7em; height: .7em; border-radius: .22em; background: #16a34a; } .shot-win.dark { background: #16181c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40em 80em -34em rgba(15, 18, 23, .6); } .shot-win.dark .shot-bar { background: #202328; border-bottom-color: #2b2f36; } .shot-win.dark .shot-bar span { color: #c9ced6; } .shot-win.dark .shot-bar b { background: #10b981; } .shot-phone { width: 400em; padding: 5em; border-radius: 52em; background: #151618; box-shadow: inset 0 0 0 3em #3b3c40, 0 40em 80em -34em rgba(15, 18, 23, .55); } .shot-phone img { border-radius: 47em; } .shot.main { left: 0; top: 40em; width: 900em; } .s-sooner .main { top: 70em; } .shot-phone.side { width: 300em; } .s-sooner .side { left: 700em; top: 190em; } .s-shop .side { right: 0; top: 450em; width: 600em; } .s-crm .side { right: 0; top: 440em; width: 600em; } .s-phones .p1 { left: 90em; top: 130em; } .s-phones .p2 { left: 510em; top: 40em; } .cam-badge { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 14em; padding: 16em 28em 16em 20em; border-radius: 99em; background: #fff; box-shadow: 0 16em 34em -16em rgba(15, 23, 42, .45); } .cam-badge svg { width: 38em; color: var(--accent); } .cam-badge span { font: 600 23em/1 var(--sans); color: var(--ink); white-space: nowrap; } /* ========================================================= Metodología ========================================================= */ .story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); } .story-steps { list-style: none; margin: 0; padding: 0; } .sstep { padding: 34px 0 34px 28px; border-left: 2px solid var(--line-2); transition: border-color .5s ease, opacity .5s ease; } .motion .sstep { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; } .motion .sstep.is-on { opacity: 1; border-left-color: var(--accent); } .sstep-n { display: block; font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hl); margin-bottom: 10px; } .sstep h3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.035em; margin-bottom: 12px; } .sstep p { margin: 0 0 14px; color: var(--ink-2); font-size: 17px; max-width: 44ch; } .sstep small { display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); } .story-stage { position: relative; } .stage-frame { position: sticky; top: calc(50vh - 260px); height: 520px; border-radius: 30px; background: linear-gradient(160deg, #FFFFFF 0%, #DFE2E7 100%); border: 1px solid var(--line); overflow: hidden; font-size: min(10px, calc((100vw - 64px) / 110)); } .sv { will-change: transform, opacity; position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease); font-family: var(--sans); color: #0A0A0B; } .sv.is-on { opacity: 1; transform: none; } .sv-doc { width: 42em; padding: 2.8em; border-radius: 1.6em; background: #fff; box-shadow: 0 1.5em 2.7em -1.25em rgba(15, 23, 42, .35); } .sv-doc-h small { display: block; font-size: 1.1em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; } .sv-doc-h b { font-size: 2.4em; letter-spacing: -.03em; } .sv-sec { margin: 1.8em 0 .9em; font-size: 1.2em; font-weight: 700; } .sv-users { display: flex; flex-wrap: wrap; gap: .6em; } .sv-users span { padding: .5em 1.1em; border-radius: 99em; background: #F4F4F5; font-size: 1.15em; font-weight: 500; } .sv-fric { display: grid; gap: .7em; } .sv-fric div { display: flex; align-items: center; gap: 1em; padding: .8em 1em; border-radius: .9em; background: #FAFAFA; border: .1em solid #EEF0F2; font-size: 1.2em; } .sv-fric i { width: 1em; height: 1em; border-radius: 50%; background: var(--err); flex: none; } .sv-fric i.w { background: var(--warn); } .sv-dev { width: 44em; padding: 2.6em; border-radius: 1.6em; background: #fff; box-shadow: 0 1.5em 2.7em -1.25em rgba(15, 23, 42, .35); } .dev-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4em; } .dev-h b { font-size: 2.2em; letter-spacing: -.03em; } .dev-h span { font-size: 1.15em; color: #71717A; } .dev-rel { display: grid; grid-template-columns: 5em 1fr auto; align-items: center; gap: 1em; padding: 1em 0; border-bottom: .1em solid #F4F4F5; font-size: 1.25em; } .dev-rel em { font-style: normal; font-weight: 600; padding: .3em .7em; border-radius: .6em; background: #F4F4F5; justify-self: start; font-size: .9em; } .dev-rel em.done { background: var(--ok-soft); color: var(--ok-tx); } .dev-rel i.ok { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ok); } .dev-rel u { width: 8em; height: .7em; border-radius: .4em; background: #E4E4E7; overflow: hidden; } .dev-rel u b { display: block; width: 62%; height: 100%; background: var(--accent); } .dev-rel.cur { font-weight: 600; } .dev-code { margin-top: 1.6em; padding: 1.4em 1.6em; border-radius: 1em; background: #1B1E24; color: #E4E4E7; font: 1.2em/1.7 var(--mono); } .dev-code .k { color: #9CC3F5; } .dev-code .f { color: #F5D29C; } .mon { width: 44em; padding: 2.4em; border-radius: 1.6em; background: #fff; box-shadow: 0 1.5em 2.7em -1.25em rgba(15, 23, 42, .35); display: grid; gap: .9em; } .mon-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; } .mon-h b { font-size: 2.2em; letter-spacing: -.03em; } .mon-h span { display: flex; align-items: center; gap: .6em; font: 600 1.15em var(--sans); color: var(--ok-tx); } .mon-h span i, .mon-r i { width: .8em; height: .8em; border-radius: 50%; background: var(--ok); } .mon-r { display: grid; grid-template-columns: 1em 1fr auto; align-items: center; gap: 1em; padding: 1em 1.2em; border: .1em solid #EEF0F2; border-radius: .9em; font-size: 1.2em; } .mon-r small { font: .85em var(--mono); color: #9CA3AF; } .mon-t { display: flex; align-items: center; gap: 1em; margin-top: .4em; padding: 1em 1.2em; border-radius: .9em; background: #FAFAFA; font-size: 1.2em; } .no-motion .story-stage, .no-js .story-stage { display: none; } .no-motion .story, .no-js .story { grid-template-columns: 1fr; } /* Principios */ .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .principle { position: relative; padding: 32px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); } .principle::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(15, 18, 23, .06), transparent 65%); } .principle:hover::before { opacity: 1; } .principle svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 26px; } .principle h3 { font-size: 20px; margin-bottom: 10px; } .principle p { margin: 0; color: var(--ink-2); font-size: 15px; } /* FAQ */ .faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .faq-list { border-top: 1px solid var(--line-2); } .faq-list details { border-bottom: 1px solid var(--line-2); } .faq-list summary { position: relative; list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font: 600 19px/1.35 var(--display); letter-spacing: -.015em; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after, .faq-list summary::before { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: var(--accent); transition: transform .4s var(--ease); } .faq-list summary::before { transform: rotate(90deg); } .faq-list details[open] summary::before { transform: rotate(0deg); } .faq-list details p { margin: 0 0 24px; color: var(--ink-2); max-width: 62ch; } /* ========================================================= Auditoría (formulario) ========================================================= */ .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .next { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; } .next li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); } .next span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; font: 600 13px var(--sans); } .contact-mail { margin: 32px 0 0; color: var(--ink-2); } .contact-mail a { font-weight: 600; } .get { margin-top: 36px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); } .get b { display: block; font: 600 17px var(--display); margin-bottom: 10px; } .get ul { margin: 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 6px; font-size: 15px; } .form { display: grid; gap: 18px; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); } .form label small { font-weight: 400; color: var(--muted); } .form input:not([type="checkbox"]), .form select, .form textarea { font: 16px var(--sans); color: var(--ink); padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); transition: border-color .3s ease, background-color .3s ease; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); background: #fff; } .form textarea { min-height: 120px; resize: vertical; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form { position: relative; } .form .consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13px; color: var(--muted); } .form .consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .form .consent a, .form-msg a { color: var(--ink); text-decoration: underline; } .form-msg { margin: 0; font-size: 13px; color: var(--err-tx); } .form-msg:empty { display: none; } .booking { display: grid; gap: 10px; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); scroll-margin-top: calc(var(--navh) + 24px); } .booking .eyebrow { margin: 0; } .booking h3 { font-size: clamp(24px, 2.4vw, 32px); margin: 0; } .booking-lead { margin: 0 0 8px; color: var(--ink-2); } .booking-frame .btn { justify-self: start; } .booking-frame iframe { display: block; width: 100%; height: 720px; border: 0; border-radius: 16px; background: #fff; } .booking-frame:empty { display: none; } .form[hidden], .booking[hidden] { display: none; } .form fieldset { border: 0; margin: 0; padding: 0; } .form legend { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 10px; } .tchips { display: flex; flex-wrap: wrap; gap: 8px; } .tchips label { display: block; } .tchips input { position: absolute; opacity: 0; pointer-events: none; } .tchips span { display: inline-block; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 14px; cursor: pointer; background: #fff; transition: all .3s var(--ease); } .tchips input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); } .tchips input:focus-visible + span { outline: 2px solid var(--hl); outline-offset: 2px; } .f-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .f-foot small { max-width: 34ch; font-size: 13px; color: var(--muted); } .f-foot .btn { margin-left: auto; } /* Páginas legales */ .page-hero-sm { padding-bottom: clamp(40px, 5vw, 64px); } .page-hero-sm h1 { font-size: clamp(36px, 4.6vw, 64px); } .legal { max-width: 72ch; } .legal h2 { font-size: clamp(20px, 1.8vw, 24px); margin: 40px 0 12px; } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { color: var(--ink-2); } .legal ul { padding-left: 20px; display: grid; gap: 6px; } .legal a { color: var(--ink); text-decoration: underline; } mark.todo { background: #FDE68A; color: #3F2E00; padding: 0 .25em; border-radius: 4px; font-weight: 600; } /* ——— Pie ——— */ .footer { background: var(--metal-band); color: var(--ink-2); padding: clamp(64px, 8vw, 104px) 0 30px; overflow: hidden; border-top: 1px solid var(--line-2); } .foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; } .footer p { max-width: 34ch; margin: 18px 0 0; } .footer h4 { margin: 0 0 16px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer a { text-decoration: none; transition: color .3s ease; } .footer a:hover { color: var(--ink); } .foot-word { margin: clamp(56px, 8vw, 110px) 0 0; font: 700 clamp(40px, 12.6vw, 168px)/.8 var(--brand); letter-spacing: -.02em; text-align: center; white-space: nowrap; background: linear-gradient(180deg, #F7F8FA 0%, #AEB4BD 70%, #9AA1AB 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line-2); font-size: 13px; } .motion [data-reveal] { will-change: transform, opacity; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1100px) { .nav-links a { padding: 8px 11px; } .principles { grid-template-columns: 1fr 1fr; } .calc { grid-template-columns: 1fr 1fr; } .calc-copy { grid-column: 1 / -1; } } @media (max-width: 960px) { :root { --navh: 64px; } .paths { grid-template-columns: 1fr; } .path-op { padding: 0; } .impact { grid-template-columns: 1fr; } .proof { grid-template-columns: 1fr 1fr; } .proof div:nth-child(2) { border-right: 0; } .proof div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .dodont { grid-template-columns: 1fr; } .nav-links, .nav-cta { display: none; } .menu-btn { display: inline-flex; } .pains, .feat, .notwe { grid-template-columns: 1fr; } .mods { grid-template-columns: 1fr 1fr; } .cap { grid-template-columns: 1fr; } .cap-visual { font-size: calc((100vw - 64px) / 72); min-height: 44em; } .caps-head { flex-direction: column; align-items: flex-start; } .versus-inner, .case, .story, .faq, .contact-grid, .cta-inner { grid-template-columns: 1fr; } .case.flip { grid-template-columns: 1fr; } .case.flip .case-copy { order: 0; } .vs-visual { font-size: calc((100vw - 48px) / 66); justify-items: center; } .case-visual { font-size: calc((100vw - 96px) / 74); } .story-stage { display: none; } .motion .sstep { min-height: 0; opacity: 1; border-left-color: var(--ink); } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { body { font-size: 15px; } .proof { grid-template-columns: 1fr; } .proof div { border-right: 0; border-bottom: 1px solid var(--line); } .symptoms { padding: 18px; } .mods { grid-template-columns: 1fr; } .cap { padding: 22px; border-radius: 24px; } .cap-visual { font-size: calc((100vw - 48px) / 64); min-height: 46em; } .v-apps .pp-1 { margin-left: -27em; } .v-apps .pp-3 { margin-left: 8em; } .vs-steps { flex-direction: column; } .vs-list li { grid-template-columns: 1fr; gap: 2px; } .f-row, .calc, .calc-out { grid-template-columns: 1fr; } .hero-actions .btn { flex: 1 1 100%; } .case { padding: 22px; border-radius: 24px; } .case-visual { font-size: calc((100vw - 60px) / 78); } /* En el móvil solo la captura principal (o dos móviles), más grande */ .shots-stage { width: 900em; height: 640em; font-size: calc(100cqw / 900); } .shots .main { top: 20em; } .shots .side, .s-phones .cam-badge { display: none; } .s-phones .p1 { left: 20em; top: 60em; } .s-phones .p2 { left: 480em; top: 0; } .compare th, .compare td { padding: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Banner de cookies */ .cookie-box { position: fixed; left: 20px; bottom: 20px; z-index: 250; width: min(420px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 24px 60px -24px rgba(15, 18, 23, .45), 0 0 0 1px rgba(15, 18, 23, .03); font-size: 14px; color: var(--ink-2); animation: cookie-in .5s var(--ease) both; } @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } } .cookie-title { margin: 0; font: 600 16px var(--display); color: var(--ink); } .cookie-text { margin: 0; line-height: 1.5; } .cookie-text a { color: var(--ink); text-decoration: underline; } .cookie-prefs { display: grid; gap: 10px; padding: 12px 0 2px; border-top: 1px solid var(--line); } .cookie-prefs[hidden] { display: none; } .cookie-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; } .cookie-opt input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .cookie-opt b { display: block; color: var(--ink); font-weight: 600; } .cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cookie-btn { flex: 1 1 0; min-width: 110px; padding: 11px 16px; border: 1px solid var(--ink); border-radius: 99px; background: var(--ink); color: #fff; font: 600 14px var(--sans); cursor: pointer; } .cookie-btn[data-c="reject"] { background: transparent; color: var(--ink); } .cookie-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .cookie-link { flex-basis: 100%; padding: 4px 0 0; border: 0; background: none; color: var(--muted); font: 500 13px var(--sans); text-decoration: underline; cursor: pointer; text-align: left; } .cookie-link:hover { color: var(--ink); } @media (max-width: 640px) { .cookie-box { left: 16px; bottom: 16px; padding: 18px; } } .legal .cookie-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 14px; display: block; overflow-x: auto; } .legal .cookie-table th, .legal .cookie-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); } .legal .cookie-table th { color: var(--ink); font-weight: 600; background: var(--card-2); }