/* ============================================================ Trackpeople — Compiled stylesheet (from scss/) ============================================================ */ :root { --brand-gradient: linear-gradient(145deg, #b269ac 0%, #3AA5BE 50%, #56c5b5 100%); --brand-violet: #b269ac; --brand-blue: #3AA5BE; --brand-mint: #56c5b5; /* Color del antetítulo .tag, elegido por dirección de diseño. Da 2,76:1 sobre blanco, por debajo del 4,5:1 que pide WCAG 2.2 AA para texto pequeño. Si en algún momento se quiere que cumpla, #297385 es la misma familia y da 5,41:1. */ /* Azul de marca para texto. Antes era #3da9bc, que daba 2,76:1 sobre blanco, 2,64 sobre --ink-50 y 2,51 sobre --ink-100: por debajo del 4,5:1 de WCAG en los tres fondos del sitio, y lo lleva .tag, que sale en casi todas las secciones de casi todas las paginas. Era el fallo mas repetido de la web. Este pasa en los tres: 5,02 / 4,80 / 4,56. */ --brand-blue-texto: #25798B; /* Azul de marca oscurecido hasta 4.73:1 sobre blanco. */ --brand-blue-fuerte: #2C7D90; --ink-900: #0A0A0B; --ink-800: #18181B; --ink-700: #27272A; /* Ya estaba en la escala de tailwind.config.js, faltaba aqui. Es el escalon que se necesita para el texto de la columna «antes» de la comparativa: sobre su gris de fondo --ink-500 se queda en 4,17:1 y no pasa AA. */ --ink-600: #3F3F46; --ink-500: #71717A; --ink-400: #A1A1AA; --ink-300: #D4D4D8; --ink-200: #E4E4E7; --ink-100: #F4F4F5; --ink-50: #FAFAF8; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(10,10,11,0.04), 0 1px 3px rgba(10,10,11,0.06); --shadow-lg: 0 30px 60px -20px rgba(10,10,11,0.18), 0 12px 24px -10px rgba(10,10,11,0.08); --shadow-glow: 0 30px 80px -20px rgba(58,165,190,0.4), 0 10px 30px -10px rgba(178,105,172,0.3); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; background: var(--ink-50); color: var(--ink-900); overflow-x: hidden; font-feature-settings: "ss01","cv11"; } h1, h2, h3, h4, h5 { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; } ::selection { background: var(--brand-blue); color: white; } /* ============================================================ Ritmo vertical de las secciones de bloque Antes cada plantilla llevaba su relleno escrito en clases de Tailwind (py-20 md:py-24 y alguna variante). Ahora lo pone .sec con variables, y desde «Apariencia» se puede pisar cualquiera de las cuatro medidas escribiendo esa misma variable en el atributo style del elemento, que gana a estas reglas. Tuvo que ser con variables y no con clases porque tailwind.build.css se genera de antemano leyendo el código: una clase compuesta en tiempo de ejecución —pt-[137px]— no estaría en la hoja, y el estilo en línea suelto no puede distinguir móvil de escritorio. ============================================================ */ .sec { --sec-pt: 6rem; /* a partir de 768 px; era md:py-24 */ --sec-pb: 6rem; --sec-pt-m: 5rem; /* por debajo; era py-20 */ --sec-pb-m: 5rem; padding-top: var(--sec-pt-m); padding-bottom: var(--sec-pb-m); margin-top: var(--sec-mt-m, 0px); margin-bottom: var(--sec-mb-m, 0px); } @media (min-width: 768px) { .sec { padding-top: var(--sec-pt); padding-bottom: var(--sec-pb); margin-top: var(--sec-mt, 0px); margin-bottom: var(--sec-mb, 0px); } } /* Los bloques que nunca han respirado como los demás. */ .sec-medium { --sec-pt: 5rem; --sec-pb: 5rem; --sec-pt-m: 4rem; --sec-pb-m: 4rem; } /* era py-16 md:py-20 */ .sec-tight { --sec-pt: 2.5rem; --sec-pb: 2.5rem; --sec-pt-m: 2.5rem; --sec-pb-m: 2.5rem; } /* era py-10 */ .sec-hero { --sec-pt: 11rem; --sec-pb: 7rem; --sec-pt-m: 9rem; --sec-pb-m: 5rem; } /* era pt-36 pb-20 md:pt-44 md:pb-28 */ /* Los bordes iban pegados al fondo —blanco sí, gris no—. Siguen saliendo igual por defecto, pero ahora son suyos y el editor puede quitarlos o ponerlos. */ .sec-border-top { border-top: 1px solid var(--ink-200); } .sec-border-bottom { border-bottom: 1px solid var(--ink-200); } /* ============================================================ Alta de empresa (plantilla «Registro») Banda a todo el ancho con la captura de la aplicación de fondo: los paneles quedan a la izquierda y el formulario cae encima, a la derecha. El velo no es adorno. La captura es clara y está llena de tarjetas blancas: sin él, el formulario —que también es una tarjeta blanca— perdía el borde contra el fondo. Va en degradado, flojo donde se ve la imagen y denso bajo el formulario, para no apagar la captura entera. ============================================================ */ .reg-band { position: relative; background-image: url("/assets/bgVideo.png"); background-size: cover; background-position: center left; } .reg-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* Dos capas. La horizontal separa el formulario del fondo; la vertical aplana la franja de arriba, que es donde caen el titular y la entradilla: ahí no basta con el contraste —medido pasaba— porque los bordes en diagonal de los paneles cruzaban el texto y lo partían. Más abajo se afloja para que la maqueta siga viéndose sobre la imagen. */ background: linear-gradient(180deg, rgba(250,250,248,0.72) 0%, rgba(250,250,248,0.66) 44%, rgba(250,250,248,0.00) 66%), linear-gradient(90deg, rgba(250,250,248,0.10) 0%, rgba(250,250,248,0.45) 45%, rgba(250,250,248,0.88) 72%, rgba(250,250,248,0.96) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* Apilado no hay «izquierda» ni «derecha»: la tarjeta ocupa el ancho y la captura queda detrás, así que el velo pasa a ser parejo y más denso. */ @media (max-width: 1023px) { .reg-band::before { background: rgba(250,250,248,0.92); } } .reg-band > * { position: relative; z-index: 1; } /* ---------- el indicador de pasos ---------- */ .reg-steps { list-style: none; margin: 0 0 2.25rem; padding: 0; display: flex; align-items: center; gap: 0.5rem; } .reg-step-dot { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-400); transition: color 0.3s var(--ease-out-expo); } /* Los pasos se reparten todo el ancho: cada uno menos el último crece, y lo que crece es la rayita de dentro. Así el 1 queda pegado al borde izquierdo y el último al derecho, midan lo que midan los rótulos. */ .reg-step-dot:not(:last-child) { flex: 1 1 auto; min-inline-size: 0; } /* La rayita entre pasos. Va en ::after del anterior y no como elemento suelto para que no la lea un lector de pantalla: no dice nada que no diga ya el número. */ .reg-step-dot:not(:last-child)::after { content: ""; flex: 1 1 auto; min-inline-size: 1.25rem; block-size: 2px; margin-inline-start: 0.4rem; background: var(--ink-200); border-radius: 2px; } .reg-step-num { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ink-100); color: var(--ink-500); font-size: 0.8125rem; font-weight: 700; transition: background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo); } .reg-step-dot.is-activa { color: var(--ink-900); } .reg-step-dot.is-activa .reg-step-num { background: var(--brand-gradient); color: #fff; } .reg-step-dot.is-hecha .reg-step-num { background: var(--brand-blue); color: #fff; } .reg-step-dot.is-hecha { color: var(--ink-700); } /* En pantalla estrecha se quedan los números: tres rótulos no caben y se parten en dos líneas cada uno. El nombre del paso lo sigue diciendo el

de dentro. */ @media (max-width: 479px) { .reg-step-txt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .reg-step-dot:not(:last-child)::after { inline-size: 1rem; } } /* ---------- pie del formulario ---------- */ .reg-buttons { display: flex; align-items: center; gap: 0.75rem; margin-block-start: 2rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--ink-200); } /* La nota empuja los botones a la derecha y se queda ella a la izquierda; con «Atrás» presente, se coloca en medio. */ .reg-note { margin-inline-end: auto; } .reg-error { margin-block-start: 1.25rem; padding: 0.7rem 0.95rem; border-radius: 12px; border: 1px solid #FECACA; background: #FEF2F2; color: #991B1B; font-size: 0.875rem; } /* El botón de enviar mientras se espera a la API: aro girando en lugar de la flecha. El aro está siempre en el marcado y solo se enseña con .is-cargando, así no hay que crearlo. */ .reg-spinner { display: none; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } .btn.is-cargando { cursor: progress; } .btn.is-cargando .reg-spinner { display: inline-block; } .btn.is-cargando .arrow { display: none; } /* El formulario bloqueado (inert) se ve apagado, para que se note que no se puede tocar. */ [data-reg-form][aria-busy="true"] [data-reg-step] { opacity: 0.55; transition: opacity 0.2s; } /* Con menos movimiento el aro sigue girando, más despacio: es lo único que dice que algo pasa. */ @media (prefers-reduced-motion: reduce) { .reg-spinner { animation-duration: 1.6s; } } /* ---------- la confirmación ---------- */ .reg-success { text-align: center; padding-block: 1.5rem; } .reg-tick { display: inline-block; inline-size: 88px; block-size: 88px; } .reg-tick svg { inline-size: 100%; block-size: 100%; } .reg-tick-ring { stroke: var(--brand-blue); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; } .reg-tick-check { stroke: var(--brand-blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; } /* Se dibuja el aro y después la marca. Las dos con dashoffset, que es lo que anima un trazo sin repintar nada: solo se mueve una propiedad y no toca el diseño de la caja. */ .reg-success.is-visible .reg-tick-ring { animation: reg-trazo 0.55s var(--ease-out-expo) forwards; } .reg-success.is-visible .reg-tick-check { animation: reg-trazo 0.35s var(--ease-out-expo) 0.45s forwards; } .reg-success.is-visible h2, .reg-success.is-visible p { animation: reg-entra 0.45s var(--ease-out-expo) 0.6s both; } .reg-success.is-visible .reg-accesos { animation: reg-entra 0.45s var(--ease-out-expo) 0.75s both; } @keyframes reg-trazo { to { stroke-dashoffset: 0; } } @keyframes reg-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* --- las dos puertas de entrada tras registrarse ------------------------------------------- Una por aplicación. Vienen de una tarjeta y no de un botón suelto porque lo que hay que decidir aquí es «quién soy», no «qué hago»: la etiqueta ayuda tanto como el destino. La tarjeta ENTERA es el enlace, así que no lleva botón dentro: con una sola acción por caja, un botón sería un segundo enlace al mismo sitio. «Entrar» se queda como señal de que se puede pulsar, y se mueve al pasar por encima como el resto de flechas del sitio. Van alineadas a la izquierda dentro de un panel centrado: el texto de dos líneas centrado se lee peor, y son dos fichas para comparar, no un titular. */ .reg-accesos { display: grid; gap: 1rem; margin-top: 2.25rem; text-align: left; } @media (min-width: 640px) { .reg-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .reg-acceso { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icono texto" "ir ir"; gap: 0.35rem 1rem; padding: 1.35rem 1.4rem; border: 1px solid var(--ink-200); border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-out-expo); } .reg-acceso:hover { border-color: var(--brand-blue); box-shadow: 0 18px 38px -22px rgba(10, 10, 11, 0.28); transform: translateY(-2px); } .reg-acceso:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; } .reg-acceso-icono { grid-area: icono; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 14px; background: var(--brand-gradient); color: #fff; } .reg-acceso-icono svg { inline-size: 1.4rem; block-size: 1.4rem; } .reg-acceso-txt { grid-area: texto; display: grid; gap: 0.3rem; align-content: center; } .reg-acceso-tit { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--ink-900); line-height: 1.25; } .reg-acceso-sub { font-size: 0.85rem; color: var(--ink-500); line-height: 1.45; } /* «Entrar» baja a su propia fila y ocupa el ancho: así las dos tarjetas lo tienen a la misma altura aunque una descripción ocupe dos líneas y la otra una. */ .reg-acceso-ir { grid-area: ir; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--ink-100); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--brand-blue-texto); } .reg-acceso:hover .reg-acceso-ir { color: var(--ink-900); } .reg-acceso .arrow { transition: transform 0.25s var(--ease-out-expo); display: inline-block; } .reg-acceso:hover .arrow { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .reg-acceso, .reg-acceso .arrow { transition: none; } .reg-acceso:hover { transform: none; } } /* El confeti. Cubre la banda entera, no la tarjeta, para que caiga de arriba abajo de la pantalla. pointer-events a cero: es decoración y no debe estorbar al ratón. Las piezas las crea /js/registro.js, que es quien les pone color, sitio y tiempos al azar. */ .reg-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; } .reg-confetti i { position: absolute; inset-block-start: -6%; inline-size: 9px; block-size: 14px; border-radius: 2px; animation-name: reg-caer; animation-timing-function: linear; animation-fill-mode: forwards; } /* Cae, deriva de lado y gira. La opacidad se apaga al final para que no desaparezca de golpe al llegar abajo. */ @keyframes reg-caer { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(var(--reg-drift, 0), 115vh, 0) rotate(var(--reg-spin, 360deg)); opacity: 0; } } /* Quien pide menos movimiento ve el resultado, no el dibujo. */ @media (prefers-reduced-motion: reduce) { .reg-success.is-visible .reg-tick-ring, .reg-success.is-visible .reg-tick-check { animation: none; stroke-dashoffset: 0; } .reg-success.is-visible h2, .reg-success.is-visible p { animation: none; } } /* La composición del hero se sale un poco de su columna hacia la izquierda, que es donde hay aire: la rejilla del hero es de 12 y esta ocupa 5, y a tamaño real se quedaba pequeña. Crece hacia la izquierda y no hacia la derecha para no salirse del contenedor. Solo a partir de lg, que es cuando hay dos columnas. El 8% no es a ojo: con más, la caja de la imagen se metía encima de la última línea del titular —13 px a 1500 y 26 px a 1100, medidos sobre las líneas de texto, no sobre la caja del

, que ocupa las siete columnas aunque el texto no las llene—. Al pisarla, esa franja de texto deja de poder seleccionarse. */ @media (min-width: 1024px) { .hero-visual { inline-size: 108%; max-inline-size: none; margin-inline-start: -8%; } } .font-display { font-family: "Manrope", sans-serif; } .font-mono { font-family: "Inter", sans-serif; } /* gradient utilities */ /* Continuous brand gradient — single rule (no per-word splitting) */ .grad-text { background-image: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* «inline» y no «inline-block»: con inline-block la frase destacada es una sola caja atómica, así que en un título que se parte en varias líneas salta ENTERA a la línea siguiente en cuanto no cabe completa en la actual, aunque sobre sitio de sobra — «¿Teletrabajo o trabajo / presencial? / Gestiónalo en tiempo real.» en vez de repartir las palabras como el resto del titular. Con inline, el degradado se reparte palabra a palabra igual que el texto normal que lo rodea. La letra se pinta a traves del fondo, asi que solo se ve dentro de la caja del elemento. Con un interlineado ajustado (leading-tight y similares) la caja acaba en la linea base y las colas de la g, la q, la y o la p se quedaban cortadas. El relleno agranda la zona pintada; en un inline no suma altura de linea, asi que no hace falta compensarlo con un margen negativo —eso solo era necesario con inline-block— y además se aplica a CADA linea cuando la frase se reparte en varias, no solo a la ultima. */ padding-bottom: 0.16em; } .grad-bg { background: var(--brand-gradient); } .grad-bg-soft { background: linear-gradient(145deg, rgba(178,105,172,.12) 0%, rgba(58,165,190,.12) 50%, rgba(86,197,181,.12) 100%); } .brand-blob { position: absolute; width: 720px; height: 720px; border-radius: 50%; background: var(--brand-gradient); filter: blur(120px); opacity: 0.55; pointer-events: none; /* Sin will-change: ya no se mueven, y promocionar a capa propia una superficie de 720x720 desenfocada 120 px cuesta memoria de GPU para nada. */ } .brand-blob.sm { width: 380px; height: 380px; filter: blur(80px); opacity: 0.4; } /* En movil la mancha de 720px con top/right:-200px (fijado inline en el marcado del hero) seguia asomando por el borde segun el ancho del dispositivo. Mas desplazada queda fuera del todo. Solo la del hero (la grande, no la .sm de la esquina opuesta), y con !important porque hay que ganarle a ese inline style. */ @media (max-width: 640px) { .hero .brand-blob:not(.sm) { top: -450px !important; right: -450px !important; } } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.4rem; border-radius: var(--r-pill); font-weight: 600; font-size: 0.875rem; letter-spacing: -0.01em; transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background-color 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo); cursor: pointer; white-space: nowrap; text-decoration: none; } .btn .arrow { transition: transform 0.35s var(--ease-out-expo); display: inline-block; } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--ink-900); color: white; position: relative; border: 1px solid var(--ink-900); box-shadow: 0 1px 2px rgba(10,10,11,0.10); } /* la capa de degradado desborda 1px para tapar el borde por completo */ .btn-primary::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--brand-gradient); opacity: 0; transition: opacity 0.4s var(--ease-out-expo); z-index: 0; } .btn-primary > * { position: relative; z-index: 1; } .btn-primary:hover, .btn-primary:focus-visible { border-color: transparent; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(58,165,190,0.5), 0 6px 16px -10px rgba(178,105,172,0.4); } .btn-primary:hover::before, .btn-primary:focus-visible::before { opacity: 1; } .btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px -6px rgba(58,165,190,0.5); } .btn-ghost { background: transparent; color: var(--ink-900); border: 1px solid var(--ink-300); } .btn-ghost:hover, .btn-ghost:focus-visible { background: white; color: var(--ink-900); border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(10,10,11,0.35); } .btn-ghost:active { transform: translateY(0); box-shadow: none; } .btn-ghost .grad-bg { transition: transform 0.35s var(--ease-out-back); } .btn-ghost:hover .grad-bg { transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .btn, .btn::before, .btn .arrow, .btn-ghost .grad-bg { transition-duration: 0.01ms; } .btn:hover { transform: none; } } .btn-grad { background: var(--brand-gradient); color: white; border: none; } .btn-grad:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .btn-light { background: white; color: var(--ink-900); border: 1px solid rgba(255,255,255,0.2); } .btn-light:hover { transform: translateY(-2px); } /* header */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.25rem 0; transition: background-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1280px; margin: 0 auto; padding: 0.75rem 1rem 0.75rem 1.5rem; background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(10,10,11,0.06); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .site-header.scrolled .header-inner { background: rgba(255,255,255,0.92); box-shadow: 0 12px 30px -12px rgba(10,10,11,0.12); } .nav-link { font-size: 0.875rem; font-weight: 500; color: var(--ink-800); padding: 0.35rem 0.6rem; border-radius: var(--r-pill); transition: color 0.3s ease, background-color 0.3s ease; text-decoration: none; } .nav-link:hover, .nav-link.active { color: var(--brand-violet); } .logo svg { height: 18px; width: auto; display: block; } .logo-light svg path { fill: white !important; } /* ==== Megamenu ==== */ .site-header[data-mm-open] .header-inner { background: rgba(255,255,255,0.95); box-shadow: 0 12px 40px -10px rgba(10,10,11,0.10); } .mm-trigger { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: none; cursor: pointer; font-family: inherit; line-height: inherit; } .mm-trigger .mm-caret { transition: transform 0.3s ease; opacity: 0.6; } .mm-trigger[aria-expanded="true"] { color: var(--brand-violet); } .mm-trigger[aria-expanded="true"] .mm-caret { transform: rotate(180deg); } .megamenu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-8px); width: min(1180px, calc(100vw - 32px)); background: white; border: 1px solid var(--ink-200); border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(10,10,11,0.18), 0 16px 40px -16px rgba(10,10,11,0.10); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-out-expo), transform 0.45s var(--ease-out-expo); overflow: hidden; z-index: 60; } .site-header[data-mm-open] .megamenu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mm-inner { position: relative; } .mm-pane { display: none; padding: 1.4rem 1.5rem; } .mm-pane.active { display: block; animation: mmFade 0.28s ease both; } @keyframes mmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .mm-grid { /* El hueco entre columnas vive aqui porque el ancho de columna se calcula con el. */ --mm-gap: 2rem; /* Cuantas columnas trae el panel. Solo lo usa .mm-grid-muchas; aqui las pistas son cuatro siempre. Lo pone el marcado. */ --mm-cols: 4; display: grid; gap: var(--mm-gap); /* Cuatro pistas siempre, traiga el panel las columnas que traiga: las que sobran se quedan vacias. Hace falta para poder mandar la promo a la ultima, y de paso las columnas de enlaces caen en la misma reticula se pase al panel que se pase. Ninguna columna pasa del cuarto del panel, promo incluida. El 25 % pelado no vale: cuatro columnas al 25 % mas tres huecos de 2rem se salen del panel. Un cuarto del ancho ES la columna mas su parte del hueco, y a cada una de las cuatro le tocan tres cuartos de hueco, asi que el ancho util es 25% - 0.75 * gap. minmax(0, ...) y no el valor a secas: sin el, el minimo de una pista es su contenido y un titulo largo la ensanchaba por encima del tope. */ grid-template-columns: repeat(4, minmax(0, calc(25% - 0.75 * var(--mm-gap)))); height: 100%; } /* La promo, al borde derecho del panel. Las columnas de enlaces se colocan solas por orden desde la primera pista, asi que con una sola columna queda el hueco en medio y la promo pegada al canto, que es lo que se busca. */ .mm-grid .mm-col-cta { grid-column: 4; } /* Cinco o mas no caben a un cuarto cada una. Se reparten la fila a partes iguales, que con cinco ya es un quinto: por debajo del tope igualmente. */ /* Cinco o mas columnas: no caben a un cuarto cada una, asi que se reparten la fila a partes iguales —con cinco ya es un quinto, por debajo del tope igualmente— y la promo se queda donde le toque por orden, que con la fila llena es el borde derecho de todas formas. */ .mm-grid-muchas { grid-template-columns: repeat(var(--mm-cols), minmax(0, 1fr)); } .mm-grid-muchas .mm-col-cta { grid-column: auto; } .mm-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brand-blue-texto); margin-bottom: 1rem; } .mm-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.55rem; border-radius: 10px; text-decoration: none; color: var(--ink-900); transition: background 0.25s ease, transform 0.25s ease; } .mm-link:hover { background: var(--ink-100); } .mm-link-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--ink-100); display: grid; place-items: center; color: var(--ink-900); flex-shrink: 0; transition: background-color 0.3s ease, color 0.3s ease; } .mm-link:hover .mm-link-ic { background: var(--ink-900); color: white; } .mm-link-t { font-size: 0.92rem; font-weight: 600; line-height: 1.2; } .mm-link-d { font-size: 0.78rem; color: var(--ink-500); margin-top: 2px; } .mm-link-sm { align-items: center; gap: 0.85rem; font-size: 0.92rem; font-weight: 500; } .mm-num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.78rem; color: transparent; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; width: 22px; } /* Featured product card */ .mm-feat { display: block; position: relative; border-radius: 18px; padding: 1.25rem; height: 100%; text-decoration: none; color: white; overflow: hidden; transition: transform 0.4s var(--ease-out-expo); } .mm-feat:hover { transform: translateY(-2px); } .mm-feat-bg { position: absolute; inset: 0; background: var(--brand-gradient); } .mm-feat-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.3), transparent 50%), radial-gradient(circle at 0% 100%, rgba(0,0,0,0.15), transparent 50%); } .mm-feat-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; } .mm-feat-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; margin-bottom: 1rem; } .mm-feat-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.25rem; margin-bottom: 0.4rem; line-height: 1.15; } .mm-feat-desc { font-size: 0.82rem; line-height: 1.5; opacity: 0.85; flex: 1; margin-bottom: 0.75rem; } .mm-feat-cta { font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; } .mm-feat-cta .arrow { transition: transform 0.3s ease; } .mm-feat:hover .mm-feat-cta .arrow { transform: translateX(4px); } /* CTA col / promo */ .mm-col-cta { display: flex; flex-direction: column; } .mm-promo { position: relative; overflow: hidden; border-radius: 18px; padding: 1.25rem; background: var(--ink-900); color: white; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; } .mm-promo > .mm-promo-bg { position: absolute; bottom: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: var(--brand-gradient); filter: blur(40px); opacity: 0.55; } .mm-promo.light { background: var(--ink-100); color: var(--ink-900); border: 1px solid var(--ink-200); } /* Promo con foto de fondo. La imagen va en el fondo del propio contenedor y encima un velo oscuro, porque el texto es pequeno y sobre una foto a pelo no se lee. El velo es oscuro de arriba abajo y no solo en la parte baja: la caja mide poco mas de 200px y el texto la ocupa casi entera, asi que un degradado que solo cargue al final deja el antetitulo y media linea del titulo sobre la foto limpia. Con estos valores el texto blanco pasa de 7:1 sobre cualquier foto, incluida una cocina a plena luz. */ .mm-promo.has-image { background-color: var(--ink-900); background-image: var(--promo-foto); background-size: cover; background-position: center; color: white; } .mm-promo > .mm-promo-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0.35) 0%, rgba(8,8,10,0.5) 45%, rgba(8,8,10,0.75) 100%); } /* El contenido va por encima de los fondos. Los dos fondos se excluyen a mano: son hijos directos tambien, y sin esto este comodin —que va despues y empata en especificidad— les quitaba el «position: absolute» y los dejaba sin tamano. */ .mm-promo > *:not(.mm-promo-bg):not(.mm-promo-velo) { position: relative; } @media (max-width: 1100px) { .megamenu { display: none; } .mm-trigger .mm-caret { display: none; } } /* pill — etiqueta de estado (dispositivos, «en activo»…). Era blanca con borde gris, el mismo traje que tenían .tag y los botones. Ahora va sin borde, con un fondo tenue de marca y el texto en el azul corporativo, para que se lea como una marca de estado y no como un botón. La .hero-pill mantiene su propia variante con borde menta porque ahí sí es el elemento protagonista. */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: var(--r-pill); background: rgba(58,165,190,0.10); border: 1px solid transparent; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: var(--brand-blue-texto); } .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gradient); position: relative; } /* El aro que late. Antes era un box-shadow animado de 4px a 8px de extension: cada fotograma pedia recalculo de estilo y repintado, y esto esta siempre en pantalla. Ahora es un pseudoelemento del tamano del aro grande que escala y se apaga —solo transform y opacity, o sea compositor—. Va detras del punto con z-index negativo, que tiene fondo opaco y lo tapa. */ .pill .dot::after, .dot-live::after { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 50%; background: var(--dot-aro, rgba(58,165,190,0.15)); animation: pulse-aro 2.4s ease-in-out infinite; pointer-events: none; } @keyframes pulse-aro { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.3; } } /* hero-pill — la pastilla de estado del hero. Era la .pill genérica: blanca con borde gris, indistinguible del resto de cápsulas de la página. Ahora lleva un tinte de marca y el borde en menta, que es el color del punto que ya parpadea al lado, así que el conjunto se lee como un indicador «en vigor». */ .hero-pill { background: linear-gradient(90deg, rgba(86,197,181,0.14), rgba(58,165,190,0.09)); border-color: rgba(86,197,181,0.35); color: var(--ink-700); font-weight: 600; padding: 0.5rem 1rem 0.5rem 0.85rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* live dot — verde, parpadeo (pill del hero + badges "en activo") */ .dot-live { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; position: relative; background: var(--brand-mint); --dot-aro: rgba(86,197,181,0.18); animation: dot-live 2.4s ease-in-out infinite; } /* Mismo aro, en menta: solo cambia el color del pseudoelemento. El punto ademas se apaga un poco, y animar la opacidad del propio elemento tampoco cuesta layout. */ .pill .dot.dot-live { background: var(--brand-mint); } @keyframes dot-live { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* Sin movimiento el aro se queda en reposo, que es exactamente el aro de 4px de siempre. */ @media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } .pill .dot::after, .dot-live::after { animation: none; } } /* Las cifras que cuentan llevan digitos de ancho fijo: si no, cada numero nuevo mide distinto y recoloca lo que tenga al lado mientras sube. El ancho de la caja lo reserva ademas animations.js midiendo el valor final. */ [data-count] { font-variant-numeric: tabular-nums; } /* hero — barra de prueba social */ .hero-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.15rem; max-width: 100%; background: transparent; } .hm-item { display: flex; align-items: center; gap: 0.6rem; } .hm-sep { width: 1px; height: 30px; flex: none; background: linear-gradient(to bottom, transparent, var(--ink-200) 25%, var(--ink-200) 75%, transparent); } .hm-val { display: block; font-family: "Manrope", sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-900); } .hm-label { display: block; font-size: 0.75rem; line-height: 1.25; color: var(--ink-500); } .hm-avatars { display: flex; } .color1{ background:var(--brand-violet) } .color2{ background:var(--brand-blue) } .color3{ background:var(--brand-mint) } .hm-avatars > span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid white; margin-left: -8px; transition: transform 0.35s var(--ease-out-expo); } .hm-avatars > span:first-child { margin-left: 0; } .hero-meta:hover .hm-avatars > span { transform: translateY(-2px); } .hm-avatars > span:nth-child(2) { transition-delay: 0.04s; } .hm-avatars > span:nth-child(3) { transition-delay: 0.08s; } .hm-avatars > span:nth-child(4) { transition-delay: 0.12s; } .hm-more { display: grid; place-items: center; background: var(--ink-100); font-size: 10px; font-weight: 700; color: var(--ink-900); } .hm-stars { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 0.35rem; } .hm-link { text-decoration: none; transition: opacity 0.3s ease; } /* Sin subrayado en reposo: el bloque entero es pulsable y se lee como tal, no como un enlace dentro de un texto. Se mantiene al pasar por encima para que siga habiendo señal de que lleva a algún sitio. */ .hm-link .hm-label { text-underline-offset: 3px; text-decoration-color: var(--ink-300); } .hm-link:hover .hm-label { text-decoration: underline; } .hm-link:hover { opacity: 0.75; } .hm-link:hover .hm-label { text-decoration-color: var(--brand-blue); color: var(--brand-blue); } @media (max-width: 767px) { .hero-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; width: 100%; } .hm-sep { display: none; } } /* tag — antetítulo de sección. Era una cápsula con borde, igual de pesada que los botones y las pastillas, y competía con el titular que introduce. Ahora es una línea de marca y el texto en color corporativo: pesa menos y se distingue de .pill de un vistazo. Se centra bien porque la línea va dentro del propio inline-flex. */ .tag { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-blue-texto); /* La separacion con el titular la define la propia etiqueta, en un solo sitio. Antes salia de sumar el mb-4/5/6 de la etiqueta y el mt-4/5 del titular: entre 2 y 2,75rem, que la dejaba flotando lejos del titulo al que introduce. */ margin-bottom: 0.6rem; } .tag::before { content: ""; width: 1.75rem; height: 2px; flex: none; border-radius: 2px; background: var(--brand-gradient); } /* Sobre fondo oscuro la utilidad !text-white pisa el color; la línea se aclara aquí. */ .tag.\!text-white::before { background: rgba(255,255,255,0.5); } /* Sin línea cuando el encabezado va centrado: ahí la raya descoloca el eje óptico y el antetítulo se lee mejor solo. Se engancha a .text-center, que es la clase que emite blocks/_encabezado y la que usan las secciones centradas escritas a mano, así que no hay que marcar uno por uno los 26 usos de .tag. */ .text-center .tag::before { display: none; } /* cards */ .card { background: white; border: 1px solid var(--ink-200); border-radius: 22px; padding: 1.75rem; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.5s var(--ease-out-expo); position: relative; overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(58,165,190,0.4); } /* Cabecera y cuerpo de una tarjeta partida en dos. Nacio en las calculadoras y se sube aqui porque tambien la usan bloques del sitio: asi hay una sola definicion. La tarjeta va sobre blanco y sin franja de color, con un filete que separa la cabecera del cuerpo y la misma barrita de degradado que lleva el antetitulo .tag. Requiere que el .card no traiga su padding: en Razor, .card.!p-0. */ .card .head { position: relative; background: linear-gradient(180deg, var(--ink-50), #fff); color: var(--ink-900); border-bottom: 1px solid var(--ink-200); padding: 1.1rem 1.4rem 0.95rem; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.75rem; } .card .head::after { content: ""; position: absolute; left: 1.4rem; bottom: -1px; width: 2.25rem; height: 2px; border-radius: 2px; background: var(--brand-gradient); } .card .body { padding: 1.4rem; } /* El fondo y el cuadro del icono los puede cambiar «Apariencia» de la rejilla, que escribe --tj-bg y --tj-icon en el contenedor. Sin nada escrito queda lo de siempre: tarjeta blanca e icono sobre el degradado de marca. */ .feature-card { background: var(--tj-bg, white); border: 1px solid var(--tj-border, var(--ink-200)); border-radius: 22px; padding: 1.75rem; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.5s var(--ease-out-expo), background-color 0.5s var(--ease-out-expo); position: relative; overflow: hidden; } /* El cuadro del icono. Sustituye a .grad-bg en el interior de la tarjeta para que el color sea configurable; en el resto del sitio .grad-bg sigue como estaba. */ .tj-icon { background: var(--tj-icon, var(--brand-gradient)); } /* «Corporativo»: la tarjeta se viste con la familia .tc-*, la de la fila de beneficios de la portada. El tono lo pone la plantilla como clase, y esa clase solo declara variables; que hace cada una se decide aqui. El filete va del color del fondo, como en los tintes planos: el gris de --ink-200 alrededor de un color se lee como un recuadro suelto. El cuadro del icono usa --tc-ink, el tono oscuro de la misma familia: con el glifo en blanco pasa de sobra el contraste, y --tc-pill se queda demasiado claro para eso. */ /* «Auto»: una sola linea con tantas columnas como tarjetas, todas del mismo ancho —cinco tarjetas, un 20 % cada una—. El numero lo pone la plantilla en --tj-cols, porque depende del contenido y no puede salir de una utilidad de Tailwind, que se generan de antemano. minmax(0, 1fr) y no 1fr a secas: el minimo por defecto de una columna es su contenido, y con un titular largo esa columna se comia a las demas y ya no median igual. Solo se estiran a una linea a partir de 1024 px. Por debajo no caben: con seis tarjetas tocarian a 50 px de ancho. */ .tj-auto { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; } @media (min-width: 640px) { .tj-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .tj-auto { grid-template-columns: repeat(var(--tj-cols, 3), minmax(0, 1fr)); } } /* Tarjeta con foto: columna, con la foto arriba y el texto abajo del todo. La rejilla ya iguala las alturas de una fila, asi que el reparto es lo unico que faltaba para que los textos de tarjetas vecinas arranquen a la misma altura. */ .feature-card.tj-with-image { display: flex; flex-direction: column; justify-content: space-between; /* Gana a items-start, que trae la variante «Icono al lado del titulo» en el atributo class: en columna ese valor encoge cada hijo a su contenido y el parrafo se desbordaba. */ align-items: stretch; } .feature-card.tj-corp-bg { background: var(--tc-box); border-color: var(--tc-box); } .feature-card.tj-corp-icon .tj-icon { background: var(--tc-ink); } /* Variante «Centrado»: el texto al centro y el cuadro del icono con él. El icono es el primer hijo y tiene ancho fijo, así que basta con los márgenes automáticos. */ .tj-centered { text-align: center; } .tj-centered > span:first-child { margin-inline: auto; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(58,165,190,0.4); } .feature-card:hover .icon-wrap { transform: rotate(-6deg) scale(1.08); } .feature-card .icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: var(--ink-100); display: flex; align-items: center; justify-content: center; transition: transform 0.5s var(--ease-out-back); margin-bottom: 1.25rem; color: var(--ink-900); } .feature-card.dark { background: var(--ink-900); color: white; border-color: var(--ink-800); } .feature-card.dark .icon-wrap { background: rgba(255,255,255,0.08); color: white; } .feature-card.brand { background: var(--brand-gradient); color: white; border-color: transparent; } .feature-card.brand .icon-wrap { background: rgba(255,255,255,0.18); color: white; } /* marquee */ .marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; flex-shrink: 0; gap: 4rem; animation: marquee 38s linear infinite; padding-right: 4rem; align-items: center; } /* Cada logo ocupa la misma casilla. Los originales van desde algo casi cuadrado (EPTA) hasta una banda muy alargada (KRONOS HOMES), y como el marcado solo fijaba la altura, la anchura la decidía la proporción de cada archivo: unos salían diminutos y otros se desbordaban. Aquí se fija la caja y la imagen se ajusta dentro con object-fit, que respeta la proporción y nunca recorta. */ .marquee-logo { --logo-ancho: 9rem; --logo-alto: 3.75rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: var(--logo-ancho); max-width: var(--logo-ancho); min-height: var(--logo-alto); max-height: var(--logo-alto); /* Ademas del min y el max hace falta la altura explicita: un max-height no cuenta como altura definida, y sin ella el max-height:100% del hijo no resuelve y la imagen se sale. Es justo lo que pasaba: EPTA se pintaba a 167 px dentro de una caja de 40. */ height: var(--logo-alto); } .marquee-logo img { width: auto; height: auto; max-width: 100%; /* En unidades absolutas por lo mismo: el porcentaje depende de que el padre tenga altura definida y aqui no se quiere depender de eso. */ max-height: var(--logo-alto); object-fit: contain; } /* Empresa sin logotipo: se pinta el nombre y ahí la casilla fija no sirve, porque un nombre largo no cabe en 9rem. Conserva la altura para que la fila no baile. */ .marquee-logo-text { min-width: 0; max-width: none; white-space: nowrap; } @keyframes marquee { to { transform: translateX(-100%); } } /* WCAG 2.2.2: un bucle de 38s sin forma de pararlo molesta a quien tiene problemas vestibulares o de atención. site.js ya la pausa al pasar el ratón o el foco, pero eso no ayuda a quien ha pedido menos movimiento al sistema y ni siquiera llega a tocarla. */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation-play-state: paused; } } /* phone */ .phone { position: relative; width: 290px; height: 600px; border-radius: 48px; background: linear-gradient(160deg, #18181B, #0A0A0B); padding: 12px; box-shadow: 0 50px 120px -30px rgba(58,165,190,0.45), 0 30px 60px -30px rgba(178,105,172,0.35), inset 0 0 0 1px rgba(255,255,255,0.05); } .phone .screen { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--ink-50); position: relative; } .phone .notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #0A0A0B; border-radius: var(--r-pill); z-index: 2; } /* app mockup */ .app-mockup { height: 100%; background: #EFEFEF; display: flex; flex-direction: column; position: relative; overflow: hidden; } .app-status { padding: 14px 22px 6px; display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; font-weight: 600; color: #0A0A0B; } /* Branded gradient header (replicates real Trackpeople app) */ .app-grad-head { position: relative; padding: 18px 20px 28px; color: white; overflow: hidden; margin-bottom: -10px; } .app-grad-head .grad-head-bg { position: absolute; inset: 0; background: var(--brand-gradient); z-index: 0; } .app-grad-head .grad-head-deco { position: absolute; right: -18px; top: -18px; width: 74px; height: 74px; border-radius: 14px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 6px); transform: rotate(12deg); z-index: 1; } .app-grad-head .grad-head-content { position: relative; z-index: 2; } .app-grad-head .grad-head-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .app-grad-head .grad-head-burger { display: flex; flex-direction: column; gap: 3px; padding: 4px; } .app-grad-head .grad-head-burger span { width: 18px; height: 2px; background: white; border-radius: 2px; } .app-grad-head .grad-head-mark { width: 36px; height: 36px; } .app-grad-head .grad-head-name { text-align: center; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .app-grad-head .grad-head-org { text-align: center; font-size: 0.66rem; letter-spacing: 0.16em; opacity: 0.85; margin-top: 2px; font-weight: 500; } /* Jornada prevista card */ .jp-card { margin: 14px 14px 12px; background: white; border-radius: 16px; padding: 14px 14px; box-shadow: 0 4px 14px -6px rgba(10,10,11,0.08); } .jp-title { text-align: center; color: #2DA4B8; font-weight: 700; font-size: 0.9rem; padding-bottom: 10px; border-bottom: 1px solid #EAEAEC; } .jp-row { display: flex; justify-content: center; gap: 6px; padding-top: 12px; flex-wrap: nowrap; } .jp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } .jp-chip-mint { background: rgba(86,197,181,0.18); color: #2A9A8C; } .jp-chip-pink { background: rgba(178,105,172,0.18); color: #9C4F95; } /* Timeline card */ .tl-card { margin: 0 12px; background: white; border-radius: 16px; padding: 18px 12px 14px; box-shadow: 0 4px 14px -6px rgba(10,10,11,0.08); position: relative; } .tl-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 14px; background: #B269AC; color: white; border-radius: 999px; padding: 9px 28px; font-weight: 700; font-size: 0.92rem; box-shadow: 0 6px 16px -4px rgba(178,105,172,0.45); cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; } .tl-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -4px rgba(178,105,172,0.55); } .tl { position: relative; padding: 4px 4px 8px 12px; } .tl-line { position: absolute; left: 62px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(to bottom, #56C5B5 0%, #E9C765 50%, #56C5B5 100%); border-radius: 2px; } .tl-item { display: grid; grid-template-columns: 36px 14px 32px 1fr 16px; align-items: center; gap: 5px; padding: 7px 0; font-size: 0.76rem; } .tl-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 5px; background: #DCEEF0; color: #2A8CA0; border-radius: 6px; font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; } .tl-pill-empty { background: transparent; } .tl-dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 1px rgba(10,10,11,0.08); justify-self: center; } .tl-dot-mint { background: #56C5B5; } .tl-dot-yellow { background: #E9C765; } .tl-time { font-weight: 600; color: #0A0A0B; font-variant-numeric: tabular-nums; } .tl-label { color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-edit { color: #999; justify-self: end; } .tl-total { margin-top: 8px; background: linear-gradient(135deg, #2DA4B8 0%, #3AA5BE 100%); color: white; border-radius: 14px; padding: 13px 16px; display: flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; } .tl-total-num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex-shrink: 0; } .tl-total-lbl { font-size: 0.72rem; opacity: 0.92; font-weight: 500; white-space: nowrap; } /* Hero stage perspective for 3D tilt */ .hero-stage { perspective: 1400px; transform-style: preserve-3d; } .phone { z-index: 1; } .phone { transform-style: preserve-3d; will-change: transform; transition: box-shadow 0.5s var(--ease-out-expo); } .phone .screen { transform: translateZ(1px); } /* Floating bubbles around phone */ .float-bub { position: absolute; background: white; border: 1px solid var(--ink-200); border-radius: 16px; padding: 12px 14px; z-index: 30; transform: translateZ(60px); opacity: 0; will-change: transform; pointer-events: none; } .app-mockup-img { position: relative; width: 100%; height: 100%; overflow: hidden; background: #2EAFC2; } .app-screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .app-screen-img.active { opacity: 1; } .fb-1 { top: 60px; left: -40px; display: flex; align-items: center; gap: 12px; } .fb-2 { bottom: 80px; right: -30px; padding: 14px 16px; } .fb-3 { top: 200px; right: -50px; padding: 10px 14px; } .fb-4 { bottom: 30px; left: -10px; padding: 10px 16px; } /* Live ping on last timeline dot */ .tl-item:last-child .tl-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--brand-mint); animation: tlPing 1.8s ease-out infinite; } .tl-item .tl-dot { position: relative; } @keyframes tlPing { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } } /* Toast bubble (notification that pops in/out during cycle) */ .phone-toast { position: absolute; top: 90px; left: 50%; transform: translate(-50%, -120%); background: rgba(10, 10, 11, 0.94); color: white; padding: 10px 14px; border-radius: 14px; display: flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(10,10,11,0.4); z-index: 10; opacity: 0; pointer-events: none; } .phone-toast .pt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-mint); box-shadow: 0 0 0 0 rgba(86,197,181, 0.7); animation: live 1.4s ease-out infinite; } /* Phone overlays: side menu + bottom sheet (animated states) */ .ph-overlay { position: absolute; inset: 0; pointer-events: none; } .ph-scrim { position: absolute; inset: 0; background: rgba(10,10,11,0.28); opacity: 0; } .ph-side { position: absolute; top: 0; bottom: 0; left: 0; width: 76%; background: linear-gradient(170deg, #3AA5BE 0%, #56C5B5 55%, #b269ac 130%); color: white; border-top-right-radius: 22px; border-bottom-right-radius: 22px; padding: 46px 16px 14px; box-shadow: 0 0 40px rgba(10,10,11,0.25); display: flex; flex-direction: column; } .ph-side-user { display: flex; align-items: center; gap: 10px; padding: 0 4px 14px; border-bottom: 1px solid rgba(255,255,255,0.18); } .ph-side-ava { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#f4d3b0,#c79071); flex-shrink: 0; border: 2px solid white; } .ph-side-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.82rem; line-height: 1.1; } .ph-side-list { list-style: none; padding: 10px 0 0; margin: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; } .ph-side-list li { display: flex; align-items: center; gap: 10px; padding: 9px 6px; font-size: 0.78rem; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.10); } .ph-side-list svg { opacity: 0.95; } .ph-side-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 10px; background: rgba(255,255,255,0.10); border-radius: 10px; font-size: 0.78rem; font-weight: 600; } .ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: white; border-top-left-radius: 18px; border-top-right-radius: 18px; padding: 14px 0 24px; box-shadow: 0 -10px 30px rgba(10,10,11,0.18); } .ph-sheet-grab { width: 38px; height: 4px; border-radius: 4px; background: #E4E4E7; margin: 0 auto 8px; } .ph-sheet-title { text-align: center; font-size: 0.72rem; color: #71717A; padding: 6px 0; border-bottom: 1px solid #F4F4F5; } .ph-sheet-opt { text-align: center; padding: 14px 16px; font-size: 0.92rem; font-weight: 600; color: #3AA5BE; border-bottom: 1px solid #F4F4F5; } .ph-sheet-opt:last-child { border-bottom: none; color: #B269AC; } .ph-sheet-opt .ph-opt-ic { display: inline-block; margin-right: 6px; vertical-align: -2px; } @media (max-width: 768px) { .float-bub { display: none; } } @media (max-width: 1100px) { .fb-3, .fb-4 { display: none; } } /* tier */ .tier { background: white; border: 1px solid var(--ink-200); border-radius: 32px; padding: 2rem; display: flex; flex-direction: column; transition: transform 0.5s var(--ease-out-expo), background-color 0.5s var(--ease-out-expo), border-color 0.5s var(--ease-out-expo), color 0.5s var(--ease-out-expo); position: relative; } .tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* El degradado de marca tal cual, con el contenido en blanco. AVISO, por si alguien viene a tocar esto: el blanco sobre este degradado da 2,09:1 en el extremo mint y 3,81:1 en el violeta, por debajo del 4,5:1 que pide WCAG 1.4.3 para texto normal. Esta asi a peticion expresa, sabiendo el coste. Solo hay tres salidas y las tres pasan por cambiar una de las dos cosas: bajarle luz al degradado (al 62 % el blanco ya pasa), poner el texto oscuro (5,19:1 a 9,47:1) o meter un velo entre fondo y texto. Por eso los blancos van todos puros, sin opacidades: aqui no sobra ni un punto de contraste y la jerarquia la marcan el tamaño y el peso, que no cuestan nada. */ .tier.featured { background: var(--brand-gradient); color: white; border-color: transparent; transform: scale(1.04); z-index: 2; } .tier.featured:hover { transform: scale(1.04) translateY(-6px); } .tier .badge-pop { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--brand-gradient); color: white; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 0.9rem; border-radius: var(--r-pill); } .tier .tier-name { font-size: 0.85rem; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1.1rem; } .tier.featured .tier-name { color: white; } .tier .tier-price { display: flex; align-items: baseline; gap: 0.6rem; font-family: "Manrope", sans-serif; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } /* Dos cosas apretaban «/usuario · mes» contra la cifra: · el hueco de 0,4rem, que a 3,4rem de cifra se queda en nada -> 0,6rem; · el letter-spacing de -0,04em del contenedor, que se hereda. A 3,4rem cierra la cifra, que es lo que se busca, pero sobre una etiqueta de 0,9rem junta las letras hasta que el punto medio toca las palabras. Aqui se devuelve a normal. */ .tier .tier-price-suf { font-size: 0.9rem; font-weight: 500; color: var(--ink-500); letter-spacing: normal; white-space: nowrap; } .tier.featured .tier-price-suf { color: white; } /* La cifra iba en .grad-text, que pinta el degradado sobre el propio texto: encima de un fondo de degradado no se distingue nada. En la destacada se pinta plana y oscura. */ .tier.featured .tier-price .grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: white; } /* El distintivo llevaba el degradado, que sobre la tarjeta de degradado desaparecia. */ .tier.featured .badge-pop { background: var(--ink-900); color: white; } .tier .tier-feat { list-style: none; padding: 0; margin: 1.75rem 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .tier .tier-feat li { position: relative; padding-left: 1.7rem; font-size: 0.92rem; color: var(--ink-700); line-height: 1.45; } .tier.featured .tier-feat li { color: white; } /* El parrafo de apoyo, debajo del precio. Lleva su color aqui y no una clase de utilidad en el marcado, para que no haya dos sitios donde mirar cuando cambie el fondo. */ .tier.featured > p { color: white; } /* La marca: disco del azul de marca con el glifo en blanco sobre las tarjetas blancas, y al reves —disco blanco, glifo azul— sobre la destacada. El trazo sube de 2 a 2,4: el azul de marca y el blanco se quedan en 2,87:1 entre si, y con el trazo fino el glifo se deshacia. */ .tier .tier-feat li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-blue); background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: 12px; } .tier.featured .tier-feat li::before { background-color: white; background-image: url("data:image/svg+xml;utf8,"); } /* faq */ .faq-item { border-bottom: 1px solid var(--ink-200); padding: 1.5rem 0; cursor: pointer; } .faq-item .faq-q { display: flex; justify-content: space-between; align-items: center; font-family: "Manrope", sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--ink-900); gap: 1rem; } .faq-item .faq-q .toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink-300); display: flex; align-items: center; justify-content: center; transition: background-color 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); flex-shrink: 0; } .faq-item .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out-expo), margin-top 0.5s ease; color: var(--ink-500); font-size: 0.96rem; line-height: 1.65; } .faq-item.open .faq-a { max-height: 320px; margin-top: 1rem; } .faq-item.open .toggle { background: var(--ink-900); color: white; border-color: var(--ink-900); transform: rotate(45deg); } /* stat */ .stat-num { font-family: "Manrope", sans-serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .stat-num.grad-text [data-count] { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* dashboard */ .dash { background: white; border-radius: 32px; border: 1px solid var(--ink-200); box-shadow: var(--shadow-lg); overflow: hidden; width: 100%; } /* dash-bar — cabecera de la maqueta del panel. Eran los tres puntos grises de una ventana de macOS, que no dicen nada de la marca ni del producto. Se mantiene la metáfora de ventana pero con los tres colores de marca, y la ruta pasa de texto suelto a barra de direcciones, que es lo que se reconoce como navegador. Solo CSS: el marcado es el mismo en la home y en seccionDashboardVisual. */ .dash-bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ink-200); background: white; } .dash-bar .light { width: 8px; height: 8px; border-radius: 50%; } .dash-bar .light:nth-child(1) { background: var(--brand-violet); } .dash-bar .light:nth-child(2) { background: var(--brand-blue); } .dash-bar .light:nth-child(3) { background: var(--brand-mint); } /* 0,1,1 gana al ml-4 de Tailwind (0,1,0) sin necesidad de !important */ .dash-bar > div { flex: 1; min-width: 0; margin-left: 0.4rem; padding: 0.3rem 0.8rem; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--r-pill); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dash-body { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; } .dash-side { background: var(--ink-50); padding: 1.25rem; border-right: 1px solid var(--ink-200); } .side-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 0.85rem; color: var(--ink-700); margin-bottom: 2px; } .side-item.active { background: var(--ink-900); color: white; } .dash-main { padding: 1.5rem; } .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } .kpi { border: 1px solid var(--ink-200); border-radius: 14px; padding: 14px; background: white; } .kpi .k-label { font-size: 0.7rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.12em; } .kpi .k-num { font-family: "Manrope", sans-serif; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; } .kpi .k-trend { font-size: 0.75rem; color: #2da27a; font-weight: 600; } .chart { border: 1px solid var(--ink-200); border-radius: 14px; padding: 18px; } .chart-title { font-size: 0.92rem; font-weight: 600; margin-bottom: 14px; } /* ============================================================ MULTIDISPOSITIVO — tabs + panels de altura constante ============================================================ */ .dev-tabs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25rem; width: fit-content; margin-inline: auto; padding: 0.35rem; background: white; border: 1px solid var(--ink-200); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); max-width: 100%; } .dev-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border: 0; background: transparent; border-radius: var(--r-pill); font: inherit; font-size: 0.875rem; font-weight: 600; /* --ink-400 sobre blanco da 2,56:1, y estas son las pestañas que eligen que se ve en la portada: no son decoracion. --ink-500 da 4,83:1. */ color: var(--ink-500); white-space: nowrap; cursor: pointer; transition: color 0.3s var(--ease-out-expo), background-color 0.3s var(--ease-out-expo); } .dev-tab svg { transition: transform 0.35s var(--ease-out-back); } .dev-tab:hover { color: var(--ink-700); background: var(--ink-100); } .dev-tab.is-active { color: white; background: var(--brand-gradient); box-shadow: 0 8px 18px -10px rgba(58,165,190,0.75); } .dev-tab.is-active svg { transform: scale(1.08); } .dev-tabs-sep { color: var(--ink-300); flex: none; } /* En movil no caben las tres pestañas en una fila, y con flex-wrap la que sobra se caia a una segunda linea y rompia la forma de la pildora. Mejor deslizar: fila unica con scroll horizontal, igual que en .rec-filtros. */ @media (max-width: 640px) { .dev-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; justify-content: flex-start; } .dev-tabs::-webkit-scrollbar { display: none; } .dev-tab { flex: 0 0 auto; } } /* Las tres pestañas comparten celda de grid → la altura del bloque es siempre la del panel más alto y no salta al cambiar de tab. */ .dev-stage { display: grid; } .dev-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity 0.45s var(--ease-out-expo), transform 0.55s var(--ease-out-expo), visibility 0.45s; } .dev-panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* cada panel se estira a la altura del stage y su media queda centrada */ .dev-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; } @media (max-width: 640px) { .dev-media { min-height: 320px; } } @media (prefers-reduced-motion: reduce) { .dev-panel { transition-duration: 0.01ms; transform: none; } } /* burbujas flotantes de los paneles kiosko/web (CSS puro: no dependen de GSAP) */ .dev-bub { position: absolute; z-index: 30; display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--ink-200); border-radius: 16px; padding: 11px 14px; box-shadow: var(--shadow-lg); animation: devFloat 5s ease-in-out infinite; } .dev-bub.db-tl { top: 58px; left: -34px; } .dev-bub.db-br { bottom: 34px; right: -34px; animation-delay: 1.2s; animation-duration: 6s; } /* contenedor que ancla las burbujas al marco, no a la columna */ .dev-frame { position: relative; width: 100%; display: flex; justify-content: center; } .dev-frame.is-kiosk { max-width: 560px; } .dev-frame.is-browser { max-width: 620px; } @keyframes devFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (max-width: 1023px) { .dev-bub { display: none; } } @media (prefers-reduced-motion: reduce) { .dev-bub { animation: none; } } /* marco tablet — Modo Kiosko */ .kiosk { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; border-radius: 28px; padding: 14px; background: linear-gradient(160deg, #18181B, #0A0A0B); box-shadow: 0 50px 110px -35px rgba(58,165,190,0.45), 0 30px 60px -30px rgba(178,105,172,0.3), inset 0 0 0 1px rgba(255,255,255,0.06); } .kiosk-screen { position: relative; height: 100%; border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, #0f172a, #1e293b); display: flex; align-items: center; justify-content: center; } /* vídeo de producto dentro de cualquiera de los tres marcos */ .dev-video { width: 100%; height: 100%; object-fit: cover; display: block; } .kiosk-screen > .dev-video { position: absolute; inset: 0; } .app-mockup-img > .dev-video { position: absolute; inset: 0; } .kiosk-glow { position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, rgba(58,165,190,0.35), rgba(178,105,172,0.35)); filter: blur(45px); pointer-events: none; } .kiosk-ui { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 26px; padding: 22px 26px; width: 100%; } .kiosk-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .kiosk-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-gradient); display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(58,165,190,0.55); } .kiosk-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.95rem; color: white; letter-spacing: -0.01em; } .kiosk-sub { font-size: 0.68rem; color: rgba(255,255,255,0.5); } .kiosk-user { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); } .kiosk-ava { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#f4d3b0,#c79071); flex: none; } .kiosk-user-name { font-size: 0.76rem; font-weight: 600; color: white; line-height: 1.2; } .kiosk-user-role { font-size: 0.62rem; color: rgba(255,255,255,0.45); } .kiosk-pin { display: flex; gap: 8px; margin: 14px 0 4px; } .kiosk-pin span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); animation: kioskPin 4s ease-in-out infinite; } .kiosk-pin span:nth-child(1) { animation-delay: 0s; } .kiosk-pin span:nth-child(2) { animation-delay: 0.35s; } .kiosk-pin span:nth-child(3) { animation-delay: 0.7s; } .kiosk-pin span:nth-child(4) { animation-delay: 1.05s; } @keyframes kioskPin { 0%, 8% { background: rgba(255,255,255,0.18); transform: scale(1); } 14%, 60% { background: #56c5b5; transform: scale(1.25); } 70%, 100% { background: rgba(255,255,255,0.18); transform: scale(1); } } .kiosk-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .kiosk-keys span { width: 46px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09); color: white; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 0.95rem; } .kiosk-keys span.k-ok { background: var(--brand-gradient); border-color: transparent; } @media (prefers-reduced-motion: reduce) { .kiosk-pin span { animation: none; } } /* marco navegador — Plataforma Web */ .browser { position: relative; width: 100%; max-width: 620px; border-radius: 18px; overflow: hidden; background: white; border: 1px solid var(--ink-200); box-shadow: 0 50px 110px -35px rgba(58,165,190,0.35), 0 24px 50px -28px rgba(10,10,11,0.3); } .browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--ink-100); border-bottom: 1px solid var(--ink-200); } .browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-300); display: block; } .browser-url { flex: 1; margin-left: 8px; background: white; border: 1px solid var(--ink-200); border-radius: var(--r-pill); padding: 4px 12px; font-family: "Inter", sans-serif; font-size: 0.66rem; color: var(--ink-500); display: flex; align-items: center; gap: 6px; } /* alto fijo + cover: la captura se ve a mayor escala y el marco llena la columna */ .browser-media { position: relative; height: 420px; background: var(--ink-50); } .browser-shot, .browser-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; } @media (max-width: 1023px) { .browser-media { height: 340px; } } @media (max-width: 640px) { .browser-media { height: 260px; } } /* Estado de partida de lo que entra animado. Solo se aplica con .js-ready, que pone un script en linea del y quita animations.js en cuanto ha pasado estos valores a estilos en linea; si GSAP no llega, un temporizador la quita a los 2 s y se ve todo. Tiene que estar en el CSS y no en el JavaScript: escondiendolo desde JavaScript se esconde DESPUES del primer pintado, o sea que se ve, desaparece y vuelve. */ .js-ready .reveal { opacity: 0; transform: translateY(28px); } .js-ready .reveal-x { opacity: 0; transform: translateX(40px); } .js-ready [data-stagger] > * { opacity: 0; transform: translateY(24px); } /* Las palabras de los titulares NO van aqui: las crea el JavaScript partiendo el texto, asi que no existen en el primer pintado y esta regla llegaria tarde igual. Los titulares que se ven al cargar se quedan quietos; los de mas abajo los anima animations.js. */ .boxPicture video{ max-height:600px } /* Vídeo en modal: ver /js/site.js, el manejador de [data-video-play]. El vídeo se abre sobre un fondo oscuro en vez de a pantalla completa, para poder cerrarlo sin salir de la página. Vale tanto para el