/* ══════════════════════════════════════════════════════════════════ FLOWENT v2 — SECCIONES ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ PALETA DE LOS SVG GENERADOS svg-clean remapea los colores de Recraft a var(--orn-1 … --orn-5), de más claro a más oscuro. Sin estas definiciones cada pieza cae a su color original y el set entero se descompone. Se declaran en :root para que valgan también dentro del shadow tree que crea cada . ══════════════════════════════════════════════════════════════ */ :root { --orn-1: var(--amber-300); --orn-2: var(--amber-400); --orn-3: var(--amber-500); --orn-4: var(--brand-500); --orn-5: var(--brand-700); } /* Los iconos en superficie apagada bajan un tono para no gritar */ .mock .mock__row svg, .step__ico { --orn-1: var(--ink-300); --orn-2: var(--ink-400); --orn-3: var(--ink-400); --orn-4: var(--ink-500); --orn-5: var(--ink-600); } .step.is-on .step__ico { --orn-1: var(--amber-300); --orn-2: var(--amber-400); --orn-3: var(--amber-500); --orn-4: var(--brand-500); --orn-5: var(--brand-700); } /* ══════════════════════════════════════════════════════════════ 0 · INTRO Cortina inicial: se dibuja una línea, colapsa en el logo, sube. ══════════════════════════════════════════════════════════════ */ .intro { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; background: var(--ink-950); overflow: hidden; } .intro[hidden] { display: none; } .intro__inner { display: grid; place-items: center; gap: var(--sp-8); width: min(420px, 76vw); } .intro__line { width: 100%; height: 1px; background: var(--grad-line); transform: scaleX(0); transform-origin: 50% 50%; } .intro__mark { width: 148px; opacity: 0; } .intro__mark img { width: 100%; height: auto; } .intro__count { position: absolute; right: var(--sp-gutter); bottom: var(--sp-gutter); font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.1em; color: var(--text-4); } .intro__skip { position: absolute; left: var(--sp-gutter); bottom: var(--sp-gutter); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-4); transition: color var(--dur-fast) var(--ease-out); } .intro__skip:hover { color: var(--text-2); } /* Las dos hojas de cortina que se retiran al terminar */ .intro__veil { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink-950); z-index: 2; } .intro__veil--t { top: 0; } .intro__veil--b { bottom: 0; } /* ══════════════════════════════════════════════════════════════ NAVEGACIÓN ══════════════════════════════════════════════════════════════ */ /* El fondo va en .nav, que ocupa todo el ancho de ventana. Estaba en .nav__bar, que vive dentro de .shell (máx. 1440 px): en pantallas más anchas se veía una banda más clara con los bordes cortados, flotando sobre el fondo oscuro. Un fondo de barra fija tiene que ir en el elemento que llega a los bordes, no en el que centra el contenido. */ .nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); border-bottom: 1px solid transparent; transition: transform var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } .nav.is-solid { background: color-mix(in srgb, var(--ink-950) 72%, transparent); backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: var(--line-1); } /* Se esconde al bajar, reaparece al subir — deja la página limpia */ .nav.is-tucked { transform: translateY(-110%); } .nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: var(--nav-h); } /* El shell de la nav va a ancho completo para que el fondo llegue a los bordes */ .nav .shell { max-width: var(--w-max); } /* El logotipo llegaba como PNG en base64 dentro de un envoltorio SVG: 660 KB para algo que se dibuja a 34 px de alto. Ahora es WebP con respaldo PNG y variante @2x — 8 KB. Mismo píxel en pantalla, 80 veces menos peso. */ .logo-pic { display: block; } .logo-pic img { display: block; width: auto; } .nav__logo { display: block; flex-shrink: 0; } .nav__logo img { height: 34px; } .nav__menu { display: flex; align-items: center; gap: var(--sp-1); } .nav__link { position: relative; display: block; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small); font-weight: 500; color: var(--text-3); transition: color var(--dur-fast) var(--ease-out); } .nav__link:hover, .nav__link.is-active { color: var(--text-1); } /* Subrayado que crece desde el centro */ .nav__link::after { content: ''; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 50%; transition: transform var(--dur-base) var(--ease-out-expo); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__side { display: flex; align-items: center; gap: var(--sp-3); } .lang { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-1); border-radius: var(--r-full); } .lang__opt { padding: 0.3125rem 0.625rem; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; color: var(--text-4); border-radius: var(--r-full); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } /* aria-current en lugar de aria-pressed: ahora son enlaces a la otra versión del sitio, y aria-pressed solo tiene sentido en botones. */ .lang__opt[aria-current] { color: var(--ink-950); background: var(--text-1); } .lang__opt:not([aria-current]):hover { color: var(--text-2); } .burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r-full); color: var(--text-2); } .burger__box { position: relative; width: 16px; height: 10px; } .burger__box span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out); } .burger__box span:nth-child(1) { top: 0; } .burger__box span:nth-child(2) { top: 50%; margin-top: -0.75px; } .burger__box span:nth-child(3) { bottom: 0; } .burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); } .burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-4.25px) rotate(-45deg); } /* Panel móvil a pantalla completa */ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; justify-content: center; padding: var(--nav-h) var(--sp-gutter) var(--sp-10); background: color-mix(in srgb, var(--ink-950) 96%, transparent); backdrop-filter: blur(24px); clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-slow) var(--ease-out-expo); pointer-events: none; } .drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; } .drawer__list { display: flex; flex-direction: column; gap: var(--sp-2); } .drawer__link { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-h2); color: var(--text-1); border-bottom: 1px solid var(--line-1); opacity: 0; transform: translateY(18px); transition: opacity var(--dur-base) var(--ease-out) var(--d, 0ms), transform var(--dur-base) var(--ease-out-expo) var(--d, 0ms); } .drawer.is-open .drawer__link { opacity: 1; transform: none; } .drawer__link i { font-family: var(--font-mono); font-size: var(--fs-tiny); font-style: normal; color: var(--cyan-500); } .drawer__foot { margin-top: var(--sp-10); display: grid; gap: var(--sp-4); } /* ══════════════════════════════════════════════════════════════ 1 · HERO ══════════════════════════════════════════════════════════════ */ /* Columna flexible en lugar de barra posicionada en absoluto. La versión anterior reservaba 64 px de padding para una barra que mide 95, así que los datos se comían el pie del bloque de texto — y en pantallas bajas, más. Con `flex-direction: column` la barra ocupa lo que necesita y el contenido se centra en lo que queda: imposible que se pisen. */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + var(--sp-8)); overflow: hidden; } .hero > .shell { flex: 1 1 auto; display: flex; align-items: center; padding-block: var(--sp-8); } /* Rejilla técnica de fondo, por debajo del lienzo */ .hero__grid { position: absolute; inset: 0; z-index: var(--z-behind); background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(100% 80% at 50% 35%, #000 5%, transparent 72%); } .hero__halo { position: absolute; z-index: var(--z-behind); border-radius: 50%; pointer-events: none; filter: blur(20px); } .hero__halo--a { width: min(760px, 90vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(37,99,235,0.16), transparent 66%); top: -22%; left: -14%; } .hero__halo--b { width: min(560px, 74vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(6,196,214,0.13), transparent 66%); bottom: -18%; right: -6%; } /* El shell del hero es un contenedor flex, así que este hijo se encogía a su contenido —605 px de los 1084 disponibles— y cualquier porcentaje de ancho se calculaba sobre esa medida encogida. De ahí que el titular se partiera en cuatro líneas dentro de una columna de 351 px. */ .hero__inner { position: relative; z-index: var(--z-raised); width: 100%; } .hero__flag { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); margin-bottom: var(--sp-8); border: 1px solid var(--line-1); border-radius: var(--r-full); background: rgba(255,255,255,0.02); backdrop-filter: blur(10px); font-size: var(--fs-tiny); color: var(--text-3); } /* El guion del primer dato del hero pasa al acento */ .fact:first-child::before { background: var(--accent) !important; } .hero__flag b { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.25rem 0.625rem; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-300); background: var(--accent-soft); border-radius: var(--r-full); } .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--signal-ok); box-shadow: 0 0 0 0 rgba(16,185,129,0.55); animation: pip 2.4s var(--ease-out) infinite; } @keyframes pip { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } /* Cuerpo propio, no --fs-display. Con el techo de 9rem la línea más larga medía 958 px dentro de una columna de 672: se partía en dos en TODOS los anchos. Y al partirse, el interlineado de 0,94 hacía que las líneas resultantes se pisaran y que la máscara de revelado cortara la "p" de "operación". Dos síntomas, una causa. El techo de 5,5rem deja 86 px de holgura en el ancho más exigente. El interlineado sube a 1,04: por debajo de 1, un descendente de una línea entra en la caja de la siguiente, y con dos líneas apiladas eso se ve siempre. */ .hero__title { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.5rem); line-height: 1.04; margin-bottom: var(--sp-6); } .hero__sub { margin-bottom: var(--sp-10); max-width: 46ch; } .hero__acts { display: flex; flex-wrap: wrap; gap: var(--sp-4); } /* Barra inferior de datos. Va en el flujo, no flotando encima. */ .hero__rail { position: relative; flex: 0 0 auto; z-index: var(--z-raised); border-top: 1px solid var(--line-1); background: linear-gradient(to top, rgba(5,9,15,0.6), transparent); backdrop-filter: blur(6px); } .hero__rail-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); padding-block: var(--sp-5); } .hero__facts { display: flex; gap: clamp(1.5rem, 4vw, 4rem); } .fact { position: relative; padding-left: var(--sp-4); } /* Guion vertical que ancla cada dato al raíl: sin él los tres números flotan sueltos sobre el borde de la sección. */ .fact::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: var(--line-2); } .fact:first-child::before { background: var(--grad-brand); } .fact__v { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--ls-h3); color: var(--text-1); } .fact__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); margin-top: 2px; } .hero__cue { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-4); } .hero__cue span { position: relative; display: block; width: 1px; height: 26px; background: var(--line-2); overflow: hidden; } .hero__cue span::after { content: ''; position: absolute; inset: 0; background: var(--cyan-400); animation: cue 2s var(--ease-in-out) infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ══════════════════════════════════════════════════════════════ 2 · DECLARACIÓN Frase revelada palabra a palabra durante el scroll. ══════════════════════════════════════════════════════════════ */ .stmt { position: relative; background: var(--bg-deep); overflow: hidden; } /* Textura generada de fondo. Si el archivo aún no existe, el navegador simplemente no pinta nada y la sección se ve igual de bien. */ .stmt::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('../assets/img/texture-flow.jpg'); background-image: image-set( url('../assets/img/texture-flow.avif') type('image/avif'), url('../assets/img/texture-flow.jpg') type('image/jpeg')); background-size: cover; background-position: center; opacity: 0.13; mask-image: radial-gradient(100% 70% at 50% 50%, #000 10%, transparent 72%); } .stmt__pin { position: relative; z-index: 2; min-height: 100svh; display: grid; place-items: center; padding-block: var(--sp-16); } .stmt__text { font-size: clamp(1.5rem, 0.9rem + 2.9vw, 3.25rem); font-weight: 500; line-height: 1.28; letter-spacing: var(--ls-h2); text-align: center; max-width: 22ch; text-wrap: balance; } /* Cada palabra empieza apagada y se enciende al pasar el scroll */ .stmt__text .w { color: var(--ink-600); transition: color 0.18s linear; } .stmt__text .w.on { color: var(--text-1); } .stmt__text .w.hi.on { color: var(--amber-400); } .stmt__foot { margin-top: var(--sp-12); display: flex; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════ 3 · STACK — tecnologías con las que trabajamos ══════════════════════════════════════════════════════════════ */ .stack { padding-block: var(--sp-16); overflow: hidden; } .stack__label { text-align: center; margin-bottom: var(--sp-10); } .marquee { position: relative; display: grid; gap: var(--sp-5); } .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(48px, 12vw, 160px); z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .marquee__row { display: flex; overflow: hidden; } .marquee__set { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); padding-right: clamp(2rem, 5vw, 4.5rem); flex-shrink: 0; animation: slide var(--speed, 46s) linear infinite; will-change: transform; } .marquee__row--rev .marquee__set { animation-direction: reverse; } .marquee:hover .marquee__set { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-100%); } } .tech { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-500); white-space: nowrap; transition: color var(--dur-base) var(--ease-out); } .tech::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; } .tech:hover { color: var(--text-2); } /* ══════════════════════════════════════════════════════════════ 4 · SERVICIOS — scroll horizontal fijado ══════════════════════════════════════════════════════════════ */ .svc { position: relative; background: var(--bg-deep); } .svc__pin { height: 100svh; display: flex; flex-direction: column; overflow: hidden; } .svc__head { flex-shrink: 0; padding-block: var(--sp-10) var(--sp-6); } .svc__head-in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; } .svc__title { max-width: 16ch; } .svc__viewport { flex: 1; min-height: 0; display: flex; align-items: center; } .svc__track { display: flex; align-items: stretch; gap: var(--sp-5); padding-inline: var(--sp-gutter); will-change: transform; } /* Tarjeta más estrecha a propósito. Con 430 px el recorrido horizontal era de 1.858 px a 1440 de ancho — dos pantallas y media con la página aparentemente congelada, que es lo que hace que el efecto se lea como avería en vez de como recurso. A 355 se ven cuatro tarjetas a la vez, se entiende de un vistazo que hay una galería, y el recorrido baja a metro y medio de pantalla. */ .card-svc { flex: 0 0 auto; width: min(355px, 78vw); display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem); background: linear-gradient(165deg, var(--ink-800), var(--ink-850) 62%); border: 1px solid var(--line-1); border-radius: var(--r-xl); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card-svc:hover { border-color: var(--line-2); } .card-svc__no { font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.14em; color: var(--text-4); margin-bottom: var(--sp-10); } .card-svc__ico { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--sp-6); border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(255,255,255,0.02); color: var(--ink-300); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card-svc__ico svg, .card-svc__ico img { width: 26px; height: 26px; } .card-svc:hover .card-svc__ico { color: var(--amber-400); border-color: var(--accent-line); box-shadow: var(--glow-amber); } .card-svc__title { margin-bottom: var(--sp-4); } .card-svc__desc { font-size: var(--fs-small); color: var(--text-3); line-height: 1.7; } /* El modelo de negocio, en la tarjeta de cada servicio. Es la diferencia con una consultora al uso —no se entrega y se acaba, se implanta y se mantiene— así que va en cada servicio y no escondido en una sección aparte que la mitad de la gente no llega a leer. */ .card-svc__model { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-8); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-4); } .card-svc__model i { font-style: normal; color: var(--amber-500); font-weight: 600; } .card-svc__model span:last-of-type { color: var(--amber-300); } .card-svc__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-4); } /* Barra de progreso del recorrido horizontal */ .svc__prog { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-6) var(--sp-10); } .svc__prog-bar { flex: 1; height: 1px; background: var(--line-1); position: relative; } .svc__prog-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); transition: width 0.1s linear; } .svc__prog-no { font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.1em; color: var(--text-4); } /* ══════════════════════════════════════════════════════════════ 5 · MÉTODO — la columna vertebral ══════════════════════════════════════════════════════════════ */ .method { position: relative; overflow: hidden; } .method__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-block); } .spine { position: relative; padding-left: clamp(2.5rem, 6vw, 5.5rem); } /* Raíl estático + trazo que se dibuja encima */ .spine__rail { position: absolute; top: 0; bottom: 0; left: clamp(0.9375rem, 2.4vw, 1.75rem); width: 1px; background: var(--line-1); } .spine__draw { position: absolute; inset: 0 auto 0 0; left: clamp(0.9375rem, 2.4vw, 1.75rem); width: 1px; transform-origin: 50% 0; background: linear-gradient(to bottom, var(--brand-500), var(--amber-500)); transform: scaleY(var(--draw, 0)); box-shadow: 0 0 12px rgba(232,163,61,0.45); } .step { position: relative; padding-block: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); align-items: center; } .step:first-child { padding-top: 0; } .step:last-child { padding-bottom: 0; } .step__dot { position: absolute; top: clamp(2.5rem, 5vw, 4.5rem); left: calc(clamp(2.5rem, 6vw, 5.5rem) * -1 + clamp(0.9375rem, 2.4vw, 1.75rem) - 5px); width: 11px; height: 11px; border-radius: 50%; background: var(--ink-700); border: 1px solid var(--line-2); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .step:first-child .step__dot { top: 0; } .step.is-on .step__dot { background: var(--amber-500); border-color: var(--amber-500); box-shadow: 0 0 0 5px rgba(232,163,61,0.15), 0 0 22px rgba(232,163,61,0.55); transform: scale(1.15); } .step__no { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin-bottom: var(--sp-4); transition: color var(--dur-base) var(--ease-out); } .step__ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-500); transition: color var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring); } .step.is-on .step__ico { color: var(--amber-400); transform: scale(1.12); } .step.is-on .step__no { color: var(--amber-400); } .step__title { margin-bottom: var(--sp-4); } .step__desc { font-size: var(--fs-body); color: var(--text-3); max-width: 46ch; } /* Micro-maqueta de UI que acompaña a cada paso */ .mock { background: linear-gradient(165deg, var(--ink-800), var(--ink-850)); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-3); opacity: 0.55; transition: opacity var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out-expo); transform: translateY(14px); } .step.is-on .mock { opacity: 1; transform: none; border-color: var(--line-2); } .mock__bar { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line-1); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4); } .mock__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500); } .mock__bar i:nth-child(2) { background: var(--ink-600); } .mock__bar i:nth-child(3) { background: var(--ink-600); margin-right: var(--sp-2); } .mock__rows { display: grid; gap: var(--sp-3); } .mock__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: rgba(255,255,255,0.018); border: 1px solid var(--line-1); border-radius: var(--r-sm); font-size: var(--fs-tiny); color: var(--text-3); } .mock__row b { margin-left: auto; font-family: var(--font-mono); font-weight: 500; color: var(--text-4); } .mock__row--ok { border-color: rgba(16,185,129,0.22); } .mock__row--ok b { color: var(--signal-ok); } .mock__meter { height: 3px; border-radius: 2px; background: var(--ink-700); overflow: hidden; } .mock__meter i { display: block; height: 100%; width: 0; background: var(--grad-brand); border-radius: inherit; transition: width 1.4s var(--ease-out-expo) 0.2s; } .step.is-on .mock__meter i { width: var(--v, 60%); } .mock__flow { display: flex; align-items: center; gap: var(--sp-2); } .mock__node { flex: 1; padding: var(--sp-3) var(--sp-2); text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--text-4); border: 1px solid var(--line-1); border-radius: var(--r-xs); background: rgba(255,255,255,0.018); } .mock__link { width: 14px; height: 1px; background: var(--line-2); flex-shrink: 0; } .step.is-on .mock__link { background: var(--amber-500); } /* ══════════════════════════════════════════════════════════════ 6 · IMPACTO ══════════════════════════════════════════════════════════════ */ .impact { background: var(--bg-deep); position: relative; overflow: hidden; } .impact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 100%, rgba(37,99,235,0.10), transparent 70%); pointer-events: none; } .impact::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('../assets/img/texture-mesh.jpg'); background-image: image-set( url('../assets/img/texture-mesh.avif') type('image/avif'), url('../assets/img/texture-mesh.jpg') type('image/jpeg')); background-size: cover; background-position: center; opacity: 0.09; mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent); } .impact__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-xl); overflow: hidden; } .stat { padding: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 3rem); background: var(--bg-deep); transition: background-color var(--dur-slow) var(--ease-out); } .stat:hover { background: var(--ink-900); } /* El tamaño anterior (hasta 6,5rem) hacía que "−80%" ocupara 260 px dentro de una celda de 184: los números se salían de su columna en todos los anchos. Este techo los mantiene dentro incluso en la celda más estrecha. */ .stat__v { display: block; font-size: clamp(2.25rem, 1rem + 3.2vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: var(--ls-h1); color: var(--text-1); margin-bottom: var(--sp-4); white-space: nowrap; } /* El símbolo a tamaño completo pesa tanto como una cifra y descuadra la lectura: en composición se pone menor y alineado arriba. */ .stat__v em { font-style: normal; font-size: 0.55em; vertical-align: 0.32em; margin-left: 0.04em; color: var(--amber-400); letter-spacing: 0; } .stat__k { font-size: var(--fs-small); color: var(--text-3); max-width: 24ch; } /* ══════════════════════════════════════════════════════════════ 7 · CASOS — pila adherente ══════════════════════════════════════════════════════════════ */ .cases { position: relative; } .cases__stack { display: grid; gap: var(--sp-8); } .case { position: sticky; top: calc(var(--nav-h) + clamp(1rem, 3vw, 3rem)); display: grid; grid-template-columns: minmax(0, 1fr); min-height: clamp(380px, 52vw, 480px); background: var(--ink-800); border: 1px solid var(--line-2); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-4); transform-origin: 50% 0; will-change: transform; } /* Escalonado: cada tarjeta se ancla un poco más abajo que la anterior */ .case:nth-child(1) { --i: 0; } .case:nth-child(2) { --i: 1; } .case:nth-child(3) { --i: 2; } .case { top: calc(var(--nav-h) + clamp(1rem, 3vw, 3rem) + var(--i) * clamp(14px, 2vw, 26px)); } .case__media { position: relative; min-height: 200px; overflow: hidden; background: var(--ink-850); } /* Mientras la fotografía no exista, el hueco se rellena con una textura de marca en lugar de mostrar un icono roto. */ .case__media.is-empty { background: radial-gradient(120% 90% at 20% 10%, rgba(37,99,235,0.22), transparent 60%), radial-gradient(90% 80% at 85% 90%, rgba(6,196,214,0.16), transparent 60%), linear-gradient(160deg, var(--ink-800), var(--ink-950)); } .case__media.is-empty::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 75%); } /* DUOTONO Las trece fotografías eran azul oscuro de banco de imágenes: coherentes, pero exactamente el aspecto que se quería evitar. Forzándolas a monocromo y tiñéndolas con `mix-blend-mode: color` entran dentro del sistema de color en lugar de ir por libre, y se leen como decisión editorial. Se hace en CSS sobre los archivos que ya existen: coste cero y reversible cambiando dos líneas. */ .case__shot, .sectors__shot { position: relative; display: block; } .case__shot { width: 100%; height: 100%; } .case__shot img, .sectors__shot img { filter: grayscale(1) contrast(1.18) brightness(0.92); } .case__shot::after, .sectors__shot::after { content: ''; position: absolute; inset: 0; z-index: 1; mix-blend-mode: color; pointer-events: none; background: linear-gradient(158deg, var(--brand-700) 10%, var(--cyan-600) 110%); } .case__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.68; transform: scale(1.04); transition: transform var(--dur-slower) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out); } .case:hover .case__media img { transform: scale(1.09); opacity: 0.8; } .case__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink-800) 2%, transparent 55%), linear-gradient(to right, rgba(5,9,15,0.5), transparent 60%); } /* Marca de agua tipográfica sobre la imagen */ .case__mark { position: absolute; left: var(--sp-6); bottom: var(--sp-5); z-index: 3; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-3); } .case__body { display: flex; flex-direction: column; padding: clamp(1.75rem, 3.4vw, 3rem); } .case__tag { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--amber-400); margin-bottom: var(--sp-5); } .case__title { margin-bottom: var(--sp-4); max-width: 20ch; } .case__desc { font-size: var(--fs-small); color: var(--text-3); line-height: 1.72; max-width: 48ch; } .case__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-8); border-top: 1px solid var(--line-1); } .res__v { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-h3); color: var(--text-1); } .res__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4); margin-top: 4px; } /* ══════════════════════════════════════════════════════════════ 8 · SECTORES — rejilla con fondo revelado ══════════════════════════════════════════════════════════════ */ .sectors { position: relative; background: var(--bg-deep); overflow: hidden; } /* Capa de imágenes: solo una visible a la vez */ .sectors__bg { position: absolute; inset: 0; z-index: 0; } .sectors__shot { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.06); transition: opacity var(--dur-slow) var(--ease-out), transform 1.6s var(--ease-out-expo); } .sectors__shot img { width: 100%; height: 100%; object-fit: cover; } .sectors__shot.is-on { opacity: 0.20; transform: scale(1); } .sectors__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, transparent, var(--bg-deep) 88%); } .sectors__in { position: relative; z-index: 2; } .sectors__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-1); border-block: 1px solid var(--line-1); } .sector { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-2); min-height: clamp(140px, 17vw, 210px); padding: clamp(1.125rem, 2.2vw, 2rem); background: color-mix(in srgb, var(--bg-deep) 82%, transparent); backdrop-filter: blur(2px); transition: background-color var(--dur-base) var(--ease-out); overflow: hidden; } .sector:hover { background: color-mix(in srgb, var(--bg-deep) 40%, transparent); } .sector__no { position: absolute; top: clamp(1.125rem, 2.2vw, 2rem); right: clamp(1.125rem, 2.2vw, 2rem); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--text-4); } .sector__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--ls-h3); color: var(--text-2); transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out-expo); } .sector:hover .sector__name { color: var(--text-1); transform: translateX(6px); } .sector__desc { font-size: var(--fs-tiny); color: var(--text-4); max-width: 30ch; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out-expo); } .sector:hover .sector__desc { opacity: 1; transform: none; } /* Filo superior que se enciende */ .sector::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-slow) var(--ease-out-expo); } .sector:hover::before { transform: scaleX(1); } /* ══════════════════════════════════════════════════════════════ 9 · CONTACTO ══════════════════════════════════════════════════════════════ */ .contact { position: relative; overflow: hidden; } .contact::before { content: ''; position: absolute; z-index: 0; width: min(900px, 120vw); aspect-ratio: 1; left: 50%; top: 40%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(37,99,235,0.11), transparent 65%); pointer-events: none; } .contact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-block); } .contact__info { display: grid; gap: var(--sp-4); margin-top: var(--sp-10); } .info { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); color: var(--text-2); } .info__ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line-1); border-radius: var(--r-sm); color: var(--text-3); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .info__ico svg { width: 16px; height: 16px; } a.info:hover .info__ico { color: var(--amber-400); border-color: var(--accent-line); } /* ─── Formulario ─────────────────────────────────────────────── */ .form { padding: clamp(1.5rem, 3vw, 2.75rem); background: linear-gradient(165deg, var(--ink-800), var(--ink-850) 70%); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-4); } .form__title { margin-bottom: var(--sp-8); } .form__rows { display: grid; gap: var(--sp-5); } .form__pair { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sp-5); } /* Campo con etiqueta flotante. El truco es `placeholder=" "`: `:placeholder-shown` sirve de proxy de "está vacío" sin JS. */ .field { position: relative; } .field__input { width: 100%; padding: 1.375rem 1rem 0.625rem; font-size: var(--fs-small); color: var(--text-1); background: rgba(255,255,255,0.022); border: 1px solid var(--line-1); border-radius: var(--r-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } textarea.field__input { min-height: 118px; resize: vertical; } select.field__input { appearance: none; padding-right: 2.5rem; } .field__input::placeholder { color: transparent; } .field__label { position: absolute; left: 1rem; top: 0.9375rem; font-size: var(--fs-small); color: var(--text-4); pointer-events: none; transform-origin: 0 0; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label { transform: translateY(-9px) scale(0.78); } /* `:placeholder-shown` no aplica a