/* * Capa visual de la WEB PÚBLICA (`app/templates/web/**`). * * Qué es y qué NO es * ------------------ * Preline Pro + `tailwind.compiled.css` resuelven el 90 % del layout de * la home (grids, tipografía, botones, accordion, tablas). Este fichero * añade sólo lo que una utilidad de Tailwind no puede expresar: el mesh * animado del hero, la rejilla técnica, el ruido, los glows, el marco de * navegador de los mockups, el marquee y los estados iniciales de los * reveals. * * Cascada * ------- * Se carga en `{% block head_extra %}`, es decir DESPUÉS de * `components.css` y sin `@layer`. Las reglas unlayered ganan a todo lo * que vive en `@layer utilities`, así que estas clases pisan a Tailwind * y a Preline Pro sin necesidad de `!important`. Corolario: nada de * selectores genéricos (`div`, `p`, `.card`) aquí — todo va prefijado * con `web-` o colgado de `[data-*]`. * * Color * ----- * El acento de marca es la rampa `--agent-1..5` de `shared/tokens.css` * (OKLCH), NO el azul de Preline. Se mezclan con `color-mix(in oklch,…)` * para poder derivar alphas sin duplicar la definición del color. * * CSP * --- * Cero `style=""` en las plantillas: todo lo dinámico se parametriza con * data-attributes o con custom properties declaradas aquí. * * Movimiento * ---------- * `web-motion.js` marca `` ANTES de animar. Si * el JS o GSAP no cargan, la clase no aparece y el contenido queda * visible: los estados iniciales de `[data-animate]` están scoped a * `.motion-ready`. Con `prefers-reduced-motion: reduce` se neutralizan * aquí además de en el JS (cinturón y tirantes). */ /* ------------------------------------------------------------------ * * 1. Tokens locales de la web pública * ------------------------------------------------------------------ */ /* * ¿Por qué el decorado se parametriza y no se escribe dos veces? * * El diseño nació DARK-FIRST y el oscuro está validado: no se toca. El * claro, en cambio, no es "el oscuro con menos opacidad" — eso es lo que * lo dejaba lavado. Las luces de la aurora, la rejilla, el ruido y el * halo se declaran como tokens (`--web-mesh-1..4`, `--web-mesh-warm`, * `--web-grid-line`, `--web-noise-blend`, `--web-glow-1/2`) y cada tema * les da su valor. Las reglas que los consumen (§3 y §4) son una sola y * no ramifican por tema. * * La rampa `--agent-*` está calibrada para LEERSE SOBRE NEGRO: son * colores claros (L 0.65–0.80). Difuminados a 72 px sobre blanco se * vuelven pastel y el hero parece descolorido. En claro las luces tiran * de una rampa propia con la misma tonalidad y la luminosidad bajada * (L 0.60–0.78) y CHROMA ALTO, más una base cálida (`--web-mesh-warm`) * que quita el blanco clínico del fondo. En oscuro esa base es * `transparent`: el gradiente se declara igual y no pinta nada. */ .web-page { --web-mesh-opacity: 0.46; --web-grid-opacity: 0.7; --web-noise-opacity: 0.05; --web-noise-blend: multiply; --web-glow-opacity: 0.34; --web-hairline: color-mix(in oklch, var(--foreground) 12%, transparent); --web-hairline-soft: color-mix(in oklch, var(--foreground) 7%, transparent); /* La rejilla tiene su propia línea (y no `--web-hairline-soft`) porque en claro necesita más peso para leerse sobre la aurora, y ese mismo valor en los bordes de las tarjetas los ensuciaría. */ --web-grid-line: color-mix(in oklch, var(--foreground) 14%, transparent); --web-glass: color-mix(in oklch, var(--card) 72%, transparent); --web-glass-line: color-mix(in oklch, var(--foreground) 10%, transparent); --web-mesh-1: color-mix(in oklch, oklch(0.63 0.2 296) 76%, transparent); --web-mesh-2: color-mix(in oklch, oklch(0.61 0.19 248) 70%, transparent); --web-mesh-3: color-mix(in oklch, oklch(0.71 0.15 172) 58%, transparent); --web-mesh-4: color-mix(in oklch, oklch(0.78 0.15 62) 52%, transparent); --web-mesh-warm: color-mix(in oklch, oklch(0.955 0.038 74) 92%, transparent); --web-glow-1: color-mix(in oklch, oklch(0.62 0.19 250) 46%, transparent); --web-glow-2: color-mix(in oklch, oklch(0.63 0.2 296) 28%, transparent); /* Degradado del titular. Mismas tonalidades que en oscuro, con la luminosidad bajada hasta que los cuatro tramos pasan AA (≥4.5:1) sobre la aurora clara — no sólo el 3:1 de texto grande. */ --web-shine-1: oklch(0.5 0.23 296); --web-shine-2: oklch(0.48 0.22 258); --web-shine-3: oklch(0.5 0.13 172); --web-shine-4: oklch(0.52 0.16 55); } .dark .web-page, html[data-theme="system"] .web-page { --web-mesh-opacity: 0.55; --web-grid-opacity: 0.65; --web-noise-opacity: 0.06; --web-noise-blend: overlay; --web-glow-opacity: 0.75; --web-hairline: color-mix(in oklch, var(--foreground) 14%, transparent); --web-hairline-soft: color-mix(in oklch, var(--foreground) 8%, transparent); --web-grid-line: color-mix(in oklch, var(--foreground) 8%, transparent); --web-glass: color-mix(in oklch, var(--card) 62%, transparent); --web-glass-line: color-mix(in oklch, var(--foreground) 12%, transparent); --web-mesh-1: color-mix(in oklch, var(--agent-3) 85%, transparent); --web-mesh-2: color-mix(in oklch, var(--agent-5) 80%, transparent); --web-mesh-3: color-mix(in oklch, var(--agent-4) 70%, transparent); --web-mesh-4: color-mix(in oklch, var(--agent-1) 62%, transparent); --web-mesh-warm: transparent; --web-glow-1: color-mix(in oklch, var(--agent-5) 55%, transparent); --web-glow-2: color-mix(in oklch, var(--agent-3) 32%, transparent); --web-shine-1: var(--agent-3); --web-shine-2: var(--agent-5); --web-shine-3: var(--agent-4); --web-shine-4: var(--agent-1); } /* SO en claro con el selector en «sistema»: el mismo claro de arriba. Se repite porque el bloque oscuro gana por `html[data-theme="system"]` y hay que devolver TODOS los tokens que ese bloque pisa. */ @media (prefers-color-scheme: light) { html[data-theme="system"] .web-page { --web-mesh-opacity: 0.46; --web-grid-opacity: 0.7; --web-noise-opacity: 0.05; --web-noise-blend: multiply; --web-glow-opacity: 0.34; --web-hairline: color-mix(in oklch, var(--foreground) 12%, transparent); --web-hairline-soft: color-mix(in oklch, var(--foreground) 7%, transparent); --web-grid-line: color-mix(in oklch, var(--foreground) 14%, transparent); --web-glass: color-mix(in oklch, var(--card) 72%, transparent); --web-glass-line: color-mix(in oklch, var(--foreground) 10%, transparent); --web-mesh-1: color-mix(in oklch, oklch(0.63 0.2 296) 76%, transparent); --web-mesh-2: color-mix(in oklch, oklch(0.61 0.19 248) 70%, transparent); --web-mesh-3: color-mix(in oklch, oklch(0.71 0.15 172) 58%, transparent); --web-mesh-4: color-mix(in oklch, oklch(0.78 0.15 62) 52%, transparent); --web-mesh-warm: color-mix(in oklch, oklch(0.955 0.038 74) 92%, transparent); --web-glow-1: color-mix(in oklch, oklch(0.62 0.19 250) 46%, transparent); --web-glow-2: color-mix(in oklch, oklch(0.63 0.2 296) 28%, transparent); --web-shine-1: oklch(0.5 0.23 296); --web-shine-2: oklch(0.48 0.22 258); --web-shine-3: oklch(0.5 0.13 172); --web-shine-4: oklch(0.52 0.16 55); } } /* ------------------------------------------------------------------ * * 1 bis. NAVBAR pública * * Vive aquí y no en utilidades de Tailwind por tres motivos concretos: * el fondo glass con fallback, el subrayado animado del enlace activo y * el panel móvil a pantalla completa. Los tres necesitan reglas que no * se pueden escribir como clases sueltas sin inventarse utilidades. * * Como este fichero lo carga `layouts/public.twig` (no sólo la home), la * navbar se ve igual en las 9 páginas. * ------------------------------------------------------------------ */ .web-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background-color: var(--background); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .web-nav { background-color: color-mix(in oklch, var(--background) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); } } /* El borde y la sombra sólo aparecen cuando hay contenido por debajo: arriba del todo la navbar debe fundirse con el hero. Lo marca `web-nav.js`; sin JS queda siempre en el estado "arriba", que es el que no rompe nada. */ .web-nav[data-scrolled="true"] { border-bottom-color: var(--web-hairline-soft); box-shadow: var(--shadow-sm); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .web-nav[data-scrolled="true"] { background-color: color-mix(in oklch, var(--background) 86%, transparent); } } /* * ANCHO COMPLETO, no la caja de 80rem del contenido. * * La navbar se alineaba con `max-w-7xl` como el resto de las secciones y * el resultado era un logo flotando a medio camino del borde en cuanto * la pantalla pasaba de 1280 px. Aquí interesa lo contrario que en una * sección de texto: los extremos anclados al borde dejan el centro * libre, y el centro es el menú de contenidos. */ .web-nav__inner { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.625rem 1rem; min-height: 3.75rem; } @media (min-width: 640px) { .web-nav__inner { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .web-nav__inner { padding-inline: 2rem; } } /* En pantallas muy anchas el borde queda lejísimos: un poco más de aire para que el logo no parezca pegado al bisel. */ @media (min-width: 1536px) { .web-nav__inner { padding-inline: 2.5rem; } } .web-nav__logo { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-md); } .web-nav__logo img { height: 1.75rem; width: auto; } /* Navegación central: sólo a partir de `lg`. Debajo va al panel. */ .web-nav__center { display: none; } /* * CENTRADO DE VERDAD, no «en el hueco que sobra». * * Con `margin-inline: auto` el menú se centraba entre el logo y las * acciones, y como las acciones pesan mucho más que el logo (buscador + * idioma + tema + acceso + CTA) el resultado caía a la izquierda del * centro óptico. Repartiendo los dos laterales con `flex: 1 1 0` las * dos columnas valen lo mismo, así que el menú queda en el eje de la * pantalla. * * `1 1 0` y no `1 1 auto`: la base cero es lo que iguala las columnas * pase lo que pase con su contenido. Y como `min-width` sigue siendo * `auto`, si las acciones no caben en su mitad NO se aplastan — empujan, * y el menú se desplaza un poco. Degradación aceptable y preferible a * que un CTA se parta en dos líneas. */ @media (min-width: 1024px) { .web-nav__center { display: flex; align-items: center; justify-content: center; gap: 0.125rem; flex: 0 0 auto; } .web-nav__logo { flex: 1 1 0; justify-content: flex-start; } } .web-nav__actions { display: flex; align-items: center; gap: 0.375rem; margin-inline-start: auto; } @media (min-width: 1024px) { .web-nav__actions { margin-inline-start: 0; flex: 1 1 0; justify-content: flex-end; } } /* * Enlace de navegación. El subrayado es un pseudo-elemento que escala * desde el borde de inicio: con `border-bottom` habría que reservar el * espacio siempre y el texto bailaría 2 px al pasar el ratón. */ .web-nav__link { position: relative; display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.5rem 0.6875rem; border-radius: var(--radius-md); border: 0; background: transparent; font-size: 0.875rem; font-weight: 450; color: var(--foreground-body); cursor: pointer; white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); } .web-nav__link:hover, .web-nav__link:focus-visible { color: var(--foreground); background-color: color-mix(in oklch, var(--foreground) 5%, transparent); } .web-nav__link::after { content: ""; position: absolute; inset-inline: 0.6875rem; bottom: 0.25rem; height: 1.5px; border-radius: var(--radius-full); background-image: linear-gradient(to right, var(--agent-3), var(--agent-5)); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-base) var(--ease-emphasized); } .web-nav__link:hover::after, .web-nav__link[aria-current="page"]::after, .web-nav__link[aria-expanded="true"]::after { transform: scaleX(1); } .web-nav__link[aria-current="page"] { color: var(--foreground); } .web-nav__caret { transition: transform var(--duration-base) var(--ease-standard); } .web-nav__link[aria-expanded="true"] .web-nav__caret { transform: rotate(180deg); } /* Selector de idioma: dos letras, deliberadamente discreto. */ .web-nav__lang { display: inline-flex; align-items: center; height: 2rem; padding-inline: 0.5rem; border-radius: calc(var(--radius) - 0.45rem); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--foreground-muted-soft); transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); } .web-nav__lang:hover { color: var(--foreground); background-color: var(--muted); } /* «Iniciar sesión»: ghost, y sólo en escritorio (en móvil está en el panel, donde hay sitio de sobra). */ .web-nav__signin { display: none; } @media (min-width: 1024px) { .web-nav__signin { display: inline-flex; align-items: center; padding: 0.4375rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; /* Como el CTA de al lado: en la barra de acciones el espacio se reparte a codazos y sin esto «Iniciar sesión» se parte en dos líneas a 1280 px, que era lo que pasaba. */ white-space: nowrap; color: var(--foreground-body); transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); } .web-nav__signin:hover { color: var(--foreground); background-color: color-mix(in oklch, var(--foreground) 5%, transparent); } } .web-nav__cta { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.875rem; border-radius: var(--radius-md); border: 1px solid transparent; background-color: var(--primary); color: var(--primary-foreground); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px -8px color-mix(in oklch, var(--agent-5) 75%, transparent); transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .web-nav__cta:hover { background-color: var(--primary-active); box-shadow: 0 10px 26px -8px color-mix(in oklch, var(--agent-5) 90%, transparent); } @media (min-width: 1024px) { .web-nav__cta { font-size: 0.875rem; } } .web-nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); border: 1px solid var(--web-hairline); background-color: transparent; color: var(--foreground); cursor: pointer; } .web-nav__burger:hover { background-color: var(--muted); } @media (min-width: 1024px) { .web-nav__burger { display: none; } } /* Las dos barras del icono se cruzan en aspa al abrir. */ .web-nav__burger-bar { transition: transform var(--duration-base) var(--ease-emphasized); transform-origin: center; } .web-nav__burger[aria-expanded="true"] .web-nav__burger-bar:first-child { transform: translateY(3px) rotate(45deg); } .web-nav__burger[aria-expanded="true"] .web-nav__burger-bar:last-child { transform: translateY(-3px) rotate(-45deg); } /* ---------- Menús desplegables (escritorio) ---------- */ .web-menu { min-width: 22rem; padding: 0.5rem; border-radius: var(--radius-xl); border: 1px solid var(--web-glass-line); background-color: var(--popover); box-shadow: var(--shadow-xl); } /* Puente anti-cierre del modo hover: el panel va `position: fixed` (Preline, --strategy:fixed) y queda separado del botón por un hueco de ~8-12px; al cruzarlo con el ratón, el hover se pierde y el menú se cierra antes de poder clicar. Este pseudo-elemento prolonga el área de hover del panel por encima (cubre el hueco hasta el botón) y unos px a los lados para los trayectos en diagonal. Es invisible y no intercepta clics fuera del panel abierto (solo existe mientras el panel está en el DOM visible). */ .web-menu::before { content: ""; position: absolute; top: -1.25rem; left: -0.75rem; right: -0.75rem; height: 1.5rem; } /* Translucidez muy contenida (96 %): el desplegable cae sobre el H1 del hero y con menos opacidad el titular se lee A TRAVÉS del menú. El `backdrop-filter` está para el matiz, no para tapar. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .web-menu { background-color: color-mix(in oklch, var(--popover) 96%, transparent); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } } .web-menu__grid { display: grid; gap: 0.125rem; grid-template-columns: 1fr; } @media (min-width: 1024px) { .web-menu--wide { min-width: 34rem; } .web-menu--wide .web-menu__grid { grid-template-columns: 1fr 1fr; } } .web-menu__item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-standard); } .web-menu__item:hover, .web-menu__item:focus-visible { background-color: color-mix(in oklch, var(--foreground) 5%, transparent); } .web-menu__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; margin-top: 0.0625rem; border-radius: var(--radius-sm); color: var(--web-chip-color, var(--agent-5)); background-color: color-mix(in oklch, var(--web-chip-color, var(--agent-5)) 13%, transparent); } .web-menu__name { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); } .web-menu__desc { display: block; margin-top: 0.0625rem; font-size: 0.75rem; line-height: 1.35; color: var(--foreground-muted-soft); } .web-menu__foot { margin-top: 0.375rem; padding: 0.5rem 0.625rem; border-top: 1px solid var(--web-hairline-soft); } .web-menu__more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); } .web-menu__more:hover .web-cta__arrow { transform: translateX(3px); } /* Fila de sector: nombre + badge de estado, sin enlace propio (no hay una página por sector todavía y un enlace muerto es peor que nada). */ /* Filas del desplegable de Sectores. Son ENLACES a la ficha de cada sector (antes eran texto muerto, cuando no había página que abrir), así que necesitan el mismo realce al pasar por encima que los items de módulo — un enlace sin respuesta al hover no parece pulsable. */ .web-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; color: var(--foreground-body); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-standard); } .web-menu__row:hover, .web-menu__row:focus-visible { background-color: color-mix(in oklch, var(--foreground) 5%, transparent); } /* ---------- Panel móvil a pantalla completa ---------- */ .web-nav__panel { position: fixed; inset-block-start: var(--web-nav-h, 3.75rem); inset-block-end: 0; inset-inline: 0; z-index: 49; display: flex; flex-direction: column; background-color: var(--background); opacity: 0; visibility: hidden; transform: translate3d(0, -0.75rem, 0); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-emphasized), visibility 0s linear var(--duration-base); } .web-nav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (min-width: 1024px) { .web-nav__panel { display: none; } } .web-nav__panel-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1rem 1.5rem; -webkit-overflow-scrolling: touch; } /* CTAs anclados abajo, fuera del scroll. */ .web-nav__panel-foot { flex: none; display: grid; gap: 0.5rem; padding: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--web-hairline-soft); background-color: var(--background); } .web-nav__panel-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 0.75rem; border-radius: var(--radius-lg); font-size: 1rem; color: var(--foreground); border-bottom: 1px solid var(--web-hairline-soft); } .web-nav__panel-link:last-of-type { border-bottom: 0; } .web-nav__panel-group { padding: 0.75rem 0.75rem 0.25rem; } .web-nav__panel-title { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--foreground-muted-soft); } .web-nav__panel .web-cta { width: 100%; } /* Bloquea el scroll del documento mientras el panel está abierto: si no, al arrastrar sobre el panel se mueve la página de debajo. */ .web-nav-open, .web-nav-open body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .web-nav__panel, .web-nav__link::after, .web-nav__burger-bar, .web-nav__caret { transition: none; } } /* ------------------------------------------------------------------ * * 2. Escala tipográfica de marketing * * `tokens.css` fija h1 = 24/30px porque en el ERP un H1 es el título de * una pantalla, no un titular. En marketing hace falta otra escala; se * declara aquí en vez de con utilidades `text-6xl` para que el salto * mobile→desktop sea fluido (`clamp`) en lugar de escalonado. * ------------------------------------------------------------------ */ .web-h1 { font-size: clamp(2.25rem, 1.35rem + 4.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; color: var(--foreground); text-wrap: balance; } .web-h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.04em; font-weight: 600; color: var(--foreground); text-wrap: balance; } .web-h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; color: var(--foreground); } .web-lead { font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--foreground-body); text-wrap: pretty; } /* Degradado de marca sobre texto. `background-clip: text` necesita el color transparente; el fallback (navegador sin soporte) hereda el color del padre y el titular sigue legible. */ /* * Los `--agent-*` están calibrados para leerse sobre fondo oscuro. Usados * tal cual en un titular sobre blanco quedan pastel e ilegibles, así que * en claro el degradado tira de una rampa propia con la misma tonalidad * y la luminosidad bajada. En oscuro se vuelve a los tokens. */ .web-shine { background-image: linear-gradient( 100deg, var(--web-shine-1, oklch(0.5 0.23 296)) 0%, var(--web-shine-2, oklch(0.48 0.22 258)) 38%, var(--web-shine-3, oklch(0.5 0.13 172)) 72%, var(--web-shine-4, oklch(0.52 0.16 55)) 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: web-shine-pan 14s linear infinite; } @keyframes web-shine-pan { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } /* * Rótulo de sección (eyebrow). * * En la tipografía de la web, NO monoespaciada (decisión de dirección, * 2026-08-17). La mono se reserva para lo que es literalmente texto de * máquina —terminal, barra de URL de los mockups, teclas, nombres de * tool—; un rótulo de sección es prosa, y en mono se leía como salida de * consola. * * Al pasar a la sans hacen falta dos ajustes o el rótulo se deshace: algo * menos de `letter-spacing` (la mono ya venía muy abierta de fábrica) y * un punto de peso, porque la sans en versalitas y a 12 px pierde * presencia frente al titular que tiene debajo. */ .web-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--foreground-muted-soft); } /* ------------------------------------------------------------------ * * 3. Decorado de fondo: mesh + rejilla + ruido * ------------------------------------------------------------------ */ .web-canvas { position: relative; isolation: isolate; overflow: hidden; } /* Todas las capas decorativas comparten posicionamiento y son inertes al puntero: nunca deben robar un click a un CTA. */ .web-layer { position: absolute; inset: 0; pointer-events: none; z-index: -1; } /* * Mesh gradient. Cuatro blobs radiales en la rampa de marca que derivan * lentamente. Se anima `transform` (compuesto por la GPU) en lugar de * `background-position`, que forzaría repintar el gradiente entero en * cada frame. * * Movimiento: DOS animaciones por capa, no una * ------------------------------------------- * Con sólo la deriva de `transform` el hero se leía estático: a 72 px de * desenfoque un desplazamiento del 4 % es casi invisible y la PALETA no * cambiaba nunca — siempre el mismo violeta arriba a la izquierda y el * mismo azul arriba a la derecha. Cada capa lleva ahora: * * 1. `web-mesh-drift-*` — recorrido (translate + scale + un giro * pequeño), con más amplitud que antes. * 2. `web-mesh-hue-*` — `hue-rotate` + `saturate` + `opacity`, que * es lo que hace que el degradado CAMBIE DE TONALIDAD en lugar de * limitarse a moverse. * * Los cuatro períodos son primos entre sí (34/27 s y 46/38 s) y todas * las animaciones van en `alternate`: la combinación tarda horas en * repetirse y nunca hay salto de vuelta al fotograma 0. * * Coste: el `hue-rotate` va en la PSEUDO-capa, dentro del `blur()` del * padre. No añade una pasada de blur nueva — el blur ya se rehacía en * cada frame por la deriva de `transform`, que también es hija del * filtro. Es un shader más sobre una textura ya subida a la GPU. */ .web-mesh { opacity: var(--web-mesh-opacity); filter: blur(72px) saturate(130%); will-change: transform; } .web-mesh::before, .web-mesh::after { content: ""; position: absolute; inset: -25%; background-repeat: no-repeat; will-change: transform, filter, opacity; } .web-mesh::before { background-image: radial-gradient(38% 42% at 22% 28%, var(--web-mesh-1) 0%, transparent 62%), radial-gradient(34% 38% at 78% 22%, var(--web-mesh-2) 0%, transparent 60%); animation: web-mesh-drift-a 34s ease-in-out infinite alternate, web-mesh-hue-a 27s ease-in-out infinite alternate; } /* * La tercera capa (`--web-mesh-warm`) es la BASE del tema claro: un velo * cálido que ocupa todo el ancho y quita el blanco de laboratorio del * fondo. En oscuro el token es `transparent` y el gradiente no pinta * nada — misma regla, sin ramificar por tema. */ .web-mesh::after { background-image: radial-gradient(40% 40% at 68% 74%, var(--web-mesh-3) 0%, transparent 62%), radial-gradient(30% 34% at 16% 82%, var(--web-mesh-4) 0%, transparent 58%), radial-gradient(125% 100% at 50% 32%, var(--web-mesh-warm) 0%, transparent 76%); animation: web-mesh-drift-b 46s ease-in-out infinite alternate, web-mesh-hue-b 38s ease-in-out infinite alternate; } /* El giro es de grados, no de decenas: con `inset: -25%` hay margen de sobra para que la capa no descubra el borde de la sección al rotar. */ @keyframes web-mesh-drift-a { 0% { transform: translate3d(-3%, -2%, 0) scale(1) rotate(-2deg); } 50% { transform: translate3d(7%, -6%, 0) scale(1.14) rotate(1.5deg); } 100% { transform: translate3d(-6%, 7%, 0) scale(1.06) rotate(3deg); } } @keyframes web-mesh-drift-b { 0% { transform: translate3d(2%, 3%, 0) scale(1.06) rotate(2deg); } 50% { transform: translate3d(-8%, 4%, 0) scale(1) rotate(-1deg); } 100% { transform: translate3d(6%, -7%, 0) scale(1.16) rotate(-3.5deg); } } /* * Tonalidad. El recorrido de `hue-rotate` se queda en ±14° a propósito: * es suficiente para que el violeta vire a índigo y el turquesa a verde * —que es lo que se pidió, "que cambie ligeramente de tonalidades"— y no * tanto como para sacar el hero de la rampa de marca. Las dos capas van * en sentidos opuestos, así que además de cambiar cada una, cambia la * MEZCLA: a ratos se acercan y el fondo se unifica, a ratos se separan y * se lee el contraste frío/cálido. */ @keyframes web-mesh-hue-a { 0% { filter: hue-rotate(-12deg) saturate(0.94); opacity: 0.84; } 50% { filter: hue-rotate(4deg) saturate(1.14); opacity: 1; } 100% { filter: hue-rotate(14deg) saturate(1); opacity: 0.9; } } @keyframes web-mesh-hue-b { 0% { filter: hue-rotate(13deg) saturate(1.06); opacity: 1; } 50% { filter: hue-rotate(-3deg) saturate(0.9); opacity: 0.82; } 100% { filter: hue-rotate(-14deg) saturate(1.12); opacity: 0.94; } } /* * Rejilla técnica. Dos gradientes repetidos de 1px enmascarados con un * radial: la retícula se desvanece hacia los bordes en lugar de cortarse * a hachazo contra el borde de la sección. */ .web-grid { opacity: var(--web-grid-opacity); background-image: linear-gradient(to right, var(--web-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--web-grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(72% 60% at 50% 35%, #000 0%, transparent 78%); mask-image: radial-gradient(72% 60% at 50% 35%, #000 0%, transparent 78%); } .web-grid--fine { background-size: 28px 28px; } /* * Ruido. `feTurbulence` en un data-uri: pesa ~200 bytes y evita servir un * PNG. `mix-blend-mode` lo integra con el mesh en vez de velarlo. * * El modo de fusión cambia con el tema: `overlay` sobre negro añade el * grano sin tocar la densidad, pero sobre blanco lo ACLARA todavía más y * el ruido desaparece. En claro va `multiply`, que da tacto de papel en * lugar de un velo gris. */ .web-noise { opacity: var(--web-noise-opacity); mix-blend-mode: var(--web-noise-blend, overlay); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Hairline superior/inferior de sección, con caída a los lados. */ .web-rule { height: 1px; border: 0; background-image: linear-gradient(to right, transparent, var(--web-hairline), transparent); } /* ------------------------------------------------------------------ * * 4. Glow y glass * ------------------------------------------------------------------ */ /* Halo elíptico detrás del mockup del hero. */ .web-glow { position: absolute; left: 50%; top: 8%; width: min(1100px, 118%); aspect-ratio: 2 / 1; translate: -50% 0; opacity: var(--web-glow-opacity); pointer-events: none; z-index: -1; background-image: radial-gradient( 50% 50% at 50% 50%, var(--web-glow-1) 0%, var(--web-glow-2) 45%, transparent 72% ); filter: blur(56px); /* Dos animaciones que NO se pisan: `breathe` es dueña de `opacity` y `transform`, `hue` es dueña de `filter`. Si las dos declarasen `filter` ganaría la última y el halo perdería el desenfoque. El período largo (31 s frente a 9 s) evita que el viraje de color se lea como parpadeo. */ animation: web-glow-breathe 9s ease-in-out infinite alternate, web-glow-hue 31s ease-in-out infinite alternate; } @keyframes web-glow-breathe { from { opacity: calc(var(--web-glow-opacity) * 0.72); transform: scale(0.96); } to { opacity: var(--web-glow-opacity); transform: scale(1.04); } } @keyframes web-glow-hue { from { filter: blur(56px) hue-rotate(-12deg) saturate(1.06); } to { filter: blur(56px) hue-rotate(14deg) saturate(0.94); } } /* * Glassmorphism. El fallback importa: sin `backdrop-filter` la tarjeta * cae a un color sólido opaco en vez de quedarse translúcida e ilegible * sobre el mesh. */ .web-glass { background-color: var(--card); border: 1px solid var(--web-glass-line); border-radius: var(--radius-xl); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .web-glass { background-color: var(--web-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } } /* Borde superior iluminado — el detalle que da el aire "de agencia". */ .web-glass--lit { position: relative; } .web-glass--lit::before { content: ""; position: absolute; inset-inline: 12%; top: -1px; height: 1px; background-image: linear-gradient( to right, transparent, color-mix(in oklch, var(--agent-5) 70%, transparent), transparent ); } /* Tarjeta que se levanta al pasar el ratón (bento, sectores, planes). */ .web-lift { transition: transform var(--duration-base) var(--ease-emphasized), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .web-lift:hover, .web-lift:focus-within { transform: translateY(-4px); border-color: color-mix(in oklch, var(--agent-5) 42%, var(--web-glass-line)); box-shadow: var(--shadow-lg); } /* Icono cuadrado de acento por pilar/feature. */ .web-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); color: var(--web-chip-color, var(--agent-5)); background-color: color-mix(in oklch, var(--web-chip-color, var(--agent-5)) 14%, transparent); border: 1px solid color-mix(in oklch, var(--web-chip-color, var(--agent-5)) 30%, transparent); } .web-chip--1 { --web-chip-color: var(--agent-1); } .web-chip--2 { --web-chip-color: var(--agent-2); } .web-chip--3 { --web-chip-color: var(--agent-3); } .web-chip--4 { --web-chip-color: var(--agent-4); } .web-chip--5 { --web-chip-color: var(--agent-5); } /* ------------------------------------------------------------------ * * 5. CTAs * ------------------------------------------------------------------ */ .web-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-lg); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .web-cta:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .web-cta--primary { position: relative; color: var(--primary-foreground); background-color: var(--primary); border: 1px solid transparent; box-shadow: 0 8px 24px -10px color-mix(in oklch, var(--agent-5) 70%, transparent); } .web-cta--primary:hover { background-color: var(--primary-active); box-shadow: 0 14px 34px -12px color-mix(in oklch, var(--agent-5) 85%, transparent); } .web-cta--primary:active { transform: translateY(1px); } .web-cta--ghost { color: var(--foreground); background-color: transparent; border: 1px solid var(--web-hairline); } .web-cta--ghost:hover { background-color: color-mix(in oklch, var(--foreground) 5%, transparent); border-color: color-mix(in oklch, var(--foreground) 22%, transparent); } /* La flecha se desplaza al hover; se anula con reduced-motion abajo. */ .web-cta__arrow { transition: transform var(--duration-base) var(--ease-emphasized); } .web-cta:hover .web-cta__arrow { transform: translateX(3px); } /* Badge del eyebrow del hero, con punto vivo. */ .web-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.75rem 0.3125rem 0.5rem; border-radius: var(--radius-full); border: 1px solid var(--web-glass-line); background-color: color-mix(in oklch, var(--card) 70%, transparent); font-size: 0.8125rem; color: var(--foreground-body); } .web-pill__dot { position: relative; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background-color: var(--agent-4); flex: none; } .web-pill__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: inherit; animation: web-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes web-ping { 0% { transform: scale(1); opacity: 0.7; } 75% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* ------------------------------------------------------------------ * * 6. Marco de navegador de los mockups * * El "pantallazo" del hero es HTML real (bloques de los dashboards de * Preline Pro), no una imagen ni un iframe. El chrome de ventana se * dibuja aquí en CSS. * ------------------------------------------------------------------ */ .web-browser { position: relative; border-radius: 1rem; border: 1px solid var(--web-glass-line); background-color: color-mix(in oklch, var(--card) 55%, transparent); padding: 0.375rem; box-shadow: var(--shadow-xl); } @media (min-width: 768px) { .web-browser { padding: 0.625rem; } } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .web-browser { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } } .web-browser__bar { display: flex; align-items: center; gap: 0.75rem; height: 1.75rem; padding-inline: 0.5rem; } .web-browser__dots { display: flex; gap: 0.375rem; flex: none; } .web-browser__dots span { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background-color: color-mix(in oklch, var(--foreground) 22%, transparent); } .web-browser__dots span:nth-child(1) { background-color: color-mix(in oklch, var(--agent-2) 70%, transparent); } .web-browser__dots span:nth-child(2) { background-color: color-mix(in oklch, var(--agent-1) 70%, transparent); } .web-browser__dots span:nth-child(3) { background-color: color-mix(in oklch, var(--agent-4) 70%, transparent); } /* Barra de direcciones falsa: refuerza que es la app, no una foto. */ .web-browser__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.375rem; height: 1.375rem; padding-inline: 0.625rem; border-radius: var(--radius-full); background-color: color-mix(in oklch, var(--foreground) 6%, transparent); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--foreground-muted-soft); overflow: hidden; white-space: nowrap; } /* * Aviso «datos de ejemplo». Va con clase propia y no con `hidden md:flex` * porque este fichero se carga SIN `@layer`: cualquier `display` que * declare aquí gana a las utilidades de Tailwind y el pill quedaría * visible también en móvil, donde no cabe. */ .web-browser__tag { display: none; flex: none; align-items: center; height: 1.375rem; padding-inline: 0.625rem; border-radius: var(--radius-full); background-color: color-mix(in oklch, var(--foreground) 6%, transparent); font-family: var(--font-sans); font-size: 0.6875rem; color: var(--foreground-muted-soft); white-space: nowrap; } @media (min-width: 768px) { .web-browser__tag { display: inline-flex; } } .web-browser__viewport { position: relative; border-radius: 0.75rem; overflow: hidden; background-color: var(--background); border: 1px solid var(--web-hairline-soft); } /* * Los paneles se apilan en la misma celda de grid: así el marco no da un * salto de altura al cambiar de módulo y GSAP puede cruzar dos paneles a * la vez sin posicionamiento absoluto (que rompería la altura). */ .web-mockstack { display: grid; } .web-mockstack > [data-mock-panel] { grid-area: 1 / 1; } /* Panel oculto: `visibility` en vez de `display` para no perder la altura de referencia del stack y para que GSAP pueda animarlo. */ .web-mockstack > [data-mock-panel][hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; } /* Tipografía comprimida dentro del mockup: sugiere una pantalla real vista a escala sin recurrir a `transform: scale()` (que dejaría el texto borroso y rompería el flujo responsive). */ .web-mock { padding: 0.875rem; font-size: 0.75rem; line-height: 1.45; } @media (min-width: 640px) { .web-mock { padding: 1.125rem; } } .web-mock__title { font-size: 0.8125rem; font-weight: 600; color: var(--foreground); letter-spacing: -0.01em; } .web-mock__meta { font-size: 0.6875rem; color: var(--foreground-muted-soft); } .web-mock__card { border: 1px solid var(--web-hairline-soft); border-radius: var(--radius-md); background-color: var(--card); padding: 0.75rem; } .web-mock__kpi { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--foreground); } .web-mock__row { display: flex; align-items: center; gap: 0.625rem; padding-block: 0.5rem; border-top: 1px solid var(--web-hairline-soft); } .web-mock__row:first-child { border-top: 0; } .web-mock__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background-color: color-mix(in oklch, var(--agent-5) 18%, transparent); color: var(--foreground); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; } /* Barra de progreso / distribución dentro de los mockups. */ .web-meter { height: 0.375rem; border-radius: var(--radius-full); background-color: color-mix(in oklch, var(--foreground) 8%, transparent); overflow: hidden; } .web-meter__fill { display: block; height: 100%; border-radius: inherit; background-image: linear-gradient(to right, var(--agent-5), var(--agent-3)); width: var(--web-meter, 50%); } /* Sparkline / barras: la altura viaja en una custom property declarada en el HTML mediante una clase, no en un `style=""` (CSP). */ .web-bars { display: flex; align-items: flex-end; gap: 0.25rem; height: 3.5rem; } .web-bars > span { flex: 1 1 0; border-radius: 0.1875rem 0.1875rem 0 0; background-image: linear-gradient( to top, color-mix(in oklch, var(--agent-5) 65%, transparent), color-mix(in oklch, var(--agent-3) 55%, transparent) ); height: var(--h, 40%); } .web-bar-10 { --h: 10%; } .web-bar-20 { --h: 20%; } .web-bar-25 { --h: 25%; } .web-bar-30 { --h: 30%; } .web-bar-35 { --h: 35%; } .web-bar-40 { --h: 40%; } .web-bar-45 { --h: 45%; } .web-bar-50 { --h: 50%; } .web-bar-55 { --h: 55%; } .web-bar-60 { --h: 60%; } .web-bar-65 { --h: 65%; } .web-bar-70 { --h: 70%; } .web-bar-75 { --h: 75%; } .web-bar-80 { --h: 80%; } .web-bar-90 { --h: 90%; } .web-bar-100 { --h: 100%; } .web-meter-38 { --web-meter: 38%; } .web-meter-52 { --web-meter: 52%; } .web-meter-64 { --web-meter: 64%; } .web-meter-71 { --web-meter: 71%; } .web-meter-86 { --web-meter: 86%; } /* ---------- Editor de flujos (mockup de Automatización) ---------- * * Un canvas de nodos conectados dibujado ENTERO en CSS: ni SVG de * conectores posicionado en absoluto, ni imagen. La clave es que el * diagrama cambia de orientación con el ancho —columna en móvil, fila a * partir de `md`— y un conector absoluto no sobreviviría a eso. * * Los enlaces entre nodos son elementos propios (`.web-flow__link`) y no * pseudo-elementos: así el mismo nodo sirve en las dos orientaciones sin * tener que anular reglas. * * La bifurcación (`__fork`) SÍ usa el conector clásico de árbol —línea * vertical + muñones horizontales—, que resulta idéntico en ambas * orientaciones y por eso no necesita media query. */ .web-flow__canvas { border: 1px solid var(--web-hairline-soft); border-radius: var(--radius-md); padding: 0.875rem 0.75rem; /* Retícula de puntos: lo que hace que se lea «canvas» y no «lista». */ background-color: color-mix(in oklch, var(--foreground) 2%, transparent); background-image: radial-gradient(circle, var(--web-hairline) 1px, transparent 1px); background-size: 16px 16px; background-position: -1px -1px; overflow-x: auto; scrollbar-width: none; } .web-flow__canvas::-webkit-scrollbar { display: none; } .web-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; } @media (min-width: 768px) { .web-flow { flex-direction: row; align-items: center; /* `max-content` para que los nodos no se compriman; `justify-center` para que, cuando el diagrama cabe de sobra, no quede escorado a la izquierda con medio canvas vacío al lado. */ min-width: max-content; justify-content: center; margin-inline: auto; } } .web-flow__step { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.4375rem 0.5625rem; border-radius: var(--radius-md); border: 1px solid var(--web-hairline); background-color: var(--card); box-shadow: var(--shadow-xs); } @media (min-width: 768px) { .web-flow__step { flex: none; /* Suficiente para que «Preguntar a RRHH» + su badge no se corten. */ max-width: 15rem; } } /* El disparador se distingue del resto: es el único nodo que no depende de otro y conviene que se lea como el origen del flujo. */ .web-flow__step--trigger { border-color: color-mix(in oklch, var(--agent-1) 45%, transparent); background-color: color-mix(in oklch, var(--agent-1) 8%, var(--card)); } .web-flow__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: var(--radius-sm); color: var(--web-flow-color, var(--agent-5)); background-color: color-mix(in oklch, var(--web-flow-color, var(--agent-5)) 14%, transparent); } .web-flow__step--trigger .web-flow__icon { --web-flow-color: var(--agent-1); } .web-flow__step--wait .web-flow__icon { --web-flow-color: var(--agent-1); } .web-flow__step--done .web-flow__icon { --web-flow-color: var(--agent-4); } .web-flow__name { display: block; font-size: 0.6875rem; font-weight: 600; line-height: 1.25; color: var(--foreground); } .web-flow__meta { display: block; margin-top: 0.0625rem; font-family: var(--font-sans); font-size: 0.5625rem; line-height: 1.3; color: var(--foreground-muted-soft); } /* * Enlace entre nodos. En columna es un tramo vertical con la punta de * flecha abajo; en fila, horizontal con la punta a la derecha. La punta * se dibuja con bordes (un triángulo CSS) para no meter otro SVG. */ .web-flow__link { position: relative; display: block; flex: none; width: 1px; height: 0.875rem; margin-inline-start: 0.6875rem; background-color: var(--web-hairline); } .web-flow__link::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 0; transform: translateX(-50%); border-inline: 3px solid transparent; border-top: 4px solid var(--web-hairline); } @media (min-width: 768px) { .web-flow__link { width: 1.25rem; height: 1px; margin-inline-start: 0; } .web-flow__link::after { left: auto; right: -1px; top: 50%; bottom: auto; transform: translateY(-50%); border-inline: 0; border-block: 3px solid transparent; border-inline-start: 4px solid var(--web-hairline); } } /* * Bifurcación. Conector de árbol: una línea vertical que va del centro * del primer hijo al centro del último, y un muñón horizontal por hijo. * Idéntico en las dos orientaciones, así que no lleva media query. */ .web-flow__fork { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding-inline-start: 0.875rem; min-width: 0; } .web-flow__fork::before { content: ""; position: absolute; inset-inline-start: 0; /* Media altura de un nodo: la línea nace y muere en el centro de los nodos extremos, no en su borde. */ top: 1.375rem; bottom: 1.375rem; width: 1px; background-color: var(--web-hairline); } .web-flow__fork > .web-flow__step { position: relative; } .web-flow__fork > .web-flow__step::before { content: ""; position: absolute; inset-inline-start: -0.875rem; top: 50%; width: 0.875rem; height: 1px; background-color: var(--web-hairline); } /* Barra de herramientas del editor. */ .web-flow__toolbar { display: flex; align-items: center; gap: 0.25rem; } .web-flow__tool { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--foreground-muted-soft); } .web-flow__tool--active { border-color: var(--web-hairline); background-color: color-mix(in oklch, var(--foreground) 6%, transparent); color: var(--foreground); } /* Franja de ejecuciones, con el punto «vivo» del estado activo. */ .web-flow__runs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid var(--web-hairline-soft); } .web-flow__live { position: relative; flex: none; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background-color: var(--agent-4); } .web-flow__live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: inherit; animation: web-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @media (prefers-reduced-motion: reduce) { .web-flow__live::after { animation: none; } } /* ------------------------------------------------------------------ * * 7. Tabs de módulos del hero * * No usamos `HSTabs` de Preline: la transición entre paneles la conduce * GSAP y necesitamos controlar el orden (salida → entrada). El markup * conserva `role="tab"` / `aria-selected` para que la semántica sea la * misma. * ------------------------------------------------------------------ */ .web-tabs { display: flex; gap: 0.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.25rem; scrollbar-width: none; } .web-tabs::-webkit-scrollbar { display: none; } .web-tab { scroll-snap-align: start; flex: none; display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.75rem; border-radius: var(--radius-full); border: 1px solid transparent; background-color: transparent; font-size: 0.8125rem; color: var(--foreground-body); cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .web-tab:hover { background-color: color-mix(in oklch, var(--foreground) 6%, transparent); } .web-tab[aria-selected="true"] { color: var(--foreground); background-color: color-mix(in oklch, var(--card) 85%, transparent); border-color: var(--web-glass-line); box-shadow: var(--shadow-sm); } .web-tab__dot { width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background-color: var(--web-tab-color, var(--agent-5)); flex: none; } /* La pestaña de IA no tiene un color de la rampa: lleva el degradado de marca, igual que `.web-shine` en el titular. */ /* Automatización cae entre RRHH (teal) e IA: su punto es la mezcla de los dos tokens vecinos, distinguible de ambos sin ampliar la rampa. */ .web-tab--auto { --web-tab-color: color-mix(in oklch, var(--agent-4) 55%, var(--agent-5)); } .web-tab--ia .web-tab__dot { background-image: linear-gradient(135deg, var(--agent-3), var(--agent-5)); } .web-tab--1 { --web-tab-color: var(--agent-1); } .web-tab--2 { --web-tab-color: var(--agent-2); } .web-tab--3 { --web-tab-color: var(--agent-3); } .web-tab--4 { --web-tab-color: var(--agent-4); } .web-tab--5 { --web-tab-color: var(--agent-5); } /* ------------------------------------------------------------------ * * 8. Marquee de sectores * * Dos copias de la misma pista dentro del contenedor; se desplaza -50 % * y el bucle es invisible. `min-width: max-content` evita que flexbox * comprima los ítems y desalinee el punto de corte. * ------------------------------------------------------------------ */ .web-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .web-marquee__track { display: flex; width: max-content; gap: 0.75rem; animation: web-marquee var(--web-marquee-duration, 46s) linear infinite; animation-direction: var(--web-marquee-direction, normal); } .web-marquee--reverse .web-marquee__track { --web-marquee-direction: reverse; --web-marquee-duration: 58s; } .web-marquee:hover .web-marquee__track, .web-marquee:focus-within .web-marquee__track, .web-marquee__track.web-marquee--paused { animation-play-state: paused; } @keyframes web-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .web-sector { display: inline-flex; align-items: center; gap: 0.625rem; flex: none; padding: 0.625rem 0.875rem; border-radius: var(--radius-lg); border: 1px solid var(--web-hairline-soft); background-color: color-mix(in oklch, var(--card) 60%, transparent); white-space: nowrap; } .web-sector__name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); } /* ------------------------------------------------------------------ * * 9. Conversación Ask-AI * ------------------------------------------------------------------ */ .web-chat { display: flex; flex-direction: column; gap: 0.875rem; } .web-chat__turn { display: flex; gap: 0.625rem; align-items: flex-start; } .web-chat__turn--user { justify-content: flex-end; } .web-chat__bubble { max-width: 44ch; padding: 0.6875rem 0.875rem; border-radius: var(--radius-lg); font-size: 0.875rem; line-height: 1.5; } .web-chat__bubble--user { background-color: var(--primary); color: var(--primary-foreground); border-end-end-radius: var(--radius-sm); } .web-chat__bubble--ai { background-color: color-mix(in oklch, var(--card) 88%, transparent); border: 1px solid var(--web-hairline-soft); color: var(--foreground-body); border-end-start-radius: var(--radius-sm); } /* Traza de herramienta MCP ejecutada. */ .web-tool { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border-radius: var(--radius-md); border: 1px solid color-mix(in oklch, var(--agent-4) 26%, transparent); background-color: color-mix(in oklch, var(--agent-4) 8%, transparent); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--foreground-body); } .web-tool__ok { margin-inline-start: auto; color: var(--agent-4); flex: none; } /* Atajo de teclado. */ .web-kbd { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); border: 1px solid var(--web-hairline); border-bottom-width: 2px; background-color: color-mix(in oklch, var(--foreground) 4%, transparent); font-family: var(--font-mono); font-size: 0.75rem; color: var(--foreground); } /* Onda de voz — barras que laten. */ .web-wave { display: inline-flex; align-items: center; gap: 0.1875rem; height: 1rem; } .web-wave > span { width: 0.1875rem; height: 100%; border-radius: var(--radius-full); background-color: var(--agent-3); transform-origin: center; animation: web-wave 1.1s ease-in-out infinite; } .web-wave > span:nth-child(1) { animation-delay: 0s; } .web-wave > span:nth-child(2) { animation-delay: 0.12s; } .web-wave > span:nth-child(3) { animation-delay: 0.24s; } .web-wave > span:nth-child(4) { animation-delay: 0.36s; } .web-wave > span:nth-child(5) { animation-delay: 0.48s; } @keyframes web-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } } /* ------------------------------------------------------------------ * * 10. Bento y planes * ------------------------------------------------------------------ */ .web-bento { display: grid; gap: 1rem; grid-template-columns: 1fr; } /* * `article:nth-of-type()` y no `:nth-child()`: el bento lleva además el * SVG decorativo de los haces, y con `:nth-child` la tercera tarjeta * pasaría a ser la cuarta y perdería su `grid-column` (el `display: none` * del SVG en móvil tampoco lo saca de la cuenta). */ @media (min-width: 768px) { .web-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .web-bento > article:nth-of-type(1) { grid-column: span 6; } .web-bento > article:nth-of-type(2), .web-bento > article:nth-of-type(3) { grid-column: span 3; } } @media (min-width: 1024px) { .web-bento > article:nth-of-type(1) { grid-column: span 3; grid-row: span 2; } .web-bento > article:nth-of-type(2), .web-bento > article:nth-of-type(3) { grid-column: span 3; } } /* Plan destacado: anillo de acento en vez de cambiar el fondo, que en dark se comería el contraste del texto. */ .web-plan--featured { border-color: color-mix(in oklch, var(--agent-5) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--agent-5) 30%, transparent), 0 24px 48px -24px color-mix(in oklch, var(--agent-5) 55%, transparent); } .web-price { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.04em; color: var(--foreground); line-height: 1; } .web-check { flex: none; color: var(--agent-4); } /* ------------------------------------------------------------------ * * Casillas y radios MARCADOS — que se vean en los dos temas * * `@tailwindcss/forms` pinta el estado marcado como un check SVG BLANCO * sobre `background-color: currentColor`. Dos cosas lo rompían aquí: * * 1. El re-preflight de `tailwind.web.input.css` (§`@layer components`) * declara `background-color: transparent` para todos los `input`, y * gana al plugin. Resultado: check blanco sobre NADA — invisible en * tema claro, donde la tarjeta también es blanca. Es lo que hacía * que en /precios no se distinguiera qué módulos estaban elegidos. * 2. Aunque se restaurase, `currentColor` no sirve en un sitio con dos * temas: en claro el texto es casi negro (caja negra, check blanco, * bien) pero en oscuro es casi blanco → check blanco sobre caja * blanca, invisible otra vez. El fondo tiene que ser un color de * marca, no el color del texto. * * Por eso el fondo se fija al acento (`--agent-5`), que contrasta con el * check blanco en los dos temas. Va sin `@layer` —como toda esta hoja—, * así que gana al re-preflight sin `!important` y sin tocar el bundle * compartido con el ERP. * * Alcance deliberadamente AMPLIO (cualquier casilla de la web pública): * además del selector de módulos, esto arregla las tres casillas de * consentimiento OBLIGATORIO —privacidad del formulario de demo y las * condiciones de los pasos de cuenta y pago del alta—, donde no poder * ver si has marcado deja de ser un problema estético. */ .web-page input[type="checkbox"]:checked, .web-page input[type="radio"]:checked { background-color: var(--agent-5); border-color: var(--agent-5); } /* Deshabilitada y marcada: el escalón que ya trae todos los módulos sigue leyéndose, pero apagado — no invita a pulsarla. */ .web-page input[type="checkbox"]:checked:disabled, .web-page input[type="radio"]:checked:disabled { background-color: color-mix(in oklch, var(--agent-5) 45%, transparent); border-color: transparent; } /* Contador de estadísticas: `tabular-nums` para que el número no baile de ancho mientras GSAP lo interpola. */ .web-counter { font-variant-numeric: tabular-nums; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--foreground); } /* Contador con prefijo («desde 19 €»): a tamaño completo parte la línea entre el número y el símbolo dentro de una tarjeta estrecha. Baja un escalón y prohíbe el corte. */ .web-counter--compact { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); white-space: nowrap; } /* ------------------------------------------------------------------ * * 11. Spotlight de cursor * * Glow radial que sigue al ratón DENTRO de la tarjeta (patrón Linear). * `web-motion.js` escribe `--spot-x/--spot-y/--spot-a` con * `style.setProperty()` — vía CSSOM, que la CSP no bloquea (a diferencia * de un `style=""` en el HTML servido). * * Sólo con puntero fino: en táctil no hay hover y el glow se quedaría * clavado donde tocaste. Sin JS las variables no existen y el * pseudo-elemento queda a opacidad 0, es decir, invisible. * * El pseudo va con `z-index: -1` sobre una tarjeta con * `isolation: isolate`: así se pinta POR ENCIMA del fondo de la tarjeta * pero POR DEBAJO del texto, y nunca baja el contraste de lectura. * ------------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { [data-spot] { position: relative; isolation: isolate; } [data-spot]::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--spot-a, 0); transition: opacity var(--duration-base, 200ms) var(--ease-standard, ease); background-image: radial-gradient( 16rem 16rem at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in oklch, var(--agent-5) 22%, transparent) 0%, color-mix(in oklch, var(--agent-3) 12%, transparent) 38%, transparent 72% ); } /* Los chips del marquee son pequeños: el foco tiene que serlo también o el glow desborda la píldora entera y deja de leerse como spotlight. */ .web-sector::after { background-image: radial-gradient( 6rem 6rem at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in oklch, var(--agent-5) 26%, transparent) 0%, transparent 70% ); } } /* ------------------------------------------------------------------ * * 12. Border-beam de las tarjetas destacadas * * Filo de luz recorriendo el borde (pilar de IA, plan destacado, CTA * final). El truco es un `conic-gradient` girando por un ángulo * registrado con `@property` —sin registrar, un ángulo en custom property * no interpola— recortado a la banda del borde con `mask-composite`. * * Degradación en tres escalones: * 1. Sin `mask-composite` → no se pinta nada (el bloque `@supports` * entero no aplica) y queda el borde reforzado de `.web-beam`. * 2. Sin `@property` → el conic no gira: borde con degradado * estático, que es exactamente el fallback que queremos. * 3. Reduced-motion / móvil → animación apagada, mismo estático. * ------------------------------------------------------------------ */ @property --web-beam-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* Fallback visible siempre: el borde de la tarjeta destacada se tiñe. */ .web-beam { position: relative; border-color: color-mix(in oklch, var(--agent-5) 32%, var(--web-glass-line)); } @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .web-beam::before { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0.62; background-image: conic-gradient( from var(--web-beam-angle), transparent 0deg, transparent 210deg, color-mix(in oklch, var(--agent-3) 92%, transparent) 288deg, color-mix(in oklch, var(--agent-5) 92%, transparent) 324deg, transparent 360deg ); -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-clip: content-box, border-box; mask-composite: exclude; animation: web-beam-spin 11s linear infinite; } } @keyframes web-beam-spin { to { --web-beam-angle: 360deg; } } /* En móvil el conic se repinta entero en cada frame: se deja estático. */ @media (max-width: 767px) { .web-beam::before { animation: none; } } /* ------------------------------------------------------------------ * * 13. Reveal tipográfico * * `web-motion.js` parte el texto de `[data-split]` en palabras EN RUNTIME * (el HTML servido no cambia: SEO/AEO intactos) y las envuelve en * `.web-word`. Al acabar marca `data-split-done` y las palabras vuelven a * `display: inline`, para que la línea rompa igual que antes del efecto — * un `inline-block` permanente impediría partir el titular donde toca. * ------------------------------------------------------------------ */ .web-word { display: inline-block; } [data-split][data-split-done] .web-word { display: inline; } /* Barrido único del degradado del H1 justo después del reveal. Sustituye al paneo lento de `.web-shine` durante 1,6 s y luego se retira. */ .web-shine--sweep { animation: web-shine-sweep 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1 both; } @keyframes web-shine-sweep { from { background-position: -120% 50%; } to { background-position: 120% 50%; } } /* ------------------------------------------------------------------ * * 14. Ejecución en vivo del agente (terminal) * ------------------------------------------------------------------ */ .web-term { border-radius: var(--radius-xl); border: 1px solid var(--web-glass-line); background-color: color-mix(in oklch, var(--card) 82%, transparent); overflow: hidden; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .web-term { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } } .web-term__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--web-hairline-soft); } .web-term__title { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--foreground-muted-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * El botón de repetir sólo existe si hay algo que repetir: `web-motion.js` * pone `data-live` en el contenedor cuando ha armado la animación. Sin JS, * con GSAP caído o con reduced-motion no aparece. */ .web-term__replay { display: none; margin-inline-start: auto; align-items: center; gap: 0.375rem; flex: none; padding: 0.1875rem 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--web-hairline); background-color: transparent; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--foreground-body); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .web-term[data-live] .web-term__replay { display: inline-flex; } .web-term__replay:hover { background-color: color-mix(in oklch, var(--foreground) 6%, transparent); color: var(--foreground); } .web-term__replay:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .web-term__body { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0.875rem; list-style: none; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.45; } @media (min-width: 768px) { .web-term__body { padding: 1.125rem 1.25rem; } } /* * Rejilla y no flex-wrap: con `wrap`, en cuanto el texto no cabe se lleva * la hora a una línea y el resultado a otra, y el log deja de leerse en * columnas. Con `minmax(0, 1fr)` el texto envuelve DENTRO de su columna y * hora, marca y resultado se quedan donde tienen que estar. */ .web-term__line { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; color: var(--foreground-body); } /* A 375 px la hora se come la mitad del ancho útil: es cromo, se va. */ @media (max-width: 639px) { .web-term__line { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.375rem; } .web-term__time { display: none; } } /* Estado armado: el motor ha escondido las líneas y las va a reescribir. Sólo lo pone el JS, así que el HTML servido se lee siempre entero. */ .web-term[data-live="armed"] .web-term__line { opacity: 0; visibility: hidden; } .web-term__time { flex: none; color: color-mix(in oklch, var(--foreground) 38%, transparent); font-variant-numeric: tabular-nums; } .web-term__mark { flex: none; color: var(--agent-3); } .web-term__text { min-width: 0; } .web-term__line--goal .web-term__text { color: var(--foreground); } .web-term__line--tool .web-term__text { color: var(--foreground-body); } .web-term__line--done { margin-top: 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--web-hairline-soft); } .web-term__line--done .web-term__mark, .web-term__line--done .web-term__text { color: var(--agent-4); font-weight: 500; } .web-term__res { justify-self: end; padding: 0.0625rem 0.4375rem; border-radius: var(--radius-sm); border: 1px solid color-mix(in oklch, var(--agent-4) 26%, transparent); background-color: color-mix(in oklch, var(--agent-4) 9%, transparent); color: var(--agent-4); font-size: 0.6875rem; } .web-term__foot { padding: 0 0.875rem 0.875rem; font-size: 0.6875rem; color: var(--foreground-muted-soft); } @media (min-width: 768px) { .web-term__foot { padding: 0 1.25rem 1.125rem; } } /* Cursor de escritura: sólo en la línea que se está tecleando. */ .web-term__line.is-typing .web-term__text::after { content: "▋"; margin-inline-start: 0.12em; color: var(--agent-3); animation: web-term-caret 1s steps(1, end) infinite; } @keyframes web-term-caret { 50% { opacity: 0; } } /* ------------------------------------------------------------------ * * 15. Haces de datos del bento * * Decorativo puro. Se dibuja con el scroll desde `web-motion.js` y dos * pulsos lo recorren con `offset-path` (CSS, no SMIL: SMIL no se puede * apagar con `prefers-reduced-motion`). * * Sólo a partir de `lg`: por debajo el bento cambia de rejilla y los * trazos apuntarían al vacío. * ------------------------------------------------------------------ */ .web-bento { position: relative; isolation: isolate; } .web-beams { display: none; } @media (min-width: 1024px) { .web-beams { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; /* En claro casi no se ven a propósito: sobre fondo blanco la misma intensidad que en oscuro se lee como una raya perdida. */ opacity: 0.3; overflow: visible; } .dark .web-beams, html[data-theme="system"] .web-beams { opacity: 0.6; } /* Mismo escalón que los tokens de la § 1: `data-theme="system"` hereda el valor oscuro y hay que devolverlo al claro cuando el sistema lo está. */ @media (prefers-color-scheme: light) { html[data-theme="system"] .web-beams { opacity: 0.3; } } } .web-beams__line { fill: none; stroke: color-mix(in oklch, var(--agent-3) 60%, transparent); stroke-width: 0.75; stroke-linecap: round; /* Sin esto el `preserveAspectRatio="none"` estiraría también el grosor del trazo y las horizontales saldrían el doble de gruesas que las verticales. */ vector-effect: non-scaling-stroke; } .web-beams__line--soft { stroke: color-mix(in oklch, var(--agent-5) 55%, transparent); } .web-beams__pulse { fill: var(--agent-3); opacity: 0; } @supports (offset-path: path("M 0 0 L 1 1")) { @media (min-width: 1024px) { .web-beams__pulse { offset-rotate: 0deg; animation: web-beam-pulse 9s linear infinite; } .web-beams__pulse--a { offset-path: path("M 44 46 H 48 Q 50.5 46 50.5 42 V 30 Q 50.5 26 53 26 H 57"); } .web-beams__pulse--b { offset-path: path("M 44 54 H 48 Q 50.5 54 50.5 58 V 70 Q 50.5 74 53 74 H 57"); animation-delay: 3.5s; fill: var(--agent-5); } } } @keyframes web-beam-pulse { 0% { offset-distance: 0%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } /* ------------------------------------------------------------------ * * 16. Reveals — estados iniciales * * Scoped a `.motion-ready`, que sólo aparece si `web-motion.js` corrió. * Sin JS (o con JS roto) el contenido se renderiza visible: la home NO * depende de GSAP para ser legible. * ------------------------------------------------------------------ */ .motion-ready [data-animate] { opacity: 0; transform: translate3d(0, 22px, 0); will-change: opacity, transform; } .motion-ready [data-animate="fade"] { transform: none; } .motion-ready [data-animate="scale"] { transform: scale(0.965); } .motion-ready [data-animate="left"] { transform: translate3d(-26px, 0, 0); } .motion-ready [data-animate="right"] { transform: translate3d(26px, 0, 0); } /* GSAP limpia las props al terminar; esta clase es el seguro por si un ScrollTrigger no llega a dispararse (p. ej. la sección queda fuera de flujo tras un resize). */ .web-revealed { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------------ * * 17. Accesibilidad y movimiento reducido * ------------------------------------------------------------------ */ /* * `sr-only` posicionado absoluto se escapa del clip de un ancestro con * `overflow-x: auto` y provoca scroll fantasma en móvil (ver * docs/, feedback conocido). El enlace de salto del layout es * `position: static` por defecto, pero al recibir foco debe verse. */ .web-skip:focus-visible { position: fixed; z-index: var(--z-toast); inset-block-start: 0.75rem; inset-inline-start: 0.75rem; width: auto; height: auto; padding: 0.5rem 0.875rem; clip: auto; clip-path: none; border-radius: var(--radius-md); background-color: var(--card); border: 1px solid var(--web-hairline); color: var(--foreground); } @media (prefers-reduced-motion: reduce) { .web-mesh::before, .web-mesh::after, .web-glow, .web-shine, .web-shine--sweep, .web-marquee__track, .web-wave > span, .web-pill__dot::after, .web-beam::before, .web-beams__pulse, .web-term__line.is-typing .web-term__text::after { animation: none !important; } /* El spotlight de cursor es movimiento: con `reduce` no se registra el listener (web-motion.js), pero por si acaso el glow queda apagado. */ [data-spot]::after { display: none; } /* Los pulsos de los haces se quedarían clavados en el punto de partida: mejor que no existan. */ .web-beams__pulse { opacity: 0 !important; } .web-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .web-cta:hover .web-cta__arrow, .web-lift:hover, .web-lift:focus-within { transform: none; } /* Nada de estados iniciales: todo visible desde el primer frame. */ .motion-ready [data-animate] { opacity: 1; transform: none; will-change: auto; } }