/* ========================================================================== GESTOR — gestor.ar — ALTERNATIVA (v3) Propuesta paralela a index.html. No pisa nada: vive en alternativa.html. DE DONDE SALE ESTE DISENO. Lo dicto la skill ui-ux-pro-max consultada para "B2B ERP SaaS landing page enterprise": - Estilo "Soft UI Evolution": profundidad sutil, sombras suaves pero legibles, contraste alto, WCAG AA+. - Paleta celeste de confianza (#0EA5E9) + CTA calido (#F97316) sobre fondo casi blanco azulado. El naranja NO se usa en ningun otro lado: es el color de "hace click aca" y nada mas. - Patron "Before-After Transformation" (el de mayor conversion de la base para este caso): el antes en gris y apagado, el despues en color. Es literalmente el argumento del GESTOR. - Evitar animacion excesiva y modo oscuro por defecto. El degrade azul->cian del logo cae MUY bien con esta paleta celeste, mejor que con el indigo de la v2. ========================================================================== */ :root { /* --- Marca --- */ --degrade: linear-gradient(115deg, #1466ff 0%, #2fd8ff 100%); /* --- Celeste de confianza --- Los valores salen MEDIDOS, no elegidos a ojo. La paleta que propuso la skill (marca #0284c7, CTA #ea580c) da 4.1:1 y 3.56:1 sobre papel: las dos reprueban el minimo de 4.5:1, que es la regla de prioridad 1 de su propia checklist. Se oscurecieron hasta pasar, sin cambiar el tono. */ --marca: #0369a1; /* 5.93:1 sobre blanco, 5.61:1 sobre papel-2 */ --marca-fuerte: #075985; /* 7.56:1 */ --marca-clara: #0ea5e9; /* SOLO decorativo: nunca texto ni foco */ --marca-suave: #e0f2fe; --marca-linea: #bae6fd; /* --- El CTA calido. Un solo uso: los botones de accion. --- */ --cta: #c2410c; /* blanco encima: 5.18:1 */ --cta-fuerte: #9a3412; --cta-suave: #ffedd5; /* --- Papel --- */ --papel: #ffffff; --papel-2: #f4f9ff; --papel-3: #e6f1fb; /* --- Tinta: azul petroleo, no negro. Es lo que da el aire corporativo. --- */ --tinta: #072b44; --tinta-2: #3b6180; --suave: #526d85; /* 5.41:1 sobre blanco. El #6b89a3 original daba 3.66 */ --marino: #082c47; --marino-2: #0d3a5c; /* --- El "antes": todo desaturado --- */ --gris: #94a3b8; --gris-2: #cbd5e1; /* Un punto mas oscuro que el papel del sitio: las ventanitas blancas del "antes" tienen que despegarse del fondo o el lado izquierdo se ve vacio. */ --gris-papel: #e7edf4; --linea: #dbe9f5; --linea-fuerte: #bcd4e8; --exito: #15803d; --exito-claro: #dcfce7; --error: #dc2626; /* --- El tono de alerta de la caja "lo que se suele tener" --- Tibio, no rojo de error: el visitante no hizo nada mal, simplemente tiene los programas separados. Medidos sobre #fdf3f2: tinta 13.41:1, tinta-2 6.01:1, suave 4.96:1, acento 6.20:1. */ --alerta-papel: #fdf3f2; --alerta-linea: #f0cfc8; --alerta: #9f3a28; /* --- El azul profundo de la caja del GESTOR --- Medidos sobre el medio del degrade (#0b3652): blanco 12.62:1, papel-3 11.02:1, marca-linea 9.51:1, cyan de los tildes 8.71:1. */ --hondo: #0f4468; --hondo-2: #072b44; --radio: 16px; --radio-chico: 10px; --radio-grande: 26px; /* Soft UI Evolution: sombras en capas, mas suaves que el flat y mas definidas que el neumorfismo. Tres niveles, siempre con tinte azul. */ --sombra-1: 0 1px 2px rgba(7, 43, 68, .05), 0 2px 6px rgba(7, 43, 68, .04); --sombra-2: 0 2px 4px rgba(7, 43, 68, .05), 0 8px 20px rgba(7, 43, 68, .07); --sombra-3: 0 4px 8px rgba(7, 43, 68, .06), 0 20px 48px rgba(7, 43, 68, .11); --sombra-4: 0 8px 16px rgba(7, 43, 68, .08), 0 40px 90px rgba(7, 43, 68, .16); --ancho: 1220px; /* La skill pide Poppins/Open Sans, pero el sitio no puede pedir fuentes a internet (regla del LEEME). Se usa la pila del sistema, que en Windows da Segoe UI Variable —geometrica y cercana a Poppins— y el caracter se consigue con el tamano y el tracking, no con la familia. Si algun dia se vendorean los .woff2, se cambia SOLO esta linea. */ --tipo: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; --salida: cubic-bezier(.16, 1, .3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--papel); } body { margin: 0; background: var(--papel); color: var(--tinta-2); font-family: var(--tipo); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--marca); text-decoration: none; } a:hover { color: var(--marca-fuerte); text-decoration: underline; text-underline-offset: 3px; } /* La skill lo pone como CRITICO: foco visible en todo lo interactivo. Va con --marca y NO con --marca-clara: un indicador de foco necesita 3:1 contra lo que tiene al lado, y el celeste claro sobre blanco no llega. */ :focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 6px; } h1, h2, h3, h4 { color: var(--tinta); line-height: 1.1; margin: 0 0 .5em; font-weight: 680; letter-spacing: -.03em; } h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); letter-spacing: -.045em; line-height: 1.02; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.038em; } h3 { font-size: 1.18rem; letter-spacing: -.02em; } h4 { font-size: .95rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } code { font-family: var(--mono); font-size: .87em; background: var(--marca-suave); color: var(--marca-fuerte); padding: .12em .42em; border-radius: 5px; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; } /* Para el ojo no existe; para un lector de pantalla es texto normal. */ .oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .degradado { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================ Cabecera ================================= */ .cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; } .cabecera.pegada { border-bottom-color: var(--linea); box-shadow: var(--sombra-1); } .cabecera .contenedor { display: flex; align-items: center; gap: 26px; height: 74px; } .barra-progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--degrade); transform: scaleX(0); transform-origin: 0 50%; } .logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .logo:hover { text-decoration: none; } .logo svg { height: 32px; width: 32px; display: block; flex: 0 0 auto; } .logo-texto { font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; color: var(--tinta); line-height: 1; } .menu { display: flex; align-items: center; gap: 2px; margin-left: auto; } /* EL :not(.btn) NO ES ADORNO. `.menu a` pesa (0,1,1) —una clase y un elemento— y `.btn-cta` pesa (0,1,0). O sea que el color del menu le ganaba al del boton, y el "Pedir una demo" de la cabecera terminaba con letra gris azulada sobre naranja: contraste 1,26 medido, ilegible. En el heroe y en el formulario el mismo boton daba 5,18, asi que el problema aparecia en UN solo lugar y era facil no verlo. */ .menu a:not(.btn) { color: var(--tinta-2); font-size: .93rem; font-weight: 550; padding: 9px 14px; border-radius: 9px; transition: color .2s, background .2s; } .menu a:not(.btn):hover { background: var(--papel-2); color: var(--tinta); text-decoration: none; } .menu-boton { display: none; margin-left: auto; cursor: pointer; background: var(--papel-2); border: 1px solid var(--linea); border-radius: 11px; width: 44px; height: 44px; color: var(--tinta); align-items: center; justify-content: center; } /* ============================= Botones ================================= */ /* touch-target-size de la skill: minimo 44x44. Los botones dan 46 de alto. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 13px 24px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: .98rem; font-weight: 620; letter-spacing: -.012em; cursor: pointer; white-space: nowrap; transition: transform .2s var(--salida), box-shadow .22s, background .2s, border-color .2s; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* El naranja aparece SOLO aca. */ .btn-cta { background: var(--cta); color: #fff; box-shadow: 0 2px 4px rgba(194, 65, 12, .22), 0 10px 26px rgba(194, 65, 12, .32); } .btn-cta:hover { background: var(--cta-fuerte); color: #fff; box-shadow: 0 4px 8px rgba(194,65,12,.26), 0 16px 36px rgba(194,65,12,.36); } .btn-linea { background: var(--papel); color: var(--tinta); border-color: var(--linea-fuerte); box-shadow: var(--sombra-1); } .btn-linea:hover { border-color: var(--marca-clara); color: var(--marca-fuerte); box-shadow: var(--sombra-2); } .btn-claro { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.24); } .btn-claro:hover { background: rgba(255,255,255,.2); color: #fff; } .btn-chico { min-height: 40px; padding: 9px 17px; font-size: .9rem; border-radius: 10px; } /* ============================ Secciones ================================ */ .seccion { padding: clamp(74px, 9vw, 124px) 0; position: relative; } .seccion-papel { background: var(--papel-2); } .seccion-marino { background: var(--marino); color: #a8c4da; } .seccion-marino h2, .seccion-marino h3, .seccion-marino h4 { color: #fff; } .seccion-marino .rotulo { color: #7dd3fc; } .seccion-marino .encabezado-seccion > p { color: #a8c4da; } .encabezado-seccion { max-width: 70ch; margin-bottom: clamp(40px, 5vw, 66px); } .encabezado-seccion.centrado { margin-left: auto; margin-right: auto; text-align: center; } .rotulo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--marca); margin-bottom: 16px; } .rotulo::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; opacity: .55; } .encabezado-seccion h2 { margin-bottom: .36em; } .encabezado-seccion > p { font-size: 1.12rem; color: var(--tinta-2); margin: 0; } /* ============================== Heroe ================================== */ .heroe { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(50px, 6vw, 76px); overflow: hidden; } .heroe::before { content: ""; position: absolute; top: -380px; left: 50%; width: 1300px; height: 820px; margin-left: -650px; background: radial-gradient(closest-side, rgba(14, 165, 233, .16), transparent 70%); pointer-events: none; } .heroe .contenedor { position: relative; text-align: center; } .chapa { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--papel); border: 1px solid var(--marca-linea); box-shadow: var(--sombra-1); border-radius: 100px; padding: 8px 18px 8px 13px; font-size: .88rem; color: var(--tinta-2); margin: 0 0 28px; } .chapa b { color: var(--tinta); font-weight: 620; } .punto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--exito); box-shadow: 0 0 0 3px rgba(21, 128, 61, .18); flex: 0 0 auto; } /* La onda late en un ::after y no en el punto mismo: asi el punto queda siempre nitido y del mismo tamaño, y lo unico que se mueve es el anillo. Ciclo largo y opacidad baja —es un latido, no una baliza—: arriba de un titular es lo unico que se mueve en la pantalla y de cerca cansa. */ .punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--exito); animation: latido 2.8s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes latido { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.9); opacity: 0; } } /* ===================== El teatro del héroe ============================= El truco del keynote del primer iPhone: "an iPod, a phone, an internet communicator" girando cada vez mas rapido hasta que aparece el producto. Aca giran "Un CRM / Un ERP / Un omnicanal" y se resuelven en el GESTOR. Es un prisma de 3 caras girando sobre el eje X. El radio NO esta escrito aca: lo calcula el JS midiendo la altura real, porque el cuerpo usa clamp() y a 375px la caja mide la mitad que a 1440. Un radio fijo se despegaria de las caras en cuanto cambie el tamano de la letra. */ .teatro { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; } /* POR QUE UN TAMBOR VERTICAL Y NO UN PRISMA 3D. El primer intento fue un prisma de tres caras girando sobre el eje X. La geometria no da: para tres caras el radio es (alto/2)/tan(60deg) = 0,29 del alto. Medido en la pagina daban 13,85px de radio contra un texto de 774px de ancho, o sea que el eje de giro pasaba casi por el plano de la letra. No se veia un tambor: se veia UNA palabra girando sobre si misma. Un tambor vertical con recorte no tiene ese problema, se lee siempre, y es lo que uno recuerda del escenario. */ .rueda { /* Alto = 1,5 lineas: sobra lugar arriba y abajo para ver la palabra que entra y la que sale inclinandose. Con el alto justo no habria tambor. */ height: 1.5em; font-size: clamp(2rem, 5vw, 4rem); font-weight: 720; letter-spacing: -.05em; line-height: 1; color: var(--tinta); width: 100%; overflow: hidden; /* Las palabras que entran y salen se desvanecen contra los bordes: es lo que termina de venderlo como cilindro y no como lista que se desliza. */ -webkit-mask-image: linear-gradient(transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(transparent 0%, #000 30%, #000 70%, transparent 100%); } /* La perspectiva va ACA, en el padre directo de las caras, y la caja NO se mueve: cada palabra se posiciona sola desde el JS. Si en cambio se desplazara la cinta entera, el punto de fuga se movería con ella y la inclinación se deformaría a medida que gira. */ .rueda-caja { position: relative; width: 100%; height: 100%; perspective: 760px; transform-style: preserve-3d; } .rueda-cara { position: absolute; left: 0; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; backface-visibility: hidden; will-change: transform, opacity; /* EL PRIMER CUADRO LO DIBUJA EL CSS, no el JS. Las tres palabras estan apiladas en el mismo lugar, asi que hasta que corria pintar() por primera vez se veian las tres superpuestas. Dejarlas apagadas y encender solo la primera hace que el estado inicial ya sea el cuadro cero de la coreografia: "Un CRM", centrada y sola. */ opacity: 0; } .rueda-cara:first-child { opacity: 1; } /* El fogonazo del remate: un destello que sale del centro justo cuando aparece el producto. Arranca invisible y lo enciende el JS. */ .fogonazo { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); background: radial-gradient(closest-side, rgba(56, 189, 248, .55), rgba(56, 189, 248, 0) 70%); opacity: 0; pointer-events: none; z-index: 2; } /* La revelación: arranca invisible y ocupando su lugar, para que al aparecer la página no pegue un salto (content-jumping de la checklist). */ /* EL GESTOR TIENE QUE SER MAS GRANDE QUE EL TITULO QUE VIENE ABAJO. Estaba al reves: la revelacion compartia el tamano de la rueda —64px— y el h1 de abajo mide 70,4. La palabra que es el remate de toda la coreografia quedaba mas chica que la linea que la sigue, asi que el ojo terminaba en el subtitulo y no en el producto. Ahora da 1,2 veces el h1. La rueda NO crece con esto: las tres frases que giran son largas —"Un omnicanal"— y a este tamano no entrarian en un celular. Que el remate entre mas grande que lo que venia girando ademas ayuda al golpe. */ .revelacion { display: flex; align-items: center; justify-content: center; gap: 15px; height: 1.35em; /* EL MINIMO DEL CLAMP TAMBIEN IMPORTA, no solo el vw. En un celular de 375px el 6,6vw da 24,75 y no llega nunca al minimo, asi que el que manda ahi es el primer valor: con 2,4rem el GESTOR volvia a quedar en 0,96 del titulo y el problema seguia igual abajo de 728px de ancho. Con 3rem da 1,20 en las dos puntas. Medido: a 375px el conjunto logo + palabra ocupa 232 de 323 disponibles, entra con aire. */ font-size: clamp(3rem, 6.6vw, 5.3rem); line-height: 1; } /* EL LOGO VA CORRIDO 0,055em HACIA ABAJO, Y NO ES UN CAPRICHO. "GESTOR" es todo mayusculas: su tinta va desde la linea base hasta la altura de capital (0,72em) y practicamente no baja. Centrar con flex alinea las CAJAS, no las tintas, y la caja del texto incluye el espacio de las letras con cola —que aca no hay ninguna—, asi que el texto queda visualmente mas abajo y el logo parece flotar. Medido en pantalla con la fuente en 64px: el centro de la tinta cae en 291,3 y el del logo en 287,8. Sobran 3,5px, que en em son 0,055 — por eso va en em y no en px: asi la correccion acompana a cualquier tamano de letra. */ /* EL LOGO VA A LA ALTURA DE LAS MAYUSCULAS, NO A UN EM. Estaba en 1em: con la letra en 48px el logo media 48 y las mayusculas de "GESTOR" solo 35 —medido con la metrica real de la fuente—. Un 37% mas grande, y como es un circulo su masa sobresale arriba y abajo de las letras: se lee como si el texto estuviera chico y flotando alto, que es justo lo que se veia en el celular. A .74em el logo mide lo mismo que las letras. El corrimiento de abajo se queda: el centro de la TINTA de unas mayusculas sin colas cae 2,5px por debajo del centro de su caja de linea, asi que sin esto el logo queda alto. En em para que acompañe cualquier tamaño. */ .revelacion svg { height: .74em; width: .74em; flex: 0 0 auto; transform: translateY(.055em); } .revelacion span { font-weight: 800; letter-spacing: -.055em; color: var(--tinta); } /* Con JS, las dos capas se superponen: la rueda gira y se disuelve donde despues aparece el GESTOR. Sin JS quedan una debajo de la otra y se lee igual, que es lo que importa. */ /* Sin JS el tambor no tiene sentido —no hay nada que lo mueva—, asi que ni aparece: queda directamente el producto, y el mensaje completo lo dan el parrafo oculto y el titulo, que son texto de verdad. */ .rueda { display: none; } .js .teatro { position: relative; } .js .rueda { display: block; position: absolute; inset: 0; } .js .revelacion { opacity: 0; } /* LA PAGINA NO ESPERA A LA ANIMACION. Antes todo lo que viene despues del teatro —el titulo, la bajada, los botones, la captura— arrancaba en opacity 0 y lo encendia el JS al terminar de girar: durante cuatro segundos y medio el visitante tenia una pantalla casi vacia con tres palabras dando vueltas, y el boton de pedir una demo no existia todavia. Ahora la pagina esta entera desde el primer cuadro y la animacion pasa en su lugar, adentro del heroe. De paso arregla el LCP: el elemento mas grande —la captura del sistema— se pinta de entrada en vez de a los 4,5 segundos. La clase `.tras-revelacion` sigue en el HTML a proposito: es lo que el JS usa para saber que encender si algo sale mal. */ @media (prefers-reduced-motion: reduce) { /* Nada gira: se muestra directamente el final, que es el mensaje. */ .js .rueda { display: none; } .js .revelacion { opacity: 1; } } .repetir { background: none; border: 0; cursor: pointer; font: inherit; font-size: .84rem; color: var(--suave); padding: 8px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; } .repetir:hover { color: var(--marca); background: var(--papel-2); } /* EL TITULO QUE ALTERNA. Los dos textos se apilan en el mismo lugar con grid —uno encima del otro, en la misma celda— y se cruza la opacidad. Apilarlos asi, y no cambiando el texto por JS, tiene dos ventajas: el alto lo fija el mas largo de los dos, de modo que la pagina no salta al cambiar, y los dos siguen siendo texto de verdad en el HTML. */ .heroe h1 { max-width: 17ch; margin: 0 auto .3em; display: grid; } .heroe h1 .titulo-turno { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; } .heroe h1 .titulo-turno.visible { opacity: 1; } /* Sin JS se ve el primero y nada mas: no queda ninguno invisible. */ html:not(.js) .heroe h1 .titulo-turno { opacity: 0; } html:not(.js) .heroe h1 .titulo-turno:first-child { opacity: 1; } @media (prefers-reduced-motion: reduce) { .heroe h1 .titulo-turno { transition: none; } } .heroe-bajada { font-size: clamp(1.08rem, 1.5vw, 1.26rem); max-width: 62ch; margin: 0 auto 32px; color: var(--tinta-2); } .heroe-botones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; } .heroe-nota { font-size: .93rem; color: var(--suave); margin: 0; } /* TODO LO QUE ES, EN UN RENGLON. La rueda de arriba gira TRES palabras y no puede girar mas: el gag se apoya en que sean tres, con siete deja de ser un remate y pasa a ser una lista dando vueltas. Pero el producto es mas grande que esas tres, asi que el resto se enumera aca abajo, quieto, para el que quiere el detalle. */ .capacidades { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin: 20px auto 0; max-width: 60ch; font-size: .92rem; color: var(--tinta-2); } .capacidades span { white-space: nowrap; } /* El separador va en el ::after y no como texto para que, cuando la lista se parte en varios renglones, no quede una barrita huerfana al final de uno. */ .capacidades span::after { content: "·"; color: var(--linea-fuerte); margin: 0 10px; } .capacidades span:last-child::after { content: none; } /* --- La captura del heroe --- */ /* Ajustado para que el borde de arriba de la captura ASOME sobre el pliegue: medido, arrancaba en y=888 con una ventana de 900 y quedaba invisible. Que se vea el principio es lo que invita a bajar. */ .heroe-figura { margin-top: clamp(24px, 3.4vw, 42px); } .marco-barra { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: var(--papel-2); border-bottom: 1px solid var(--linea); } .marco-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-fuerte); flex: 0 0 auto; } .marco-barra span { margin-left: 10px; font-family: var(--mono); font-size: .78rem; color: var(--suave); } .heroe-figura .marco { box-shadow: var(--sombra-4); } /* --- El carrusel de capturas --- */ .carrusel { position: relative; /* El marco fija la proporcion. Las capturas no la tienen toda igual —la bandeja es 16:9 y el resto 2,44:1— asi que sin esto el alto pegaria un salto en cada cambio. */ aspect-ratio: 1600 / 656; background: var(--papel-2); overflow: hidden; } /* ESTE `display` NO SOBRA, ES LO QUE HACE FUNCIONAR EL CARRUSEL. Los `.cuadro` son , y la hoja tiene un `picture { display: contents }` global que puso el script que envuelve las imagenes en WebP: sirve para que el no moleste al layout en el resto del sitio. Pero `display: contents` significa que el elemento NO genera caja, y sin caja el `position: absolute` y el `opacity` de aca abajo se ignoran por completo. Sin esta linea las seis capturas se apilan una debajo de la otra en el flujo y no se cruza ninguna: se ve la primera y las otras cinco quedan colgando. Falla en silencio —ni un error, ni una regla tachada en el inspector— y la clase `.visible` sigue entrando y saliendo como si todo anduviera. */ .carrusel .cuadro { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; } .carrusel .cuadro.visible { opacity: 1; } .carrusel .cuadro img { width: 100%; height: 100%; object-fit: cover; /* Ancladas ARRIBA: lo que se recorta es el pie de la pantalla, que en un sistema de gestion es siempre lo menos importante —el encabezado y los numeros de arriba son lo que se mira. */ object-position: top center; } /* El cartelito con el nombre de la pantalla. Ademas de decorar, ensena: el visitante sabe que esta mirando en vez de adivinar. */ .carrusel-pie { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 34px 22px 16px; background: linear-gradient(transparent, rgba(7, 43, 68, .82)); color: #fff; text-align: left; } .carrusel-pie b { display: block; font-size: 1.02rem; font-weight: 650; letter-spacing: -.02em; } .carrusel-pie span { font-size: .9rem; color: #d3e3f0; } /* Los puntos: además de indicar en cuál va, se puede saltar a cualquiera. El gap no es decorativo: define el paso entre centros (9 + 14 = 23px) y ese paso es el ancho maximo que puede tener el area de toque de abajo sin pisarse con la del punto de al lado. */ .carrusel-puntos { display: flex; justify-content: center; gap: 14px; margin-top: 16px; } .carrusel-puntos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--linea-fuerte); cursor: pointer; transition: background .25s, transform .25s; } .carrusel-puntos button[aria-selected="true"] { background: var(--marca); transform: scale(1.35); } /* EL AREA DE TOQUE, AHORA CENTRADA DE VERDAD. Antes decia `position: absolute` con `margin: -10px 0 0 -10px` y sin top ni left. Sin top/left un absolute arranca en su POSICION ESTATICA —que en un boton de 9px cae en 4,5— asi que el area de 30px iba de -5,5 a 24,5 en vez de -10,5 a 19,5: quedaba corrida 10,5px abajo y a la derecha del punto. El area existia, pero no donde estaba el punto: habia que tocar al lado. Comprobado con elementFromPoint antes de tocar nada. El ancho es el paso entre centros (23px) para no pisar al vecino; el alto se estira libre porque arriba y abajo no hay nada que tocar. */ .carrusel-puntos button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 23px; height: 40px; } /* ================= EL CARRUSEL EN UN CELULAR ========================= MEDIDO A 375px ANTES DE TOCAR NADA, y estaba mal de dos formas. 1. La captura quedaba de 321x132. La proporcion 1600/656 es de monitor ancho: al bajar el ancho a 321 el alto se derrumba a 132 y la pantalla del sistema se dibuja a escala 0,201 —un texto de 12px del GESTOR llegaba a 2,4px—. Era una mancha, no una captura. 2. El cartel con el nombre medía 130px de alto SOBRE una imagen de 132. La tapaba entera. Se veia el cartel y abajo un degrade oscuro. La solucion no es achicar menos sino RECORTAR: una caja mas alta (4/3) hace que la imagen escale por el alto y se vea un pedazo grande de la pantalla en vez de toda chiquita. Pasa de 132 a 241px de alto y de 0,201 a 0,367 de escala: sigue sin poder leerse un numero —a 321px de ancho eso es imposible y no es lo que tiene que lograr— pero se reconoce que es un sistema con datos, que es para lo que esta. */ @media (max-width: 620px) { .carrusel { aspect-ratio: 4 / 3; } /* El cartel, del alto de un cartel. Se queda SOLO el nombre de la pantalla: la bajada es la que lo hacia de dos renglones y en un telefono el nombre alcanza —"Sofía", "El escritorio"— para saber que se mira. */ .carrusel-pie { padding: 26px 14px 11px; } .carrusel-pie b { font-size: .95rem; } .carrusel-pie span { display: none; } /* Mas aire entre puntos y el area de toque acompaña: paso 9 + 20 = 29px. Los seis ocupan 154 de los 323 disponibles. */ .carrusel-puntos { gap: 20px; margin-top: 14px; } .carrusel-puntos button::before { width: 29px; height: 44px; } /* LA CAPTURA SE ADELANTA A LAS CAPACIDADES. En un telefono la pantalla util son unos 700px y la captura del sistema arrancaba en 897: nadie la veia sin scrollear. La fila de capacidades —ERP, CRM, Stock…— son 88px de chapitas que se leen igual de bien despues, y ademas repiten lo que ya dicen el titulo y la bajada. Con ellas atras, el marco del sistema asoma antes del pliegue, que es lo que invita a seguir bajando. Va con `order` y no moviendo el HTML: en una pantalla ancha el orden original esta bien y no hay motivo para cambiarlo. Para que `order` funcione el contenedor tiene que ser flex; en columna se comporta igual que el bloque que era. */ .heroe .contenedor { display: flex; flex-direction: column; } .heroe .capacidades { order: 2; margin-top: 26px; } .heroe .heroe-figura { order: 1; } .heroe .tras-revelacion.animar, .heroe > .contenedor > p:last-child { order: 3; } } .carrusel-puntos button { position: relative; } @media (prefers-reduced-motion: reduce) { .carrusel .cuadro { transition: none; } } /* ==================== El antes y el despues ============================ */ /* El corazon de esta propuesta. Dos capas apiladas del mismo tamano y la de arriba recortada con clip-path segun donde este el control. El "antes" es un dibujo —ventanas sueltas y grises—, no una captura de otro producto. */ .comparador { position: relative; border-radius: var(--radio-grande); overflow: hidden; box-shadow: var(--sombra-4); border: 1px solid var(--linea); background: var(--papel); /* Reserva el alto para que no salte al cargar (content-jumping). */ aspect-ratio: 16 / 9; min-height: 320px; touch-action: pan-y; user-select: none; cursor: ew-resize; } .comparador-capa { position: absolute; inset: 0; } .comparador-capa img { width: 100%; height: 100%; object-fit: cover; object-position: top left; } /* La capa del "antes" queda arriba y se va recortando desde la derecha. */ .comparador-antes { z-index: 2; background: var(--gris-papel); clip-path: inset(0 calc(100% - var(--corte, 50%)) 0 0); } .comparador-etiqueta { position: absolute; top: 16px; z-index: 4; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 13px; border-radius: 100px; pointer-events: none; } .etiqueta-antes { left: 16px; background: rgba(100, 116, 139, .92); color: #fff; } .etiqueta-despues { right: 16px; background: var(--marca); color: #fff; } /* EL DESORDEN, DIBUJADO. Primera version: nueve ventanas grandes repartidas con aire. No funcionaba. Al arrastrar, el corte caia ADENTRO de una ventana y la partia al medio de una palabra ("CRM de ve...", "Mer..."), que se lee como un error de la pagina y no como intencion. Y con tanto espacio vacio no transmitia desorden: parecian tarjetas prolijas mal acomodadas. Ahora son MUCHAS y CHICAS. El corte cae casi siempre entre dos, y cuando parte una da igual: hay tantas que se entiende que es un monton de cosas sueltas. La densidad ES el mensaje. */ .pila { position: absolute; inset: 0; padding: 3%; } .ventana { position: absolute; background: #fff; border: 1px solid var(--gris-2); border-radius: 7px; box-shadow: 0 3px 10px rgba(7, 43, 68, .13); padding: 7px 9px; width: 23%; min-width: 96px; filter: grayscale(1); } .ventana b { display: block; font-size: .68rem; color: #475569; font-weight: 640; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* CADA VENTANA SE PARECE AL PROGRAMA QUE ES. Antes todas tenian el mismo relleno —tres barritas grises— y se leian como doce copias de la misma caja. El argumento no es "hay muchas cosas": es que son COSAS DISTINTAS, cada una con su forma, su login y su base. Por eso cada una ahora dibuja por dentro lo que uno espera de ese programa: la planilla tiene celdas, el de mensajes tiene globos, el facturador tiene campos. Son ARQUETIPOS, no imitaciones: una grilla de celdas se lee como planilla sin ser la de nadie. No hay logos, marcas ni capturas de productos ajenos. */ .ventana i { display: block; height: 4px; border-radius: 2px; background: var(--gris-2); margin-bottom: 4px; } .ventana i:last-child { margin-bottom: 0; width: 62%; } .ventana i:nth-child(3) { width: 84%; } /* --- Planilla de cálculo: celdas con encabezado --- */ .v-planilla .cuerpo { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1px; background: var(--gris-2); border: 1px solid var(--gris-2); border-radius: 3px; overflow: hidden; } .v-planilla .cuerpo span { background: #fff; height: 7px; } .v-planilla .cuerpo span:nth-child(-n+4) { background: #dbe2ea; } /* la fila de titulos */ /* --- Mensajería: globos de conversación, uno de cada lado --- */ .v-chat .cuerpo { display: flex; flex-direction: column; gap: 4px; } .v-chat .cuerpo span { height: 8px; border-radius: 6px; background: #e8edf3; width: 62%; } .v-chat .cuerpo span:nth-child(2) { align-self: flex-end; width: 48%; background: #d4dce6; } .v-chat .cuerpo span:nth-child(3) { width: 72%; } /* --- Formulario: campos con su etiqueta y un boton --- */ .v-form .cuerpo { display: grid; gap: 5px; } .v-form .cuerpo span { height: 9px; border: 1px solid var(--gris-2); border-radius: 3px; background: #fff; } .v-form .cuerpo span:last-child { height: 8px; width: 42%; border: 0; background: #c3ccd8; justify-self: end; } /* --- Bandeja: filas con su punto de "sin leer" --- */ .v-bandeja .cuerpo { display: grid; gap: 4px; } .v-bandeja .cuerpo span { height: 6px; border-radius: 2px; background: #e4eaf1; position: relative; padding-left: 10px; } .v-bandeja .cuerpo span::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #b9c4d1; } .v-bandeja .cuerpo span:nth-child(2) { width: 82%; } .v-bandeja .cuerpo span:nth-child(3) { width: 68%; } /* Cuatro columnas por tres filas, con desprolijidad a proposito. Se pisan un poco entre ellas: dos ventanas que se tapan dicen "esto no esta ordenado" mejor que cualquier texto. */ .ventana:nth-child(1) { top: 2%; left: 1%; transform: rotate(-3deg); } .ventana:nth-child(2) { top: 6%; left: 25%; transform: rotate(2deg); } .ventana:nth-child(3) { top: 1%; left: 50%; transform: rotate(-1.5deg); } .ventana:nth-child(4) { top: 7%; left: 74%; transform: rotate(3deg); } .ventana:nth-child(5) { top: 33%; left: 6%; transform: rotate(2.5deg); } .ventana:nth-child(6) { top: 37%; left: 30%; transform: rotate(-2deg); } .ventana:nth-child(7) { top: 31%; left: 54%; transform: rotate(1.5deg); } .ventana:nth-child(8) { top: 39%; left: 76%; transform: rotate(-3deg); } .ventana:nth-child(9) { top: 65%; left: 2%; transform: rotate(-2deg); } .ventana:nth-child(10) { top: 70%; left: 27%; transform: rotate(3deg); } .ventana:nth-child(11) { top: 64%; left: 52%; transform: rotate(-2.5deg); } .ventana:nth-child(12) { top: 71%; left: 75%; transform: rotate(1.5deg); } /* El tirador */ .comparador-control { position: absolute; top: 0; bottom: 0; z-index: 5; left: var(--corte, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 43, 68, .12), 0 0 24px rgba(7, 43, 68, .3); pointer-events: none; } .comparador-tirador { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; color: var(--marca); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(7, 43, 68, .18), 0 10px 30px rgba(7, 43, 68, .26); } .comparador-tirador svg { width: 22px; height: 22px; } /* El input real: invisible pero es el que maneja todo. Asi el comparador se opera con teclado y lo anuncia un lector de pantalla, sin escribir ni una linea de ARIA a mano. */ .comparador-rango { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; } .comparador-rango:focus-visible + .comparador-control .comparador-tirador { outline: 3px solid var(--marca); outline-offset: 3px; } .comparador-pie { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 20px; font-size: .95rem; color: var(--suave); } .comparador-pie b { color: var(--tinta); } /* ========================== La comparacion ============================= Reemplaza al comparador de arrastrar. Dice lo mismo pero se entiende sin que nadie toque nada: dos cajas, los programas sueltos contra el sistema. El comparador quedo en el historial por si alguna vez se retoma. */ /* LAS DOS NO PESAN IGUAL, A PROPOSITO. Antes eran gris clarito contra blanco con borde celeste: la diferencia estaba, pero dicha en voz muy baja. Si las dos cajas pesan lo mismo, el visitante lee "dos opciones" en vez de leer "esto es el problema y esto es la solucion". Ahora una tiene tono de alerta y la otra es oscura y va mas arriba. */ .comparacion { display: grid; grid-template-columns: 1fr 1.12fr; gap: 26px; align-items: start; } .caja-comparacion { border-radius: var(--radio-grande); padding: clamp(26px, 3vw, 38px); border: 1px solid var(--linea); background: var(--papel); } .caja-comparacion h3 { display: flex; align-items: center; gap: 11px; font-size: 1.28rem; margin-bottom: .3em; } .caja-comparacion h3 svg { width: 27px; height: 27px; flex: 0 0 auto; } .aclara { color: var(--suave); font-size: .95rem; margin-bottom: 22px; } /* EL LADO DEL PROBLEMA. Va desplazada hacia abajo para que la del GESTOR quede mas alta. El desnivel se hace con margin y NO con transform: el revelado por scroll termina poniendo `transform: none` inline sobre cada `.animar`, asi que un translateY de la hoja sobreviviria hasta que la caja entra en pantalla y ahi se caeria de golpe. */ .caja-suelta { background: var(--alerta-papel); border-color: var(--alerta-linea); margin-top: 26px; } .caja-suelta h3 svg { color: var(--alerta); } /* Los programas sueltos: cada uno una etiqueta punteada y desalineada. El desorden ES el argumento, asi que se dibuja en vez de explicarse. */ .sueltos { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; } .sueltos li { background: var(--papel); border: 1px dashed var(--alerta-linea); border-radius: 8px; padding: 7px 12px; font-size: .89rem; color: var(--tinta-2); } .cierre { margin: 0; padding-top: 18px; border-top: 1px solid var(--linea); color: var(--error); font-size: .95rem; font-weight: 500; } /* EL LADO DE LA SOLUCION: oscura, y la unica cosa oscura de toda esta parte de la pagina. Es lo que hace que el ojo caiga ahi primero. */ .caja-junta { background: linear-gradient(158deg, var(--hondo) 0%, var(--hondo-2) 100%); border-color: rgba(255, 255, 255, .13); box-shadow: 0 26px 52px -18px rgba(7, 43, 68, .45), 0 3px 12px rgba(7, 43, 68, .16); position: relative; color: var(--papel-3); } .caja-junta h3 { color: #ffffff; } .caja-junta .aclara { color: var(--marca-linea); } /* El disco verde de los tildes se apaga sobre el azul profundo; encima el verde es el color del "todo bien" y aca lo que se afirma es que esta junto, no que este correcto. Va el cyan de la marca. */ .caja-junta .lista-tildes li::before { background: rgba(103, 232, 249, .16); } .caja-junta .lista-tildes li::after { border-color: #67e8f9; } /* ACA IBA UNA BARRITA DE DEGRADE ARRIBA, Y SE SACA POR GEOMETRIA. Media 3px de alto y pedia 26px de radio en las esquinas: ningun navegador curva mas que la mitad del alto, asi que lo achicaba a 1,5px y la barra quedaba RECTA mientras la caja curvaba sus 26. Las puntas asomaban por fuera de la curva, mas 1px de cada lado que se comia el `inset: -1px`. Sobre la caja blanca de antes, con un borde palido, no se veia. Sobre el azul profundo, con un degrade cian encima, se leia como una linea suelta flotando arriba de la tarjeta. La caja oscura no necesita un acento: es el acento. */ .remate { margin: 34px auto 0; max-width: 62ch; text-align: center; font-size: 1.14rem; color: var(--tinta-2); } .remate b { color: var(--tinta); } /* --- El dibujo de la ficha unica --- */ /* LA FICHA UNICA ES UN BLOQUE, NO UN DIBUJITO AL PIE. Ocupaba 860 de los 1220 del contenedor —el 70%— y flotaba en blanco justo debajo de dos tarjetas que ocupan todo el ancho. Al lado de ellas se leia como una aclaracion, cuando es el argumento central de la seccion: que no son sistemas atados con integraciones. Ahora es un panel de la misma familia y del mismo ancho que las cajas de arriba. */ .ficha-unica { margin: clamp(34px, 5vw, 56px) auto 0; max-width: none; background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: clamp(30px, 4vw, 50px) clamp(18px, 3vw, 42px); } /* Y EL FONDO CELESTE ES LO QUE HACE APARECER LOS NODOS. Son tarjetas blancas: sobre papel blanco las separaba una linea de 1,5px y nada mas, por eso se veian desvaidas. Sobre el papel-2 se despegan solas, sin tocarles el color. */ /* EL `> svg` NO ES ADORNO, ES EL ARREGLO DE UN BUG. Esto decia `.ficha-unica svg`, que le pega a TODOS los svg de adentro — incluidos los iconos de 17px de la lista de celular que vive en este mismo
. El `width: 100%` les ganaba al atributo width="17" del HTML y los inflaba a 113px: el 81% de su celda. Se veia un camion gigante con la palabra "Pedido" empujada afuera de la tarjeta. Con el `>` la regla queda solo para el dibujo, que es hijo directo. */ .ficha-unica > svg { width: 100%; max-width: 1010px; height: auto; display: block; margin: 0 auto; } /* Los hilos van PRIMERO en el SVG porque ahi el orden del documento es el orden de pintado: no hay z-index que valga, lo que se dibuja despues tapa. */ /* El hilo de base: un degrade que va de claro en la punta a fuerte en el centro. Es lo que hace leer la direccion —todo va hacia la ficha— sin ninguna flecha. */ .fu-hilos path { fill: none; stroke-width: 3.2; } .fu-hilos .izq { stroke: url(#fu-hilo-izq); } .fu-hilos .der { stroke: url(#fu-hilo-der); } /* Encima corre un trazo punteado que se desplaza hacia el centro. Es el mismo camino dibujado dos veces: abajo el hilo entero, arriba el guion que viaja. */ .fu-flujo path { fill: none; stroke: var(--marca-clara); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 190; animation: fu-correr 3.4s linear infinite; } .fu-flujo path:nth-child(2) { animation-delay: -1.1s; } .fu-flujo path:nth-child(3) { animation-delay: -2.2s; } .fu-flujo path:nth-child(4) { animation-delay: -.6s; } .fu-flujo path:nth-child(5) { animation-delay: -1.7s; } .fu-flujo path:nth-child(6) { animation-delay: -2.8s; } @keyframes fu-correr { from { stroke-dashoffset: 195; } to { stroke-dashoffset: 0; } } /* Los nodos: papel con sombra suave y el icono en su pastilla. */ .fu-nodo rect { fill: var(--papel); stroke: var(--linea); stroke-width: 1.5; filter: url(#fu-sombra); } .fu-nodo circle { fill: var(--marca-suave); } .fu-nodo use { color: var(--marca); } .fu-nodo text { fill: var(--tinta); font-family: var(--tipo); font-size: 17px; font-weight: 600; letter-spacing: -.015em; } /* El centro es el unico con el degrade de la marca y con brillo: tiene que ganar la mirada apenas se ve el dibujo. */ .fu-centro rect { fill: url(#fu-marca); filter: url(#fu-brillo); } .fu-centro text { fill: #fff; font-family: var(--tipo); font-size: 24px; text-anchor: middle; font-weight: 720; letter-spacing: -.03em; } .fu-centro .fu-chico { font-size: 15px; font-weight: 500; fill: #d6f0ff; letter-spacing: 0; } @media (prefers-reduced-motion: reduce) { .fu-flujo path { animation: none; opacity: 0; } } .ficha-unica figcaption { margin-top: 26px; text-align: center; max-width: 68ch; margin-left: auto; margin-right: auto; font-size: 1.04rem; color: var(--tinta-2); } .ficha-unica figcaption b { color: var(--tinta); } /* La version de celular del dibujo. Oculta mientras haya lugar. */ .fu-lista { display: none; } /* EN PANTALLA ANGOSTA SE CAMBIA EL DIBUJO POR LA LISTA. El intento anterior era agrandar la letra del SVG a mano (22px en vez de 17). No alcanzaba ni de cerca: a 375px el viewBox de 900 se dibuja a escala 0,32, asi que esos 22px llegan a la pantalla como SIETE. Y no se puede subir mas —el texto arranca en x=114 dentro de un nodo que termina en 260, o sea 146 unidades para "Oportunidad"— sin que se salga de su propia tarjeta. El problema no era el tamano de la letra sino la forma del dibujo: seis etiquetas alrededor de un centro necesitan ancho, y en un celular no hay. */ @media (max-width: 620px) { .ficha-unica > svg[role="img"] { display: none; } .fu-lista { display: block; } /* LAS CAPACIDADES, DE TEXTO SUELTO A CHAPITAS. En una pantalla ancha entran en un renglon o dos y los puntitos de separacion se leen como una linea de credito, prolija. En un celular se parten en TRES renglones con los "·" colgando en cualquier lado y quedan como palabras tiradas en la pagina. Cada una en su chapita se lee como lo que es: una lista de lo que hace el sistema. */ .capacidades { gap: 7px; max-width: none; } .capacidades span { background: var(--papel); border: 1px solid var(--linea); border-radius: 100px; padding: 6px 12px; font-size: .84rem; color: var(--tinta-2); } /* El separador sobra: ahora cada una tiene su propio contorno. */ .capacidades span::after { content: none; } } /* ======================= EL VISOR DE CAPTURAS ========================= La imagen va A TAMAÑO REAL adentro de un lienzo que scrollea en los dos ejes. Encogerla para que entre en la pantalla seria repetir el problema que vino a resolver: una captura de 1600px metida en 375 no se lee mas por estar en un modal. Lo que hace falta es poder recorrerla y pellizcarla. */ .visor { position: fixed; inset: 0; z-index: 9500; background: rgba(7, 43, 68, .93); display: none; flex-direction: column; } .visor.abierto { display: flex; } .visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #fff; font-size: .95rem; font-weight: 620; flex: 0 0 auto; } .visor-cerrar { background: rgba(255, 255, 255, .14); border: 0; color: #fff; /* 44x44: es el unico boton para salir y tiene que acertarse siempre. */ width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; } .visor-cerrar:hover { background: rgba(255, 255, 255, .24); } .visor-lienzo { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; /* Que el pellizco para agrandar funcione adentro del lienzo. */ touch-action: pan-x pan-y pinch-zoom; } /* Sin `max-width`: ese es justamente el punto. */ .visor-lienzo img { display: block; width: auto; max-width: none; height: auto; } /* La clase la pone el JS sobre cada captura que quedo enganchada, asi que la lupa y el cursor NUNCA pueden aparecer sobre algo que no se amplia: si el listener no se puso, la marca tampoco. */ .ampliable { position: relative; } .ampliable img { cursor: zoom-in; } /* LA LUPA NO ES ADORNO. En una computadora el cursor `zoom-in` ya avisa, pero en un telefono no hay cursor y no hay forma de saber que la captura se toca. Va chica y en la esquina de abajo, que es donde menos tapa: en las capturas de gestion lo que importa esta arriba. */ .ampliable::after { content: ""; position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075985' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center / 17px no-repeat; box-shadow: 0 2px 8px rgba(7, 43, 68, .28); /* Que el click llegue a la imagen y no se lo coma la lupa. */ pointer-events: none; } /* En el heroe el cartel con el nombre ocupa el pie: la lupa sube para no quedar encima del texto. */ .carrusel.ampliable::after { bottom: 74px; } .fu-lista-centro { margin: 0 auto 18px; max-width: 260px; background: var(--degrade); color: #fff; border-radius: var(--radio); padding: 14px 18px; text-align: center; box-shadow: 0 10px 24px -8px rgba(20, 102, 255, .5); } .fu-lista-centro b { display: block; font-size: 1.12rem; font-weight: 720; letter-spacing: -.02em; } .fu-lista-centro span { font-size: .86rem; color: #d6f0ff; } .fu-lista ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fu-lista li { display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 11px 12px; font-size: .92rem; font-weight: 600; color: var(--tinta); } .fu-lista li svg { flex: 0 0 auto; color: var(--marca); } /* ============================ Confianza ================================ */ .franja-confianza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra-2); overflow: hidden; } .dato { padding: 30px 26px; border-right: 1px solid var(--linea); } .dato:last-child { border-right: 0; } .dato b { display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.045em; color: var(--tinta); line-height: 1.02; font-variant-numeric: tabular-nums; } .dato span { display: block; font-size: .9rem; color: var(--suave); margin-top: 4px; } /* ====================== El recorrido con hitos ========================= Copia la forma del MAPA DE PROCESOS del propio sistema: una linea con un punto por accion, el nombre debajo y los pasos que se pueden saltear marcados como opcionales. Que el sitio hable el mismo idioma visual que la pantalla que vende es medio punto ganado antes de la demo. El largo del riel sale de --n (cuantos hitos tiene): la linea arranca en el centro del primer punto y termina en el del ultimo, para que no sobresalga por los costados. */ .recorrido + .recorrido { margin-top: clamp(38px, 5vw, 60px); } .recorrido-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; } .recorrido-titulo h3 { font-size: 1.24rem; margin: 0; } .recorrido-titulo span { font-size: .96rem; color: var(--suave); } .rieles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; } /* La linea. Arranca en el centro del primer punto y muere en el del ultimo. */ .rieles::before { content: ""; position: absolute; top: 8px; height: 2px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); background: linear-gradient(90deg, var(--marca-linea), var(--marca-clara), var(--marca-linea)); border-radius: 2px; } .hito { position: relative; padding: 0 10px; text-align: center; } .punto-hito { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin: 0 auto 16px; border-radius: 50%; background: var(--marca); /* El anillo del color de la seccion tapa la linea justo detras del punto: sin eso la raya se ve cruzando por adentro del circulo. */ box-shadow: 0 0 0 5px var(--papel); } /* Los opcionales, huecos: se ve de un vistazo cuales se pueden saltear. */ .hito--opcional .punto-hito { background: var(--papel); border: 2px dashed var(--linea-fuerte); } .hito b { display: block; color: var(--tinta); font-size: 1rem; margin-bottom: 3px; } .hito span { display: block; font-size: .88rem; color: var(--suave); line-height: 1.45; } /* La chapita de "opcional" de cada hito. Estaba en .68rem —10,9px medidos— y ademas en versalitas y con 0,09em de espaciado, que es lo que mas cuesta leer en un telefono. .78rem la deja en 12,5px, igual que el resto de los rotulos chicos de la pagina. */ .hito em { display: inline-block; margin-top: 8px; font-family: var(--mono); font-style: normal; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); border: 1px solid var(--linea-fuerte); border-radius: 100px; padding: 2px 8px; } /* ============================= Circuito ================================ */ .circuito { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .paso { position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 16px 19px; box-shadow: var(--sombra-1); } .paso:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; z-index: 2; width: 9px; height: 9px; border-top: 2px solid var(--marca-linea); border-right: 2px solid var(--marca-linea); transform: translateY(-50%) rotate(45deg); } .paso-num { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; background: var(--marca-suave); color: var(--marca-fuerte); font-family: var(--mono); font-size: .84rem; font-weight: 700; margin-bottom: 13px; } .paso b { display: block; color: var(--tinta); font-size: 1rem; margin-bottom: 2px; } .paso > span:last-child { display: block; font-size: .88rem; color: var(--suave); line-height: 1.45; } .nota-circuito { margin: 30px auto 0; max-width: 74ch; text-align: center; font-size: .98rem; } .nota-circuito b { color: var(--tinta); } /* La aclaracion que cuelga de un riel. A diferencia de .nota-circuito —que cierra las DOS listas y por eso va centrada— esta pertenece a su recorrido, asi que va alineada a la izquierda y pegada abajo. */ .nota-riel { margin: 26px 0 0; max-width: 82ch; font-size: .96rem; color: var(--tinta-2); padding-left: 18px; border-left: 2px solid var(--marca-linea); } .nota-riel b { color: var(--tinta); } /* ============================== Bento ================================== */ /* Los modulos dejan de ser 18 cajas iguales: las tres que mas se usan ocupan mas lugar. Es lo que hace que una grilla se lea como jerarquia y no como inventario. */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .celda { display: block; grid-column: span 2; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px 22px 20px; color: inherit; position: relative; overflow: hidden; box-shadow: var(--sombra-1); transition: border-color .22s, box-shadow .22s, transform .22s var(--salida); } .celda:hover { text-decoration: none; border-color: var(--marca-linea); box-shadow: var(--sombra-3); transform: translateY(-3px); } .celda-grande { grid-column: span 3; } /* SEIS AREAS EN VEZ DE DIECIOCHO MODULOS. La home tenia las 18 tarjetas del sistema. Es informacion correcta pero es un catalogo, y en una landing el catalogo cansa antes de convencer. Ahora son seis areas —cada una junta varios modulos— y el detalle de los 18 vive en sistema.html, que es la pagina que existe para explicar. Seis entran justo en la grilla de 6 columnas: dos filas de tres. */ .celda-area { grid-column: span 2; } .ver-todos { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-size: 1rem; color: var(--tinta-2); } .ver-todos b { color: var(--tinta); } .celda-ancha { grid-column: span 6; display: grid; grid-template-columns: 1.05fr 1.2fr; gap: 34px; align-items: center; padding: 34px; background: linear-gradient(135deg, var(--papel) 0%, var(--marca-suave) 100%); } .celda-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--marca-suave); color: var(--marca); margin-bottom: 16px; } .celda-icono svg { width: 22px; height: 22px; } .celda h3 { font-size: 1.06rem; margin-bottom: .4em; } .celda p { font-size: .93rem; color: var(--tinta-2); margin-bottom: 14px; line-height: 1.55; } .celda-mas { font-size: .88rem; font-weight: 620; color: var(--marca); display: inline-flex; align-items: center; gap: 5px; } .celda-ancha h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.032em; } /* ============================= Pestanas ================================ */ /* align-items: center Y NO start. La lista de cinco solapas mide 602px y la captura 327: con `start` los 275 que sobran se juntaban todos abajo de la imagen y se veia un hueco enorme. Centrada, el aire queda repartido arriba y abajo y no se lee como error. */ .pestanas { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: center; } .pestanas-lista { display: flex; flex-direction: column; gap: 7px; } .pestana { text-align: left; cursor: pointer; width: 100%; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--radio); padding: 16px 18px; transition: background .2s, border-color .2s, box-shadow .2s; position: relative; } .pestana b { display: block; color: var(--tinta); font-size: 1rem; font-weight: 630; margin-bottom: 3px; } .pestana span { display: block; font-size: .9rem; color: var(--suave); line-height: 1.5; } .pestana:hover { background: var(--papel); } .pestana[aria-selected="true"] { background: var(--papel); border-color: var(--marca-linea); box-shadow: var(--sombra-2); } .pestana[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 15px; bottom: 15px; width: 4px; border-radius: 4px; background: var(--marca); } .pestanas-panel { position: relative; } .marco { border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra-3); overflow: hidden; } .marco img { width: 100%; display: block; } .pestanas-panel .marco { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .pestanas-panel .marco.visible { position: relative; opacity: 1; pointer-events: auto; } /* ============================= Videos ================================== */ /* SIETE VIDEOS NO ENTRAN PAREJO EN NINGUNA GRILLA: con auto-fill quedaban cuatro arriba y tres abajo, con un hueco al final que se ve como error. Se resuelve con jerarquia en vez de con relleno: el primero ocupa el ancho entero y los seis que quedan van de a tres, que si divide justo. */ .rejilla-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tarjeta-video--principal { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 420px) 1fr; align-items: stretch; } .tarjeta-video--principal .tarjeta-video-tapa img { height: 100%; aspect-ratio: auto; min-height: 220px; } .tarjeta-video--principal .tarjeta-video-cuerpo { display: flex; flex-direction: column; justify-content: center; padding: 26px 30px; } .tarjeta-video--principal .tarjeta-video-cuerpo b { font-size: 1.35rem; margin-bottom: 6px; } .tarjeta-video--principal .tarjeta-video-cuerpo p { font-size: 1rem; margin-bottom: 12px; } .tarjeta-video-caps { display: block; font-size: .87rem; color: var(--suave); line-height: 1.5; } .tarjeta-video { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; color: inherit; box-shadow: var(--sombra-1); transition: transform .22s var(--salida), box-shadow .22s, border-color .22s; } .tarjeta-video:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra-3); border-color: var(--marca-linea); } .tarjeta-video-tapa { position: relative; overflow: hidden; } .tarjeta-video-tapa img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } /* El recorte que arranca solo al pasar por delante. Va ENCIMA de la miniatura y aparece con un fundido: si se mostrara el