/* Paleta del Manual de Marca Fullstock 2026. Los cinco colores oficiales son los primeros; --tenue, --borde y --acento-suave no estan en el manual y se derivan del azul oscuro y del gris de apoyo para textos secundarios, bordes y fondos suaves. --exito es el verde de WhatsApp, ajeno a la marca. */ :root { --acento: #0067f1; /* azul principal */ --acento-2: #007ef9; /* azul secundario */ --acento-osc: #243b5a; /* azul oscuro */ --texto: #243b5a; /* azul oscuro / texto */ --fondo: #f5f7fa; /* gris de apoyo */ --acento-suave: #e6f0ff; --tenue: #56698a; --borde: #e3e8f0; --exito: #16a34a; --exito-osc: #15803d; /* El "negro" de las placas de servicios (04 y 05). Tampoco está en el manual: es el azul oscuro bajado hasta casi negro, así que a simple vista es negro pero conserva el fondo azulado de la marca en vez de ser un negro ajeno. Con texto blanco da 17:1 (el azul principal da 4,94:1), o sea que es el fondo más cómodo de leer de los tres. */ --negro: #0e1726; /* "San Francisco" es la fuente propia de Apple, de licencia cerrada: no se puede subir el archivo real a este sitio. -apple-system es el stack estandar para pedir "la fuente del sistema" en vez de una en concreto: en Mac o iPhone ESA fuente es San Francisco de verdad (la nativa del equipo), y en Windows/Android cae en la fuente nativa de ahi (Segoe UI, Roboto) en vez de forzar una que no corresponde. Es la manera correcta de pedir "San Francisco" en la web sin infringir la licencia de Apple. */ --font-sf: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Scroll-snap: cada scroll (rueda del mouse o gesto de trackpad) salta COMPLETO al siguiente borde -portada, "Gestioná / Equipá", cada tarjeta 01 a 05, La empresa, Contacto- en vez de quedar a mitad. "mandatory" y no "proximity": con proximity el salto solo se sentia si ya estabas casi en el borde, y en secciones tan altas eso casi nunca pasaba. Con mandatory el scroll TIENE que aterrizar siempre en un punto de anclaje declarado. Por eso La empresa y Contacto tambien llevan scroll-snap-align, aunque sean secciones de texto normales y no paneles a pantalla completa: sin un punto despues de la tarjeta 05, no habia donde "agarrarse" mas adelante y el scroll quedaba atrapado ahi, sin dejar bajar. Los paneles a pantalla completa (portada, caminos, sol-panel) usan scroll-margin-top:62px -el alto exacto del nav-, no los 78px (nav + 16 de aire) que usan los anclajes de texto: esos 16px de mas dejaban una franja sin cubrir donde asomaba el borde de la seccion anterior. Solo en desktop: en mobile la pila pierde el alto fijo y el escalonado (ver mas abajo), y ahi el "a mitad" que se busca evitar no existe. */ @media (min-width: 861px) { /* "proximity" y no "mandatory". Con mandatory el scroll TIENE que terminar siempre sobre un anclaje declarado, y la pila de tarjetas no tiene ninguno adentro (son 5 pantallas de scroll continuo a proposito): el navegador se llevaba las cinco de un saque hasta el proximo anclaje -por eso "no se apilaban, todas juntas"-. Con proximity la portada y "Gestioná / Equipá" siguen calzando solas cuando quedan cerca, y la pila se recorre libre, que es lo que la hace fluida. scroll-margin-top 56 y no 62: la barra mide 60,4px reales (30px del logo + .95rem arriba y abajo), no los 62 que estaban puestos a ojo. Con 62 la seccion aterrizaba 1,6px MAS ABAJO del borde de la barra y ahi asomaba una linea. Con 56 aterriza 4px por debajo del borde, o sea tapada por la barra: nunca hay hueco, aunque la fuente del sistema mueva un poco el alto de la fila. */ html { scroll-snap-type: y proximity; } .portada, #caminos, #que-hacemos { scroll-snap-align: start; scroll-margin-top: 56px; } #nosotros, #contacto { scroll-snap-align: start; } /* #que-hacemos era la unica seccion de la pagina sin punto de snap propio (a las demas siempre se les puso, esta se quedo afuera sin querer). Con scroll-snap-type:proximity activo en , saltar por ancla a un punto que NO es un punto de snap hace que el navegador "pelee" el salto -lo corrige hacia el punto de snap valido mas cercano en vez de dejarlo donde se pidio-. Es lo que rompia el link "Qué hacemos" del nav (y quedaba sospechoso el de "Sistema" tambien, que entra a esta misma seccion): en vez de aterrizar en el titulo, terminaba en cualquier otro punto valido de la pagina, a veces bien lejos. Con esta linea, "Qué hacemos" pasa a ser un punto de snap valido y el salto ya no tiene contra que pelear. */ /* (el alto de esas dos secciones, que es la otra mitad del problema de las lineas blancas, esta en sus propias reglas mas abajo) */ } /* La pagina es blanca. El azul de marca no va nunca de fondo: aparece en la barra y en los paneles, que son los bloques de color sobre el blanco. */ body { margin: 0; font-family: "Montserrat", sans-serif; background: #fff; color: var(--texto); line-height: 1.55; } /* Los titulos en negrita -h1 (oculto), h2, h3- pasan a la fuente del sistema (ver --font-sf en :root). OJO: el Manual de Marca dice Montserrat Bold para titulos; esto es una desviacion a proposito, pedida para acercarse a la estetica de Apple. Si se quiere volver al manual, alcanza con borrar esta regla. */ h1, h2, h3 { font-family: var(--font-sf); } a { color: inherit; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: .8rem; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; border: none; } .btn-primario { background: var(--acento); color: #fff; } .btn-primario:hover { background: var(--acento-osc); } .btn-secundario { background: #fff; color: var(--acento); border: 2px solid var(--acento-suave); } .btn-secundario:hover { border-color: var(--acento); } /* Blanco con el icono verde (el color con el que WhatsApp se reconoce) y el texto en gris -no en negro ni en el azul de marca: es un boton secundario, no quiere competir con "Mandanos un mail"-. */ .btn-wa { background: #fff; color: var(--tenue); } .btn-wa svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--exito); } .btn-wa:hover { background: var(--fondo); } /* ── Nav ── Siempre visible, pegada arriba. Es azul: sobre la pagina blanca, la barra es uno de los bloques de color de la marca. Tipografia liviana (medida directo de apple.com/la: los links van a 12px, peso 400, sin mayuscula, sin gap enorme). Nos acercamos a esa escala, aunque la estructura NO es la de Apple: a pedido, "Proba gratis" vuelve a ir en el centro, dividiendo dos grupos (sistemas a la izquierda, nav general a la derecha) -como el boceto original del sitio-. El boton es position:absolute centrado (left:50%), asi que su posicion horizontal SI depende de que los dos grupos no lo alcancen por los costados: ver la medicion del punto de corte a hamburguesa, mas abajo. Lo que NO depende de nada externo es su alto: esta fuera del flujo de .nav-links, asi que nunca comparte caja con el resto del contenido -antes, cuando SI compartia la altura de la fila, se veia cortado en algunos navegadores-. */ header.nav { position: sticky; top: 0; background: var(--acento); z-index: 30; font-family: var(--font-sf); } /* padding-inline (no el shorthand "padding"): .wrap.nav-row tiene mas especificidad (dos clases) que .nav-row de aca abajo, asi que si esta regla usara el shorthand completo pisaria el padding-block vertical de esa otra regla -paso exactamente eso: la fila quedaba sin aire arriba y abajo, pegada al contenido, y no se notaba porque align-items:center seguia centrando todo igual dentro de una caja mas baja de lo pensado. */ .wrap.nav-row { max-width: 1440px; padding-inline: clamp(1.25rem, 3vw, 2.75rem); } .nav-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: .95rem; } .nav-marca { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .88rem; color: #fff; text-decoration: none; letter-spacing: -.005em; flex-shrink: 0; } .nav-marca .logo { width: 30px; height: 30px; flex-shrink: 0; } /* "Proba gratis" va centrado en la BARRA, con los sistemas a la izquierda y la nav general a la derecha. Dos detalles que ya fallaron antes: 1) .nav-links se posiciona absoluta y cubre toda la fila (inset:0) en vez de ser un item mas del flex. Si es un item, arranca despues del logo, y entonces su centro NO es el centro de la barra: el boton quedaba corrido ~57px a la derecha. Cubriendo toda la fila, el centro del grid ES el centro de la barra. 2) Grid de 3 columnas y no flex con gap: con flex, el "centro" es el centro del bloque sistemas+gap+izq, que se corre si un grupo pesa mas que el otro ("Qué hacemos / Tienda / Contactanos" es mas ancho que "LIBRA / En desarrollo / Sistema") -por eso el boton terminaba pisando "Sistema"-. Con dos columnas 1fr iguales a los costados, cada grupo se pega al borde interno de SU columna y esos dos bordes quedan siempre a la misma distancia del centro, sin importar cuanto texto tenga cada uno. La columna del medio no tiene contenido (el boton flota encima, position:absolute): solo reserva el hueco. pointer-events: el grid tapa el logo, que queda debajo. Con none en el contenedor y auto en los hijos, el click al logo pasa de largo. */ .nav-links { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr clamp(9rem, 13vw, 11.5rem) 1fr; align-items: center; pointer-events: none; } .nav-links > * { pointer-events: auto; } .nav-sistemas { grid-column: 1; justify-self: end; } .nav-izq { grid-column: 3; justify-self: start; } /* Hamburguesa (solo mobile) */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .3rem; color: #fff; } .nav-toggle svg { width: 28px; height: 28px; } /* Debajo de 1080px la barra completa no entra y pasa a hamburguesa. Esto ya se movio varias veces (1120 -> 1200 -> 820 -> 960 -> 1080) porque cada calculo "ajustado" -con poco margen de sobra- termino siendo insuficiente en un navegador de verdad: el ancho de un texto depende de la fuente que el sistema operativo realmente use, y esta ventana de prueba no la mide igual que Windows/Mac/el navegador del usuario. "Proba gratis" volvio a ir centrado (dividiendo sistemas a la izquierda de la nav general a la derecha), asi que el punto critico volvio a ser el hueco a cada lado del boton -no solo si la fila entera entra-. Medido forzando el layout de escritorio: a 900px los dos grupos SE PISAN con el boton (hueco negativo); a 1050px sobran 105px del lado mas ajustado (izquierda). El corte sube a 1080 para tener mas margen todavia. Si hay que tocar esto de nuevo, medir con .nav-links forzado a fila (ver metodo en el historial de commits) y dejar bastante mas de 100px de sobra en el hueco mas chico, no menos. */ @media (max-width: 1080px) { .nav-toggle { display: block; } /* display:flex y bottom:auto pisan el grid de escritorio: alla .nav-links cubre toda la fila (inset:0), aca es el desplegable que cuelga abajo. */ .nav-links { position: absolute; top: 100%; bottom: auto; left: 0; right: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; /* Azul como la barra: los links son blancos y sobre fondo claro no se verian */ background: var(--acento); box-shadow: 0 18px 30px rgba(0,0,0,.25); padding: .5rem 1.5rem 1.25rem; max-height: calc(100vh - 70px); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; } .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; } } .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } section { padding: 4.5rem 0; } /* La barra es fija: sin esto, al saltar a un ancla el titulo queda tapado */ section[id] { scroll-margin-top: 78px; } .sec-tit { text-align: center; margin-bottom: 2.5rem; } .sec-tit h2 { font-size: 2.1rem; font-weight: 900; margin: 0 0 .5rem; letter-spacing: -.01em; } .sec-tit p { color: var(--tenue); font-size: 1.05rem; margin: 0; max-width: 640px; margin-inline: auto; } /* Pastilla arriba del titulo de seccion ("Los dos caminos", y ahora tambien "Sistemas"/"Servicios", .sol-grupo mas abajo, la usan): mismo azul del acento pero muy suave, como un rotulo de categoria. */ .sec-tag { display: inline-flex; align-items: center; margin-bottom: .9rem; padding: .4rem 1.1rem; border-radius: 999px; background: rgba(0,103,241,.12); color: var(--acento); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } /* Un tramo de texto pintado con un degradado del azul de marca a un celeste. El celeste no esta en el Manual de Marca: se deriva del azul secundario aclarandolo, igual que --tenue y --borde. El truco es recortar el fondo a la forma de las letras (background-clip:text) y dejar el texto transparente para que se vea a traves. El color de base va aparte y @supports solo lo pone transparente donde el recorte funciona: sin esa guarda, un navegador que no lo soporte mostraria el texto invisible. */ .degradado { color: var(--acento-2); } /* El punto final va pegado al span de color: sin envolverlo aparte, quedaba mezclado visualmente con el degradado de la palabra de al lado en vez de leerse en el mismo azul oscuro del resto del titulo. */ .sec-tit-punto { color: var(--texto); } @supports (background-clip: text) or (-webkit-background-clip: text) { .degradado { background-image: linear-gradient(90deg, var(--acento) 0%, #3fb6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } } /* El gris de apoyo arranca aca: las dos pantallas de arriba (portada y "Elegí tu camino") van en blanco, y este cambio de fondo es lo que las separa de la pila de soluciones. */ #que-hacemos { background: var(--fondo); } /* ── Soluciones ── .sol-scroll es el contenedor de cada grupo (Sistemas usa el relevo de mas abajo, Servicios son banners aparte). Cada .sol-panel es un bloque normal, mas alto que la pantalla (da lugar de scroll). Adentro, .wrap se estira a esa misma altura para que .sol-caja (position:sticky) tenga un recorrido real donde quedar fija. Cada caja se fija un poco mas abajo que la anterior (variable --i, puesta inline por tarjeta): al llegar la siguiente, no tapa de golpe a la de atras, sino que asoma su franja superior -con el numero- detras, algo desenfocada. Asi se ve la pila (01, 02, 03...) en vez de un corte seco. */ .sol-scroll { position: relative; } /* ── Relevo: snap del SCROLL DE LA PAGINA, no uno propio ── Dos versiones anteriores, las dos con problemas: 1) Un translateY calculado por scroll (scrubbing 1 a 1): confuso, sin un punto en el que una placa se sintiera "lista". 2) Un scroll propio adentro (.sol-viewport con su overflow), pegado con sticky: quedaba atrapado al llegar al final -arreglado sacando overscroll-behavior-, pero seguia sintiendose poco fluido al volver para arriba: un contenedor con scroll DENTRO de otro con scroll tiene una fisica impredecible segun la velocidad del gesto -a veces avanzaba una placa, a veces "flotaba" varias pantallas de un tiron-, porque cada gesto de rueda se reparte entre los dos scrolls de una forma que el navegador decide, no algo previsible. Esta version no tiene scroll propio: las placas son simples bloques de 100vh, uno atras del otro, en el scroll UNICO de la pagina -el mismo que se usa en todo el resto del sitio, con la misma fisica en todos lados-. Lo que cambia es que mientras la seccion esta a la vista, JS le pone scroll-snap-type:mandatory a (por CSS ya es "proximity" en desktop, ver mas abajo): eso hace que CADA PANTALLA de scroll dentro de la seccion termine trabada en el borde de una placa, sin que haga falta ningun contenedor ni calculo aparte. Al salir de la seccion, JS se lo saca y vuelve a la pila general del sitio (scroll-snap-type:proximity). El movimiento de abajo hacia arriba sale solo, porque es flujo normal del documento: la placa que sigue esta simplemente MAS ABAJO en el HTML, y el snap la trae. */ .sol-relevo { position: relative; } /* position:static explicito -no es el default heredado por accidente, es a proposito-: hubo una vez un bug feo por esto. Una regla vieja y mas generica, ".sol-panel" (de un patron anterior que ya no existe en ningun otro lado), le ponia position:sticky;top:0 a estas MISMAS placas -.sol-relevo .sol-panel hereda de .sol-panel si no dice lo contrario-. Las tres quedaban pegadas en el mismo lugar de la pantalla en vez de una debajo de la otra en flujo normal: bajar se veia bien de casualidad (la que viene despues en el HTML tapa a la anterior, las dos ya superpuestas), pero el snap calculaba puntos sobre posiciones que no eran las reales, y al invertir para subir la pagina quedaba completamente trabada, sin moverse. Esa regla vieja ya se borro, pero esto queda explicito para que otra regla futura no vuelva a colarse por atras sin que se note en la pantalla. padding-top: la placa va centrada en su pantalla, que ocupa la pantalla entera incluido lo que tapa la barra de navegacion. Sin esto, la placa se centra demasiado arriba y su borde superior queda debajo de la barra. */ .sol-relevo .sol-panel { position: static; height: 100vh; padding-top: 62px; box-sizing: border-box; display: flex; align-items: center; scroll-snap-stop: always; } .sol-relevo .sol-panel .wrap { height: auto; } /* 80vh y no el 100vh-86px de antes: se pidio bajarla un poco sin que se note la siguiente placa asomando. Achicar la TARJETA sin tocar el PANEL (que sigue midiendo 100vh en .sol-relevo .sol-panel, de arriba) logra las dos cosas a la vez: el recorrido de scroll, los puntos de snap y el "empujon" de una placa a otra quedan exactamente igual que antes -nada de eso depende de cuanto mida la tarjeta-, y lo unico que cambia es el aire que queda arriba y abajo de la tarjeta, que se llena solo con el fondo de la seccion (el gris de #que-hacemos), nunca con la placa de al lado. */ .sol-relevo .sol-caja { margin-top: 0; min-height: 80vh; } @media (min-width: 861px) { .sol-relevo .sol-panel { scroll-snap-align: start; } } /* ── Servicios ── No son placas: es UN bloque con degrade propio (no --negro liso: un degrade diagonal mas azulado, con "humo" animado adentro), partido en dos columnas por una linea de 1px -el corte reemplaza al gap entre tarjetas de antes-. Que sea otra cosa es justamente lo que los separa de los sistemas, sin depender de que el color haga todo el trabajo. */ .srv-bloque { position: relative; display: flex; border-radius: 1.25rem; overflow: hidden; background: linear-gradient(135deg, #0b1a33 0%, #112544 100%); box-shadow: 0 24px 48px rgba(6,20,46,.22); } /* El "humo": dos manchas circulares de acento, difuminadas, cada una con su propio recorrido y duracion (16s/20s) para que no se muevan sincronizadas -eso es lo que lee como algo vivo y no como un efecto repetido-. Opacidad mas alta que en las placas blancas (.sol-caja-- top-claro/--comercios): el fondo de este bloque ya es azul oscuro, asi que el mismo humo casi transparente se perdia contra el fondo en vez de resaltar como pasa sobre blanco. */ .srv-humo { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--acento) 0%, rgba(0,103,241,0) 70%); filter: blur(10px); } .srv-humo--a { top: -140px; left: -80px; width: 560px; height: 560px; opacity: .48; animation: srvHumoA 16s ease-in-out infinite; } .srv-humo--b { bottom: -180px; right: -100px; width: 640px; height: 640px; opacity: .4; animation: srvHumoB 20s ease-in-out infinite; } /* "Ola": barrido horizontal grande (translateX) con un sube-y-baja vertical en el medio del recorrido -eso es lo que lee como oleaje en vez de una mancha que solo respira in situ-. Los pasos intermedios (25%/75%) son los que arman la curva; sin ellos el translateY de la mitad se veia como un salto, no como una onda continua. */ @keyframes srvHumoA { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(90px, -30px) scale(1.05); } 50% { transform: translate(180px, 10px) scale(1.15); } 75% { transform: translate(90px, 45px) scale(1.08); } } @keyframes srvHumoB { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-80px, 25px) scale(1.06); } 50% { transform: translate(-160px, -15px) scale(1.1); } 75% { transform: translate(-80px, -40px) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .srv-humo { animation: none; } } .srv-col { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.75rem, 3.5vw, 3.5rem); text-decoration: none; color: #fff; transition: background .3s ease; } .srv-col:hover { background: rgba(255,255,255,.04); } /* Link invisible que tapa toda la tarjeta (stretched link): mantiene el "click en cualquier lado" que tenia cuando .srv-col era un , ahora que la tarjeta tiene DOS contactos y no puede serlo. z-index:0, por debajo del resto del contenido de .srv-col (que es z-index:1 -ver arriba-), asi que no tapa al link de mail. */ .srv-col-cubrir { position: absolute; inset: 0; z-index: 0; } .srv-divisor { position: relative; z-index: 1; flex-shrink: 0; width: 1px; margin: clamp(1.75rem, 3.5vw, 3.5rem) 0; background: rgba(255,255,255,.12); } .srv-ico { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: .875rem; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; } .srv-ico svg { width: 26px; height: 26px; color: var(--acento); } .srv-texto { display: flex; flex-direction: column; gap: .75rem; } .srv-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .srv-titulo { display: inline-block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -.01em; line-height: 1.15; color: #fff; transition: transform .3s ease; } .srv-col:hover .srv-titulo { transform: translateX(4px); } .srv-desc { font-size: 1rem; line-height: 1.55; font-weight: 400; color: rgba(255,255,255,.68); max-width: 46ch; } .srv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .srv-lista li { position: relative; padding-left: 1.15rem; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.75); } .srv-lista li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); } /* .srv-pie: fila con la flecha (WhatsApp, la tarjeta entera) y el link de mail aparte -antes el margin-top:auto vivia en .srv-flecha sola, ahora empuja a este contenedor entero al fondo de la tarjeta. */ .srv-pie { margin-top: auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .srv-flecha { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s ease; } .srv-flecha svg { width: 21px; height: 21px; } .srv-col:hover .srv-flecha { transform: scale(1.1) translateX(4px); } /* position:relative + z-index:1 (heredado de .srv-col, que ya es z-index:1 con position:relative): alcanza para quedar arriba de .srv-col-cubrir (z-index:0) y clickearse aparte, sin abrir WhatsApp por error. */ .srv-mail { position: relative; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.68); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(255,255,255,.35); transition: color .2s ease, text-decoration-color .2s ease; } .srv-mail:hover { color: #fff; text-decoration-color: #fff; } @media (max-width: 860px) { .srv-bloque { flex-direction: column; } .srv-col { padding: 1.75rem; gap: 1.25rem; } .srv-divisor { width: auto; height: 1px; margin: 0 1.75rem; } .srv-humo--a { width: 320px; height: 320px; top: -80px; left: -60px; } .srv-humo--b { width: 360px; height: 360px; bottom: -100px; right: -60px; } } /* flex-column y no un bloque comun: en un bloque, el margin-top de la tarjeta se COLAPSA con el del contenedor y en vez de bajar la tarjeta mueve la caja entera -las cinco terminaban apiladas en el mismo lugar, sin escalon-. En un contenedor flex los margenes no colapsan. */ /* Toda la seccion usa un ancho propio, bastante mayor que el .wrap comun de 1180px: mas grandes, las placas tienen mas presencia y separan mejor una solucion de la siguiente. Mismo criterio que .wrap.caminos-grid. Va tambien en los titulos de grupo y en los banners para que los bordes izquierdos de todo queden en la misma linea. */ .wrap--ancho, .sol-panel .wrap { max-width: 1480px; } .sol-panel .wrap { height: 100%; display: flex; flex-direction: column; } .sol-caja { /* La tarjeta ya no es sticky: la que se pega es el panel (arriba). Aca solo baja un escalon por tarjeta, para que la de atras asome por arriba y se vea la pila. El escalon va en vh y no en px para que en una notebook de 768px se achique en la misma proporcion que la pantalla y la 05 no se salga por abajo. El escalon se achico (era 11vh de base y 4vh de paso) junto con el alto del panel: la pila mas larga es la de Sistemas, con 3 tarjetas, asi que el escalon mas grande es --pila-base + 2 pasos = 13vh. Eso mas el alto de la tarjeta es lo que tiene que entrar en el panel (ver --panel-alto, mas abajo). */ --pila-base: 7vh; --pila-paso: 3vh; /* ── Los colores de la placa, en variables ── Cada placa tiene su fondo (azul / blanco / negro) y TODO lo que vive adentro tiene que acompanarlo: el badge, las listas, el panel de tarjetas, los botones. Antes esos valores estaban escritos a mano -blanco al 16% aca, #fff alla-, asi que una placa blanca dejaba la mitad de sus cosas invisibles. Con las variables, cambiar de fondo es cambiar este bloque y nada mas. OJO con los textos: sobre el azul principal el blanco pleno da 4,94:1, apenas por encima del minimo, y cualquier transparencia cae debajo (ver CLAUDE.md). Por eso --placa-texto nunca es un blanco translucido: la jerarquia se hace con tamano y peso. Los rellenos y bordes si pueden ser translucidos, porque no se leen. */ --placa-fondo: var(--acento); --placa-texto: #fff; /* todos los textos */ --placa-suave: #fff; /* textos secundarios */ --placa-caja: rgba(255,255,255,.12); /* relleno de las cajitas internas */ --placa-borde: rgba(255,255,255,.22); /* bordes y lineas divisorias */ --placa-panel: #fff; /* el panel claro de las tarjetas ilustrativas */ --placa-panel-item: var(--fondo); /* cada fila adentro de ese panel */ --placa-btn: #fff; /* boton solido */ --placa-btn-txt: var(--acento); --placa-btn-hover: var(--fondo); /* flex-shrink:0 porque la tarjeta es hija de un contenedor flex en columna (.sol-panel .wrap). Sin esto, cuando el panel era mas bajo que la tarjeta, el flex la APRETABA en vez de dejarla crecer: quedaba mas baja que su contenido -que se desbordaba por abajo- y ademas las tarjetas apiladas median distinto que las sueltas de Servicios, que no tienen contenedor de alto fijo. */ flex-shrink: 0; position: relative; margin-top: max(74px, calc(var(--pila-base) + var(--i, 0) * var(--pila-paso))); /* Esquinas rectas, como las placas de "Elegí tu camino": bloques bien definidos en vez de tarjetas flotando. Con el canto vivo cada placa se recorta mas del fondo y se distingue mejor de la de al lado. */ background: var(--placa-fondo); border-radius: 0; padding: var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)); /* El numero de la pila es position:absolute y termina a ~2,35rem del borde de arriba. Si el aire de la tarjeta es menor que eso -en celular es 1,25rem, y en desktop angosto el clamp baja a 2,2rem-, el numero queda pisando la linea de categoria ("02" encima de "E-COMMERCE · TERCER SISTEMA"). Este minimo lo deja siempre por encima del texto. */ padding-top: max(3rem, var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem))); /* Las cinco placas usan el mismo formato, pero su contenido no mide exactamente lo mismo (un titulo que parte en dos lineas, una descripcion mas larga) y quedaban con hasta 70px de diferencia, que en una pila donde se ve la franja de la de atras se nota. Este minimo las empareja: la mas alta manda y las demas la alcanzan. Si la pantalla es muy baja, el contenido gana y vuelven a diferir un poco -preferible a recortarlo-. El tope: la ultima tarjeta de un grupo arranca en 11vh + 2 escalones de 4vh = 19vh, asi que 19 + 72 = 91vh y todavia entra en la pantalla. */ width: 100%; min-height: 72vh; /* PRUEBA: sin sombra, y sin desenfoque en las de atras. Si no convence, se vuelve al commit anterior. */ border-top: 1px solid var(--placa-borde); } /* La placa blanca (02, el sistema que todavia se esta desarrollando). Lleva borde completo y no solo la linea de arriba: el fondo de la seccion es el gris de apoyo (#F5F7FA), casi blanco, asi que sin borde la placa no se distinguiria de la pagina. */ .sol-caja--blanca { --placa-fondo: #fff; --placa-texto: var(--texto); --placa-suave: var(--tenue); --placa-caja: var(--fondo); --placa-borde: var(--borde); --placa-panel: var(--fondo); --placa-panel-item: #fff; --placa-btn: var(--acento); --placa-btn-txt: #fff; --placa-btn-hover: var(--acento-osc); border: 1px solid var(--borde); } /* Las placas negras (04 y 05, los servicios). Los textos siguen siendo blancos, asi que solo cambia el fondo. */ .sol-caja--negra { --placa-fondo: var(--negro); } /* ── PRUEBA: de la mitad para arriba, en claro ── Solo el bloque de titulo+carrusel (.sol-grid) invierte a un panel gris de apoyo (--fondo, el mismo "casi blanco" de toda la pagina, no blanco puro) con texto oscuro; el bloque de funciones de mas abajo sigue en el azul de la placa, sin tocar. Mismo truco que .sol-caja--blanca -pisar las variables --placa-*-, pero aca solo dentro de .sol-grid, no en toda la tarjeta: como esas variables se heredan, todo lo que ya lee var(--placa-texto)/var(--placa-btn)/etc adentro del grid (titulo, parrafo, boton, indicador del carrusel) se acomoda solo. El panel se "sangra" con margen negativo hasta los bordes de la tarjeta -si no, quedaria como un recuadro suelto en vez de una mitad de placa- y el padding de abajo tapa el hueco hasta la linea que ya separa .sol-funciones, para que el corte quede justo ahi. El badge ("01") no esta adentro de .sol-grid -es hermano, position: absolute-, asi que no hereda estas variables: se corrige aparte. */ /* Sin borde arriba: .sol-caja trae un border-top de serie (la linea que separa una placa de la siguiente en la pila azul), pero es semi- transparente BLANCO -pensado para notarse apenas sobre el azul de las otras placas-. Sobre el panel claro de esta, ese blanco dejaba pasar el azul de fondo de .sol-caja (que sigue ahi, debajo del panel) y se veia como una linea celeste llamativa arriba de todo. */ .sol-caja--top-claro { border-top: none; } /* Azul de marca SOLIDO (no el suave de .sec-tag): son de los pocos puntos de color solido que quedan mientras se navega la pagina, ahora que las placas son blancas. Mismo tratamiento que el "02" de Pivoo (.pivoo-num, mas abajo), para que los tres numeros lean igual. */ .sol-caja--top-claro > .sol-badge { background: var(--acento); color: #fff; } .sol-caja--top-claro .sol-grid--arriba { --placa-texto: var(--texto); --placa-suave: var(--tenue); --placa-caja: #fff; --placa-borde: var(--borde); --placa-btn: var(--acento); --placa-btn-txt: #fff; --placa-btn-hover: var(--acento-osc); /* Blanco puro, no --fondo: --fondo es el mismo "casi blanco" que ya usa el fondo de toda la seccion "Que hacemos" por detras, asi que con ese tono el panel no se distinguia del fondo de la pagina y se combinaban. border-top: esta caja es la que de verdad se ve (bg blanco que sangra hasta los bordes via el margen negativo) -.sol-caja, por debajo, sigue azul pero tapado del todo, asi que ponerle un borde ahi no serviria de nada-. Sin esta linea, el borde superior de la placa se perdia contra el gris de fondo de la seccion. */ background: #fff; border-top: 1px solid var(--borde); margin: calc(var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) * -1) calc(var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) * -1) 0; padding: max(3rem, var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem))) var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) 1.1rem; /* width:100% (heredado de .sol-grid) se queda corto: resuelve al 100% del CONTENIDO ya angosto por el padding de la caja, y como es un valor fijo (no auto), el margen negativo de arriba solo CORRE la caja hacia la izquierda en vez de ensancharla -el borde derecho quedaba adentro, sin sangrar, y se veia una franja azul de sobra en ese lado-. width: auto deja que el ancho se recalcule solo a partir de esos margenes. */ width: auto; } /* Titulo y logo mas grandes, como en el lienzo de referencia -ahi el h1 iba a 76px y el icono a 72px; aca se acercan pero sin llegar a pisar el resto del panel-. Solo en Libra. */ /* Azul de marca, como el logo de Libra (no el azul oscuro de texto), y sin el tracking negativo de .sol-titulo: a este tamaño y peso 900 las letras quedaban pegadas. */ .sol-caja--top-claro .sol-titulo { font-size: clamp(3rem, 5.5vw, 4.75rem); color: var(--acento); letter-spacing: .01em; } /* La pastilla blanca detras del logo era para separarlo del azul de la placa -sin ella, el cuadrado azul del icono se perdia contra ese mismo azul de fondo-. Ahora que este panel es blanco, el icono ya se distingue solo: la pastilla sobra (queda como un doble marco blanco). */ /* Logo nuevo (libra-logo-nuevo.webp): transparente y ya recortado justo al isologo, sin margen de sobra -a diferencia del anterior, no hace falta aspect-ratio+cover para recortar nada, con object-fit:contain alcanza. */ .sol-caja--top-claro .sol-marca-ico { background: transparent; padding: 0; box-shadow: none; width: 100%; max-width: clamp(14rem, 40vh, 26rem); } .sol-caja--top-claro .sol-marca-ico img { display: block; width: 100%; height: auto; object-fit: contain; } /* "Funciones destacadas": en el lienzo el titulo y la bajada van en la MISMA fila (titulo a la izquierda, texto a la derecha) y la grilla de tarjetas ocupa el ancho completo debajo -no una columna angosta al costado, que es como quedan hoy las otras dos placas-. Solo Libra pasa a este formato: las otras dos siguen con el titulo lateral. */ .sol-caja--top-claro .sol-funciones { display: flex; flex-direction: column; gap: 1.2rem; } .sol-caja--top-claro .funciones-tit { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .sol-caja--top-claro .funciones-tit h5 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); } .sol-caja--top-claro .funciones-tit p { max-width: 26rem; font-size: .95rem; text-align: right; } /* Los puntos del carrusel eran blancos translucidos -pensados para verse sobre azul-; sobre el gris quedaban casi invisibles. */ .sol-caja--top-claro .capturas-indicador-btn { background: var(--borde); } .sol-caja--top-claro .capturas-indicador-btn.on { background: var(--acento); } /* ── PRUEBA: foto real de fondo en "Funciones destacadas" ── Misma idea que el lienzo aparte donde probamos el rediseño de Libra: de la mitad de la placa para abajo, en vez de azul liso, va la foto del mostrador oscurecida con un degrade -para que el texto blanco y las tarjetas "glass" (ya translucidas, sin tocar) se seiban leyendo. Se "sangra" a los bordes de la tarjeta con margen negativo, igual que hace .sol-grid--arriba arriba, para que la foto llegue hasta el borde de la placa y no quede como un recuadro suelto. Solo en Libra (va colgado de --top-claro, que hoy solo tiene esa placa). */ .sol-caja--top-claro .sol-funciones { margin: 0 calc(var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) * -1) calc(var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) * -1); padding: 1.6rem var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)); border-top: none; background-image: linear-gradient(160deg, rgba(3,9,26,.88), rgba(0,45,120,.62)), url('/imagenes/libra-funciones-fondo.webp'); background-size: cover; background-position: center; } /* La placa tiene min-height (72/80vh): cuando el contenido es mas bajo que eso, antes sobraba una franja lisa al fondo -invisible sobre el azul liso, pero desde que esta mitad tiene su propia foto, esa franja se veia como un margen azul de mas debajo de la foto-. display:flex + flex:1 en .sol-funciones hace que esta mitad estire y la foto llegue de verdad hasta el borde inferior real de la placa. Solo en Libra: las otras dos placas no tienen este problema porque nunca cambiaron su fondo. */ .sol-caja--top-claro { display: flex; flex-direction: column; } .sol-caja--top-claro .sol-funciones { flex: 1 0 auto; } /* ── Libra en escritorio: tamaños y centrado ── La placa mantiene su alto de 80vh (el de las tres placas) y todo lo de adentro se ajusta para entrar ahi. Los tamaños que mas pesan en el alto (titulo, logo, captura, aire entre bloques) van atados al alto de la pantalla con vh, asi guardan la misma proporcion en una notebook de 768px que en un monitor de 1080, en vez de saltar por breakpoints. Cada mitad centra su contenido en su espacio. */ @media (min-width: 861px) { .sol-caja--top-claro .sol-grid--arriba { flex: 1 1 auto; align-items: center; align-content: center; padding-top: 2.8rem; padding-bottom: clamp(.9rem, 2.2vh, 1.5rem); column-gap: clamp(2.5rem, 5vw, 4.5rem); } .sol-caja--top-claro .sol-info { justify-content: center; } /* Contra el borde derecho: asi el margen exterior de la captura es el mismo que el del texto a la izquierda, y el aire que sobra queda al medio, entre las dos columnas. */ .sol-caja--top-claro .sol-capturas { height: auto; align-items: flex-end; } /* La captura es 2:1, asi que su alto sale de su ancho: se topea el ancho en funcion del alto de pantalla para que nunca empuje la placa. */ .sol-caja--top-claro .capturas-marco, .sol-caja--top-claro .capturas-indicador { width: 100%; max-width: calc(58vh - 60px); } .sol-caja--top-claro .sol-num { font-size: .8rem; letter-spacing: .18em; color: var(--tenue); opacity: 1; margin-bottom: clamp(.6rem, 1.2vh, .9rem); } .sol-caja--top-claro .sol-marca { gap: 1rem; margin-bottom: clamp(.7rem, 1.3vh, 1rem); } .sol-caja--top-claro .sol-info p { font-size: 1.05rem; line-height: 1.45; max-width: 32rem; color: var(--tenue); margin-bottom: clamp(1rem, 1.8vh, 1.4rem); } /* El boton va a su ancho, pegado al texto -no estirado a toda la columna ni empujado al fondo con margin-top:auto-, como en el lienzo. */ .sol-caja--top-claro .sol-info .btn { margin-top: 0; align-self: flex-start; } /* align-items:stretch: sin esto el titulo+bajada medía lo que su texto y la bajada quedaba flotando al medio en vez de ir contra el borde derecho. */ .sol-caja--top-claro .sol-funciones { flex: 1 1 auto; justify-content: center; align-items: stretch; gap: clamp(.6rem, 1.5vh, .9rem); padding-top: clamp(.9rem, 2.2vh, 1.4rem); padding-bottom: clamp(.9rem, 2.2vh, 1.4rem); } .sol-caja--top-claro .funciones-tit h5 { font-size: clamp(1.5rem, 3.6vh, 2rem); } .sol-caja--top-claro .funciones-tit p { margin: 0; font-size: .9rem; } .sol-caja--top-claro .funciones-grid--grande { gap: clamp(.6rem, 1.1vh, .8rem); } .sol-caja--top-claro .funciones-grid--grande .funcion { padding: clamp(.6rem, 1.4vh, .9rem) 1rem; gap: .45rem; } .sol-caja--top-claro .funciones-grid--grande .funcion-ico--img, .sol-caja--top-claro .funciones-grid--grande .funcion-ico--marca { width: 40px; height: 40px; } .sol-caja--top-claro .funciones-grid--grande .funcion-ico--img img, .sol-caja--top-claro .funciones-grid--grande .funcion-ico--marca img { width: 26px; height: 26px; } .sol-caja--top-claro .funciones-grid--grande .funcion h6 { font-size: 1rem; } .sol-caja--top-claro .funciones-grid--grande .funcion p { font-size: .85rem; } } /* ── Placa 02: Pivoo ── Tiene marca propia (manual de Pivoo): Azul Real #0A3D62 para textos, franja, boton e iconos; abajo el degrade de la mascota, Lila Malva #A87CA3 a Turquesa #00D2D3. Misma estructura que Libra: franja, panel blanco con logo + texto, y funciones abajo; 80vh de alto con los tamaños atados al alto de pantalla para que entre en cualquier monitor. */ .sol-caja--pivoo { --pivoo-azul: #0A3D62; --pivoo-lila: #A87CA3; --pivoo-turquesa: #00D2D3; --placa-fondo: #fff; --placa-texto: var(--pivoo-azul); --placa-suave: #4a5d73; --placa-caja: #fff; --placa-borde: rgba(10,61,98,.12); --placa-btn: var(--pivoo-azul); --placa-btn-txt: #fff; --placa-btn-hover: #072c47; display: flex; flex-direction: column; /* border-top visible (antes "none"): a diferencia de Libra, aca la placa SI es blanca de entrada (--placa-fondo:#fff arriba, sin truco de margen negativo), asi que la linea cae justo en el borde real de la caja -sin ella se perdia contra el gris de fondo de la seccion-. */ border-top: 1px solid var(--borde); padding-top: 0; } /* "PRÓXIMAMENTE": cada letra en su propia ficha de vidrio azul redondeada, juntas y centradas arriba de la placa. El vidrio sale del degrade de la ficha, el brillo en la mitad de arriba (::after) y el filo de luz en el borde superior. */ .pivoo-franja { display: flex; justify-content: center; align-items: center; gap: .3rem; padding-top: clamp(.8rem, 1.8vh, 1.4rem); line-height: 1; } .pivoo-franja > span[aria-hidden] { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: .5rem; font-size: .75rem; font-weight: 800; color: #fff; background: linear-gradient(160deg, rgba(10,61,98,.96), rgba(10,61,98,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.25), 0 4px 10px rgba(10,61,98,.28); } .pivoo-franja > span[aria-hidden]::after { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.04)); pointer-events: none; } .sol-caja--pivoo .sol-grid--arriba { flex: 1 1 auto; align-items: center; align-content: center; padding: clamp(.8rem, 2vh, 2.6rem) 0; column-gap: clamp(2.5rem, 5vw, 4.5rem); } /* El archivo nuevo (mas resolucion) viene cuadrado (2000x2000) con el isotipo+wordmark centrado y mucho aire blanco arriba/abajo -no se recorto el archivo en si, para no arriesgarse a corromper el binario editandolo a mano-. aspect-ratio + overflow:hidden en el contenedor "encuadran" la franja central (donde esta el dibujo) y object-fit:cover la agranda hasta llenar ese encuadre, recortando el aire de mas -mismo resultado visual que si el archivo ya viniera recortado-. */ .pivoo-logo .sol-titulo { margin: 0; line-height: 0; width: 100%; max-width: clamp(14rem, 50vh, 30rem); aspect-ratio: 900 / 383; overflow: hidden; } /* multiply: el archivo trae fondo blanco; sobre este panel blanco queda invisible igual, y si algun borde no es blanco puro no se nota. */ .pivoo-logo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; } .sol-caja--pivoo .sol-info { justify-content: center; } .sol-caja--pivoo .sol-num { display: flex; align-items: center; gap: .8rem; font-size: .85rem; letter-spacing: .2em; color: var(--pivoo-azul); opacity: 1; margin-bottom: clamp(.8rem, 1.8vh, 1.2rem); } /* --pivoo-azul, no el acento general: esta placa tiene paleta propia (ver mas arriba) y el azul de marca comun quedaba desentonado contra ese fondo -a diferencia de "01"/"03", que estan sobre blanco liso-. */ .pivoo-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .45rem; background: var(--pivoo-azul); color: #fff; letter-spacing: 0; font-weight: 900; } .sol-caja--pivoo .sol-info p { font-size: 1.05rem; line-height: 1.5; max-width: 32rem; color: var(--placa-suave); margin-bottom: clamp(1rem, 1.8vh, 1.4rem); } .sol-caja--pivoo .sol-info .btn { margin-top: 0; align-self: flex-start; } /* Fondo: el degrade lila > turquesa de la mascota, quieto. El movimiento lo dan las manchas de .pivoo-olas, por encima (ver mas abajo). */ .sol-caja--pivoo .sol-funciones { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: clamp(.5rem, 1.2vh, 1.1rem); margin: 0 calc(var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) * -1) calc(var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) * -1); padding: clamp(.9rem, 2vh, 2rem) var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)); border-top: none; background: linear-gradient(105deg, var(--pivoo-lila), var(--pivoo-turquesa)); position: relative; isolation: isolate; overflow: hidden; --placa-texto: #fff; --placa-suave: #fff; } /* Olas: cinco manchas de color muy difuminadas (dos Azul Real, dos turquesa, una lila) que cruzan la seccion de lado a lado y se agrandan y achican, cada una con su propio recorrido y ritmo. Se mueven con transform, que el navegador anima fluido. Quedan debajo del vidrio (z-index -2) y la seccion las recorta (overflow:hidden). */ .pivoo-olas { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .pivoo-olas i { position: absolute; display: block; border-radius: 50%; filter: blur(48px); will-change: transform; } .pivoo-olas i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -20vw; background: var(--pivoo-azul); animation: pivoo-ola-1 11s ease-in-out infinite alternate; } .pivoo-olas i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: -14vw; background: var(--pivoo-turquesa); animation: pivoo-ola-2 9s ease-in-out infinite alternate; } .pivoo-olas i:nth-child(3) { width: 36vw; height: 36vw; left: 30%; bottom: -22vw; background: var(--pivoo-lila); animation: pivoo-ola-3 12s ease-in-out infinite alternate; } .pivoo-olas i:nth-child(4) { width: 34vw; height: 34vw; right: 10%; bottom: -18vw; background: var(--pivoo-azul); animation: pivoo-ola-4 10s ease-in-out infinite alternate; } .pivoo-olas i:nth-child(5) { width: 30vw; height: 30vw; left: 5%; bottom: -16vw; background: var(--pivoo-turquesa); animation: pivoo-ola-5 13s ease-in-out infinite alternate; } @keyframes pivoo-ola-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(55vw, 12vw) scale(1.25); } } @keyframes pivoo-ola-2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-50vw, 16vw) scale(.8); } } @keyframes pivoo-ola-3 { from { transform: translate(-20vw, 0) scale(.9); } to { transform: translate(30vw, -12vw) scale(1.3); } } @keyframes pivoo-ola-4 { from { transform: translate(0, 0) scale(1.2); } to { transform: translate(-45vw, -10vw) scale(.85); } } @keyframes pivoo-ola-5 { from { transform: translate(0, -4vw) scale(1); } to { transform: translate(40vw, 6vw) scale(1.35); } } /* Vidrio esmerilado oscuro encima del degrade (debajo del contenido): tinte azul real, un reflejo diagonal, brillo arriba con filo de luz, y grano (::after) para que se lea como vidrio y no como un color plano. Ademas le sube el contraste al texto blanco. */ .sol-caja--pivoo .sol-funciones::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.13) 34%, rgba(255,255,255,0) 50%), linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 30%), rgba(6,32,56,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.07); } .sol-caja--pivoo .sol-funciones::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } @media (prefers-reduced-motion: reduce) { .pivoo-olas i { animation: none; } } /* El slogan va en Rotis Sans Serif, como pide el manual de Pivoo. El archivo trae un solo peso: font-weight normal para que el navegador no le invente una negrita encima. */ @font-face { font-family: 'Rotis Sans Serif'; src: url('/fuentes/rotis-sans-serif.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } .sol-caja--pivoo .funciones-tit h5 { font-family: 'Rotis Sans Serif', sans-serif; font-weight: normal; letter-spacing: -.01em; font-size: clamp(1.6rem, 3.8vh, 2.6rem); margin: 0 0 .4rem; } .sol-caja--pivoo .funciones-tit p { font-size: .95rem; font-weight: 600; } .sol-caja--pivoo .funciones-tit h5, .sol-caja--pivoo .funciones-tit p { text-shadow: 0 1px 3px rgba(10,61,98,.3); } .sol-caja--pivoo .funciones-grid { gap: clamp(.6rem, 1.4vh, 1rem); } /* Tarjetas blancas con el icono ARRIBA del titulo (no al costado), como en la referencia. */ .sol-caja--pivoo .funcion { background: #fff; border: none; border-radius: .9rem; gap: .45rem; padding: clamp(.6rem, 1.35vh, 1rem) clamp(1rem, 1.6vw, 1.4rem); box-shadow: 0 10px 24px rgba(10,61,98,.15); } .sol-caja--pivoo .funcion-cab { flex-direction: column; align-items: flex-start; gap: clamp(.4rem, 1vh, .7rem); } .sol-caja--pivoo .funcion-ico { width: clamp(30px, 4vh, 44px); height: clamp(30px, 4vh, 44px); border-radius: .6rem; background: var(--pivoo-azul); color: #fff; } .sol-caja--pivoo .funcion-ico svg { width: 50%; height: 50%; } /* El logo de Mercado Libre es a color (azul/amarillo propios): sobre el azul de Pivoo se pisaban los colores. Mismo blanco que ya usa .funcion-ico--marca en Libra, con un borde -aca la tarjeta de abajo tambien es blanca, asi que sin borde el icono desaparecia contra ella-. */ /* box-shadow:none pisa la sombra oscura que .funcion-ico--marca trae de fabrica (pensada para Libra, placa azul): sobre las tarjetas blancas de Pivoo, al lado de los badges en degrade sin sombra, quedaba como un elemento aparte. position:relative: lo necesita el punto de conexion (position:absolute) que se agrego para emparejar con los otros 4. */ .sol-caja--pivoo .funcion-ico--marca { position: relative; background: #fff; border: 1px solid rgba(10,61,98,.14); box-shadow: none; } /* Mismo criterio para la nube de Tiendanube: azul de marca propio (#0050C3, muestreado del logo oficial), asi que el icono se invierte a blanco -igual que el de Mercado Libre- en vez del azul de Pivoo. */ .sol-caja--pivoo .funcion-ico--tiendanube { position: relative; background: #fff; border: 1px solid rgba(10,61,98,.14); color: #0050c3; } .sol-caja--pivoo .funcion-ico--marca img { width: 65%; height: 65%; } /* ── Sistema de iconos de Pivoo: badge en degrade + punto de conexion ── Los 4 iconos genericos (Stock unificado, Multimoneda, Modular o personalizable, Rentabilidad) van con este badge -mas grande y con esquinas mas redondeadas que el resto de la pagina (52px/11px contra los ~38px/.6rem de un funcion-ico comun)-, cada uno con un tramo propio del degrade lila->turquesa de fondo de la seccion, en el mismo orden en que aparecen en la grilla. Mercado Libre y Tienda Nube quedan afuera -mantienen su logo real, sobre fondo blanco, sin badge-. */ .sol-caja--pivoo .funcion-ico--degrade { position: relative; overflow: visible; width: clamp(38px, 4.6vh, 52px); height: clamp(38px, 4.6vh, 52px); border-radius: .7rem; color: #fff; } .sol-caja--pivoo .funcion-ico--degrade svg { width: 46%; height: 46%; } /* El punto: un circulo blanco (con su propio borde blanco, para separarlo limpio del degrade del badge) que asoma en la esquina, con un puntito azul marino adentro -la firma visual de "todo se sincroniza"-. */ .funcion-conexion { position: absolute; bottom: -4px; right: -4px; z-index: 1; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; } .funcion-conexion i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--pivoo-azul); } /* .funcion-ico--marca trae de fabrica un pulso (marca-latido) pensado para un logo que sino queda "quieto" al lado de iconos animados; en Mercado Libre (Pivoo) se pidio sacarlo. */ .funcion-ico--marca.funcion-ico--quieto { animation: none; } .sol-caja--pivoo .funcion h6 { flex: none; color: var(--pivoo-azul); font-size: 1.05rem; } .sol-caja--pivoo .funcion p { color: #5b6b7d; font-size: .82rem; line-height: 1.4; } /* ── Placa 03: Fullstock Sistema (Comercios) ── Firma propia -ni grilla+glass (Libra) ni bloque oscuro partido (Servicios)-: hero en blanco (texto + card flotante ilustrativa) y, debajo, un bloque en degrade azul→navy con pills que fluyen (flex-wrap, sin grilla fija). El fondo entero de la placa pasa a blanco solo aca -por eso el modificador propio, con las mismas variables --placa-* que ya usan --top-claro/--pivoo/--blanca, asi el badge "03" (que lee esas variables) se acomoda solo-. */ /* border-top visible (antes "none"): sin padding, esta caja no tiene el problema de "azul de fondo asomando" que tenian Libra/Pivoo -es blanca de punta a punta-, asi que la linea cae limpia en el borde real. */ /* --fs-azul: el celeste propio del logo FS Lite (rgb(84,199,255), sacado del archivo con un muestreo de pixel) -para fondos decorativos (humo). --fs-azul-txt: version oscurecida del MISMO celeste, no el azul de marca generico: el original es demasiado claro para texto o para blanco encima (contraste ~2:1, muy por debajo del minimo de 4,5:1 -ver CLAUDE.md-); esta variante da ~6:1, dentro de la misma familia de color del logo pero legible. */ .sol-caja--comercios { --placa-fondo: #fff; --placa-texto: var(--texto); --placa-caja: var(--fondo); --fs-azul: #54c7ff; --fs-azul-txt: #0369a1; display: flex; flex-direction: column; padding: 0; border-top: 1px solid var(--borde); overflow: hidden; } .sol-caja--comercios > .sol-badge { background: var(--fs-azul-txt); color: #fff; } /* Hero: texto a la izquierda, card flotante a la derecha -mismo patron de .sol-grid--arriba en las otras placas, pero con su propio padding (no el generico de .sol-caja, que aca es 0) para poder tener un bloque despues con OTRO fondo, edge to edge. */ .cm-hero { position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(2rem, 4vw, 3.5rem); padding: max(3rem, var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem))) var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) clamp(1.5rem, 3vh, 2rem); } .cm-humo { position: absolute; border-radius: 50%; pointer-events: none; } .cm-humo--a { top: -60px; right: 20px; width: 340px; height: 340px; opacity: .1; filter: blur(14px); background: radial-gradient(circle, var(--fs-azul) 0%, rgba(84,199,255,0) 70%); animation: cmHumoA 18s ease-in-out infinite; } .cm-humo--b { bottom: -80px; left: 40px; width: 300px; height: 300px; opacity: .08; filter: blur(14px); background: radial-gradient(circle, var(--fs-azul) 0%, rgba(84,199,255,0) 70%); animation: cmHumoB 22s ease-in-out infinite; } @keyframes cmHumoA { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,30px) scale(1.12); } } @keyframes cmHumoB { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-25px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .cm-humo { animation: none; } } .cm-info { position: relative; z-index: 1; flex: 1 1 26rem; min-width: 0; max-width: 32rem; display: flex; flex-direction: column; gap: 1.1rem; } .cm-eyebrow { font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); } .cm-titulo { margin: 0; font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.08; color: var(--texto); } /* Logo FS Lite en vez de texto: mismo criterio que Libra (.sol-marca-ico) y Pivoo (.pivoo-logo) -placas que ya tienen isologo real muestran el logo grande, no el nombre en texto-. El archivo trae fondo blanco: mix-blend-mode:multiply lo funde con este panel, tambien blanco. */ /* overflow:hidden + transform:scale en la imagen (no aspect-ratio+cover como en Libra): aca el lienzo YA es cuadrado como el icono, asi que cover no recorta nada (mismo ratio, no hay de donde recortar) -hace falta agrandar la imagen mas alla de la caja a proposito para que el margen blanco que sobra alrededor del icono quede afuera del recorte. */ .cm-titulo--logo { width: 100%; max-width: clamp(6.5rem, 16vh, 10rem); aspect-ratio: 1 / 1; overflow: hidden; } .cm-titulo--logo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); mix-blend-mode: multiply; } .cm-desc { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--tenue); } .cm-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: .25rem; } .cm-cta { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; animation: cmFloat 2.6s ease-in-out infinite; } @keyframes cmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .cm-cta { animation: none; } } .cm-cta-titulo { font-size: 1.1rem; font-weight: 800; color: var(--texto); transition: transform .3s ease; } .cm-cta-flecha { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%; background: var(--fs-azul-txt); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s ease; } .cm-cta-flecha svg { width: 17px; height: 17px; } .cm-cta:hover .cm-cta-titulo { transform: translateX(-3px); } .cm-cta:hover .cm-cta-flecha { transform: translateX(4px) scale(1.08); } .cm-sello { display: inline-flex; align-items: center; height: 2.375rem; padding: 0 1rem; border-radius: 999px; background: rgba(84,199,255,.15); color: var(--fs-azul-txt); font-size: .82rem; font-weight: 700; } /* La card ilustrativa: mismo recurso que las tarjetas de ejemplo de Libra/Pivoo (datos inventados, aria-hidden), pero flotante -no encastrada en una grilla-, con su propio hover. */ .cm-card-wrap { position: relative; z-index: 1; flex: 1 1 20rem; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 220px; } .cm-card { position: relative; width: 100%; max-width: 34rem; box-sizing: border-box; padding: 1.6rem; border-radius: 1.125rem; background: #fff; box-shadow: 0 24px 50px rgba(15,40,80,.14); display: flex; flex-direction: column; gap: 1rem; transition: transform .35s ease, box-shadow .35s ease; } .cm-card:hover { transform: translateY(-6px); box-shadow: 0 36px 70px rgba(15,40,80,.18); } .cm-fila { display: flex; align-items: center; gap: .9rem; } .cm-fila--borde { padding-bottom: 1rem; border-bottom: 1px solid #eef1f6; } .cm-fila-ico { flex-shrink: 0; width: 2.875rem; height: 2.875rem; border-radius: .7rem; background: var(--fs-azul-txt); color: #fff; display: flex; align-items: center; justify-content: center; } .cm-fila-ico svg { width: 22px; height: 22px; } .cm-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .cm-fila-titulo { font-size: 1.05rem; font-weight: 800; color: #0b1a33; overflow-wrap: anywhere; } .cm-fila-sub { font-size: .84rem; font-weight: 500; color: #6b7a8f; } .cm-fila-monto { flex-shrink: 0; font-size: 1.05rem; font-weight: 800; color: var(--fs-azul-txt); white-space: nowrap; } /* Bloque de funciones: degrade propio, edge to edge (bleed con margen negativo, mismo truco que ".sol-caja--top-claro .sol-funciones" mas arriba en este archivo), con las pills centradas verticalmente (align-content:center) para no dejar aire de mas si el contenido no llena el alto. */ /* Azul liso, no el degrade a navy que tenia antes: mismo criterio que .cm-humo aca abajo, menos mezcla de tonos de azul distintos en una sola placa. */ .cm-funciones { position: relative; overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.5rem, 3.5vh, 2.25rem) var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)) clamp(1.8rem, 4vh, 2.75rem); background: var(--fs-azul); } .cm-funciones .cm-humo--c { top: -40px; right: -40px; width: 320px; height: 320px; opacity: .08; filter: blur(16px); background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%); animation: cmHumoA 18s ease-in-out infinite; } .cm-funciones .cm-humo--d { bottom: -60px; left: 30%; width: 280px; height: 280px; opacity: .06; filter: blur(16px); background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%); animation: cmHumoB 22s ease-in-out infinite; } .cm-funciones-tit { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; } .cm-funciones-tit h5 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; color: #fff; } /* Blanco pleno, no atenuado: sobre el #0067F1 del degrade cualquier blanco translucido cae debajo del minimo de contraste accesible (ver CLAUDE.md), asi que la jerarquia con el titulo la hace el tamano y el peso, no la opacidad -mismo criterio que .funciones-tit p mas arriba en este archivo-. */ .cm-funciones .cm-funciones-tit p { margin: 0; font-size: 1rem; font-weight: 500; color: #fff; } .cm-pills { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: center; gap: 1rem 1.1rem; } .cm-pill { display: inline-flex; align-items: center; gap: .8rem; padding: .8rem 1.5rem .8rem .8rem; border-radius: 1.875rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 1rem; font-weight: 700; transition: transform .3s ease, background .3s ease; } .cm-pill:hover { transform: translateY(-3px); background: rgba(255,255,255,.22); } .cm-pill-check { flex-shrink: 0; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; } .cm-pill-check svg { width: 16px; height: 16px; } @media (max-width: 860px) { .cm-hero { padding: 2rem 1.25rem 1.5rem; gap: 1.5rem; } .cm-info { flex-basis: auto; max-width: none; } .cm-card-wrap { flex-basis: auto; min-height: 0; } .cm-funciones { padding: 1.5rem 1.25rem 2rem; } .cm-pill { font-size: .9rem; padding: .65rem 1.15rem .65rem .65rem; } .cm-pill-check { width: 1.75rem; height: 1.75rem; } } /* Numero de la pila. Va ARRIBA a la izquierda: la tarjeta que llega se apoya mas abajo que la anterior, asi que de las de atras lo unico que queda a la vista es su franja de arriba. */ .sol-badge { position: absolute; top: .85rem; left: var(--caja-pad, clamp(2.2rem, 4.5vw, 4rem)); z-index: 1; font-size: .78rem; font-weight: 900; letter-spacing: .06em; color: var(--placa-texto); background: var(--placa-caja); padding: .3rem .7rem; border-radius: 999px; } /* min-width:0 en los dos hijos: una imagen adentro (las capturas de Libra) tiene su ancho intrínseco en píxeles, y una columna de grid por defecto no se achica por debajo del contenido más ancho que tenga adentro -sin esto, esa imagen empujaba toda la tarjeta más ancha que la pantalla en celular, aunque el CSS de la imagen diga width:100%. */ .sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; width: 100%; } .sol-grid > * { min-width: 0; } /* La placa de Libra ya no centra las dos columnas al medio de la fila (align-items:center las dejaba con distinto aire arriba y abajo según cuál pesara más). "stretch" -el default de grid, pero lo dejamos explícito- hace que las dos columnas midan lo mismo, la altura de la más alta; .sol-info y .sol-capturas/.sol-visual (más abajo) se ocupan de repartir ESE espacio de más -el texto empujando el botón al fondo, el panel visual centrándose- en vez de dejarlo como aire suelto de un solo lado. */ .sol-grid--arriba { align-items: stretch; } .sol-info { display: flex; flex-direction: column; } /* Empuja el botón al fondo de la columna en vez de dejarlo pegado al párrafo con el resto del alto de sobra suelto más abajo. */ .sol-info .btn { margin-top: auto; } /* El panel visual (capturas o tarjetas) tiene su propio alto de contenido -el marco de las capturas, o las filas de .mini-; cuando la columna se estira más que eso, esto centra el contenido en el espacio de sobra en vez de dejarlo pegado arriba con hueco abajo. */ .sol-capturas { display: flex; flex-direction: column; justify-content: center; height: 100%; } /* ── Los dos grupos: Sistemas y Servicios ── Separan las tres soluciones que SON un producto de las dos que son algo que hacemos. Van en el blanco/gris de la seccion, no adentro de ninguna placa, asi cortan la pila en dos de verdad. Mismo tratamiento que "Soluciones" (.sec-tag + titulo grande, ver mas arriba): centrado, con la pastilla llevando la categoria ("Sistemas"/ "Servicios") y el titulo la frase completa -ya no un h3 corto ("Sistemas") mas una bajada aparte; esa bajada de una linea ahora ES el titulo, agrandado, igual que el h2 largo de "Soluciones" debajo de su pastilla-. Asi las tres entradas de seccion de la pagina (Soluciones, Sistemas, Servicios) se leen como una misma familia, no como una distinta cada vez. */ /* Linea + aire arriba en los dos grupos por igual: marca el corte de cada bloque contra lo anterior. Abajo, margin-bottom 2.5rem: mismo aire que separa "Soluciones" de su grilla (.caminos .sec-tit) -asi el espacio titulo-contenido es igual en las tres entradas de seccion de la pagina, no un valor distinto cada vez-. */ .sol-grupo { border-top: 1px solid var(--borde); text-align: center; margin: .5rem 0 2.5rem; padding-top: 2.5rem; } /* Excepcion, solo "Sistemas": ese margen de abajo se suma al piso de 74px que ya trae la primera tarjeta de la pila (mas abajo, .sol-caja), pensado para que no se meta debajo de la barra de navegacion -sin este 0, el aire quedaba mas grande ahi que en "Soluciones"/"Servicios". El piso de 74px ya es de sobra mas separacion que el resto. */ .sol-grupo--primero { margin-bottom: 0; } /* margin:0: h3 no tiene reset de margen en ningun lado del sitio (a diferencia de .sec-tit h2, que si lo trae de base) -sin esto, el margen por defecto del navegador se sumaba al margin-bottom de la pastilla de arriba, y quedaban mas separados que en "Soluciones". */ .sol-grupo h3 { max-width: 700px; margin: 0 auto; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.25; color: var(--texto); } .sol-num { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--placa-texto); opacity: .95; margin-bottom: 1.1rem; } /* El titulo de la placa es h4 y no h3 desde que existen los grupos (el h3 es "Sistemas" / "Servicios", que estan por encima). Va por clase y no por etiqueta para que el nivel se pueda volver a mover sin tocar el CSS. */ .sol-titulo { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; margin: 0 0 .9rem; letter-spacing: -.02em; line-height: 1.05; color: var(--placa-texto); } .sol-panel p { font-size: clamp(.98rem, 1.6vw, 1.08rem); margin: 0 0 1.4rem; max-width: 460px; color: var(--placa-texto); } .sol-lista { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .5rem; } .sol-lista li { position: relative; padding-left: 1.1rem; font-size: .95rem; font-weight: 600; color: var(--placa-texto); } .sol-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--placa-texto); } /* El logo del producto al lado del título (hoy solo Libra lo tiene). Va sobre una pastilla blanca porque el ícono trae su propio fondo azul, casi igual al de la placa: suelto, el cuadrado desaparecería. */ .sol-marca { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; } .sol-marca .sol-titulo { margin: 0; } .sol-marca-ico { flex-shrink: 0; display: flex; background: #fff; border-radius: .85rem; padding: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.18); } /* libra-logo-nuevo.webp: transparente, isologo "LIBRA" + codigo de barras, no cuadrado -mas ancho que alto-. object-fit:contain para no recortarlo forzando un cuadrado. Sin border-radius ni multiply: no hace falta, el archivo ya viene limpio. */ .sol-marca-ico img { display: block; width: auto; height: 48px; object-fit: contain; } /* El panel claro y sus tarjetas */ /* Los dos paneles grandes de adentro acompañan el canto vivo de la placa; las piezas chicas (pastillas, íconos, botones) siguen redondeadas, que a ese tamaño el canto recto queda duro. */ /* align-content:center reparte el aire de sobra (cuando la columna se estira más que las filas .mini) parejo arriba y abajo, en vez de dejarlo todo pegado abajo. */ .sol-visual { background: var(--placa-panel); border-radius: 0; padding: 1.1rem; display: grid; gap: .55rem; height: 100%; align-content: center; } .mini { display: flex; align-items: center; gap: .9rem; background: var(--placa-panel-item); border-radius: .9rem; padding: .7rem .9rem; } .mini-ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: .7rem; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; } .mini-ico svg { width: 19px; height: 19px; } .mini-txt { flex: 1; min-width: 0; font-size: .88rem; font-weight: 700; color: var(--texto); line-height: 1.3; } .mini-txt small { display: block; font-size: .75rem; font-weight: 600; color: var(--tenue); } .mini-val { font-size: .92rem; font-weight: 800; color: var(--acento); white-space: nowrap; } .mini-val.apagado { color: var(--tenue); } /* ── Placa "formato extendido" (Libra) ── Capturas reales de la interfaz, en carrusel -no ilustrativas como el panel de tarjetas de las otras placas (.sol-visual)-. Ocupan un solo lugar: las tres viven superpuestas (position:absolute) adentro de .capturas-track y solo la que tiene .captura--activa se ve, con un cruce suave. La "barra de ventana" (los tres puntos, como en macOS) va UNA sola vez arriba de todo el marco, no repetida por captura, porque ahora es un elemento fijo del carrusel y no de cada foto -mismo recurso que la referencia que pasó el usuario para que se lea como una captura de producto y no como una foto suelta-. */ .capturas-marco { position: relative; border-radius: 0; overflow: hidden; background: #fff; box-shadow: 0 20px 45px rgba(0,0,0,.35); } .captura-barra { position: relative; z-index: 2; display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; background: #fff; border-bottom: 1px solid var(--borde); } .captura-punto { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; } .captura-punto--roja { background: #ff5f57; } .captura-punto--amarilla { background: #febc2e; } .captura-punto--verde { background: #28c840; } /* aspect-ratio fijo: así el carrusel reserva su alto de entrada y no "salta" al cambiar de foto -las tres son absolute, así que sin esto el contenedor mediría 0-. 2:1 es la proporción real de las tres capturas (varían entre 1,99:1 y 2,02:1); con object-fit:contain y el mismo blanco del marco de fondo, la diferencia no se nota -antes, con "cover" forzando 8:5, se comía los costados de la imagen para rellenar un marco más alto, y se veía cortada. */ .capturas-track { position: relative; aspect-ratio: 2 / 1; background: #fff; } .captura { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; } .captura--activa { opacity: 1; visibility: visible; z-index: 1; } .captura img { display: block; width: 100%; height: 100%; object-fit: contain; } /* La etiqueta flotante: pastilla blanca apoyada en la esquina de la foto activa, señalando su función. Ya no lleva offset negativo (antes asomaba afuera del marco, cuando eran tres capturas separadas): con las tres superpuestas en el mismo marco, "afuera" de una es "encima" de la siguiente, así que ahora queda adentro del recuadro. */ .captura-etiqueta { position: absolute; z-index: 2; left: .9rem; bottom: .9rem; right: .9rem; display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--texto); border-radius: .8rem; padding: .6rem .9rem; font-size: .82rem; font-weight: 800; box-shadow: 0 14px 30px rgba(36,59,90,.28); width: fit-content; max-width: 100%; } .captura-etiqueta-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: .6rem; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; } .captura-etiqueta-ico svg { width: 16px; height: 16px; } /* Flechas: circulos blancos flotando sobre la foto, a los costados. */ .capturas-flecha { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--acento); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.28); transition: background .2s, transform .2s; } .capturas-flecha svg { width: 18px; height: 18px; } .capturas-flecha:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .capturas-flecha--prev { left: .7rem; } .capturas-flecha--next { right: .7rem; } /* Puntos de progreso, debajo del marco (no encima, para no tapar la foto) */ .capturas-indicador { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; } .capturas-indicador-btn { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255,255,255,.35); cursor: pointer; transition: width .25s, background .25s; } .capturas-indicador-btn.on { width: 22px; background: #fff; } @media (max-width: 860px) { .captura-etiqueta { font-size: .78rem; padding: .55rem .8rem; } .capturas-flecha { width: 32px; height: 32px; } .capturas-flecha svg { width: 15px; height: 15px; } } /* El marco entero flota solo, apenas: un bamboleo suave en vez de quedar clavado -a pedido, para que la placa se sienta más viva. Las flechas y los puntos son hijos del marco, así que se mueven con la foto; como el movimiento es chico (10px) y lento (6s), no molesta para apuntar y clickear. */ @keyframes capturas-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .capturas-marco { animation: capturas-flotar 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .capturas-marco { animation: none; } } /* ── Funciones (placa Libra) ── De la mitad de la placa para abajo: 6 tarjetas blancas con ícono, título y descripción -no las pastillas de una palabra de antes-, para que esta placa explique tanto como el panel de capturas de arriba. */ .sol-funciones { margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--placa-borde); display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 1.5rem; align-items: start; } .funciones-tit h5 { margin: 0 0 .5rem; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 900; line-height: 1.1; letter-spacing: -.015em; color: var(--placa-texto); } /* Blanco pleno y no atenuado, igual que el resto de los textos sobre azul: el peso lo baja el tamaño (.8rem) y el grosor (500), no la opacidad. */ .funciones-tit p { margin: 0; font-size: .8rem; font-weight: 500; line-height: 1.4; color: var(--placa-suave); } .funciones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .funcion { background: var(--placa-caja); border: 1px solid var(--placa-borde); border-radius: .8rem; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; } /* Ícono y nombre en la misma línea (antes el ícono iba arriba): ahorra una altura de línea por tarjeta, que por doce tarjetas es bastante alto. */ .funcion-cab { display: flex; align-items: center; gap: .5rem; min-width: 0; } .funcion-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: .55rem; background: var(--placa-caja); color: var(--placa-texto); display: flex; align-items: center; justify-content: center; } .funcion-ico svg { width: 14px; height: 14px; } /* Los iconos "cute" (APNG animado) y el de Mercado Pago van en una pastilla mas grande que el resto (38px, no 26px) para que resalten -a 26/20 se perdian al lado del texto-. Los .funcion-ico--* pisan el tamano de la regla base de arriba; el resto de las placas (que usan SVG de linea comunes) no se toca. */ /* Chip solido, no translucido: en el lienzo de referencia estos iconos van sobre un cuadrado de color solido (azul para los "cute", blanco para Mercado Pago) con un borde y una sombra propia -no el mismo relleno transparente de la tarjeta, que los dejaba sin contraste-. */ .funcion-ico--img, .funcion-ico--marca { width: 38px; height: 38px; border-radius: .75rem; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 6px 14px rgba(0,10,40,.35); } .funcion-ico--img { background: var(--acento); } .funcion-ico--marca { background: #fff; } /* Los iconos "cute" (APNG animado) vienen en negro solido, no en blanco -se verifico pixel por pixel: el 100% de lo visible es rgb(0,0,0)-. Como son PNG y no SVG, no hay currentColor que los pinte; invert(1) los pasa a blanco sin tocar la transparencia (negro puro invertido es blanco puro). Si mas adelante vienen ya en blanco de origen, sacar este filter. */ .funcion-ico--img img { display: block; width: 28px; height: 28px; object-fit: contain; filter: invert(1); } /* Mercado Pago: mismo tamano que los "cute", pero SIN invertir -es un logo a color de verdad (celeste + azul oscuro), no un icono monocromatico-. Es el unico de los seis sin animacion propia (es un logo estatico, no un APNG), asi que el movimiento se lo da un latido en CSS -laten sube y baja apenas, con una sombra de color que acompaña-, para que no quede como el "quieto" al lado de los otros cinco que ya se mueven solos. */ .funcion-ico--marca img { display: block; width: 28px; height: 28px; object-fit: contain; } .funcion-ico--marca { animation: marca-latido 2.4s ease-in-out infinite; } @keyframes marca-latido { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(79,195,247,0); } 50% { transform: scale(1.1); box-shadow: 0 0 10px rgba(79,195,247,.55); } } @media (prefers-reduced-motion: reduce) { .funcion-ico--marca { animation: none; } } /* min-width:0 + overflow-wrap: el titulo es hijo de un flex row (.funcion-cab) junto al icono; por default un flex item no se achica por debajo del ancho de su palabra mas larga. Con el icono a 38px (era 26px) dejo de sobrar aire, y "Sucursales"/"Autoservicio" -una sola palabra, sin espacio donde cortar- se salian de la tarjeta. Mismo arreglo que ya se uso en .mini-txt para el mismo tipo de problema. */ .funcion h6 { flex: 1; min-width: 0; overflow-wrap: anywhere; margin: 0; font-size: .85rem; font-weight: 800; color: var(--placa-texto); letter-spacing: -.005em; line-height: 1.2; } .funcion p { margin: 0; font-size: .75rem; font-weight: 400; color: var(--placa-suave); line-height: 1.35; } /* Tarjetas mas grandes, solo en Libra (--grande): probado primero en un lienzo aparte, a pedido de que las 6 tarjetas "tomen mas tamano" -antes quedaba mucho aire libre en la placa-. No se toca la base de arriba porque las otras dos placas (02 y 03) ya entran justas en su alto fijo de 80vh con el tamano chico; agrandarlas ahi desbordaria la placa. */ .funciones-grid--grande { gap: .8rem; } /* Vidrio esmerilado + sombra propia, como las tarjetas del lienzo -antes estas tarjetas no tenian ni blur ni sombra, solo el relleno translucido-. */ .funciones-grid--grande .funcion { padding: .85rem 1rem; gap: .5rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0,0,0,.2); } .funciones-grid--grande .funcion-cab { gap: .65rem; } .funciones-grid--grande .funcion-ico--img, .funciones-grid--grande .funcion-ico--marca { width: 46px; height: 46px; border-radius: .8rem; } .funciones-grid--grande .funcion-ico--img img, .funciones-grid--grande .funcion-ico--marca img { width: 30px; height: 30px; } .funciones-grid--grande .funcion h6 { font-size: 1rem; } .funciones-grid--grande .funcion p { font-size: .85rem; line-height: 1.4; } @media (max-width: 860px) { /* El título deja de ir al costado y vuelve arriba, en una columna sola */ .sol-funciones { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.3rem; padding-top: 1.1rem; } .funciones-grid { grid-template-columns: 1fr 1fr; } .funcion { padding: .65rem .75rem; } /* El agrandado de --grande es para el ancho de escritorio, donde sobraba aire: en la grilla de 2 columnas de celular el mismo tamaño le come demasiado ancho al texto ("Mercado Pago" se partía en tres líneas). Vuelve al tamaño chico de siempre acá. */ .funciones-grid--grande .funcion { padding: .65rem .75rem; gap: .35rem; } .funciones-grid--grande .funcion-cab { gap: .5rem; } .funciones-grid--grande .funcion-ico--img, .funciones-grid--grande .funcion-ico--marca { width: 38px; height: 38px; border-radius: .75rem; } .funciones-grid--grande .funcion-ico--img img, .funciones-grid--grande .funcion-ico--marca img { width: 28px; height: 28px; } .funciones-grid--grande .funcion h6 { font-size: .85rem; } .funciones-grid--grande .funcion p { font-size: .75rem; line-height: 1.35; } /* La fila titulo+bajada de Libra (lado a lado en escritorio) vuelve a apilarse en celular -no entran los dos textos en la misma linea sin apretarse demasiado-, con la bajada alineada a la izquierda otra vez. */ .sol-caja--top-claro .funciones-tit { flex-direction: column; align-items: flex-start; gap: .4rem; } .sol-caja--top-claro .funciones-tit p { text-align: left; max-width: none; } } .sol-panel .btn-primario { background: var(--placa-btn); color: var(--placa-btn-txt); } .sol-panel .btn-primario:hover { background: var(--placa-btn-hover); } .sol-panel .btn-secundario { background: transparent; color: var(--placa-texto); border-color: var(--placa-borde); } .sol-panel .btn-secundario:hover { background: var(--placa-caja); border-color: var(--placa-texto); } @media (max-width: 860px) { /* El snap "pantalla completa por placa" pide 100vh por tarjeta; en celular eso es muchisimo scroll trabado para poco, asi que se desactiva entero: las placas vuelven a ir una abajo de la otra, en flujo normal. El scroll-snap-align ya no se pone en este ancho (ver el @media(min-width:861px) de arriba), y app.js no activa el mandatory de en este ancho -se da cuenta solo, mirando el mismo media query-. */ .sol-relevo .sol-panel { height: auto; padding-top: 0; display: block; } .sol-relevo .sol-panel + .sol-panel { margin-top: 1rem; } .sol-panel .wrap { height: auto; padding: 2rem 1.5rem; } .sol-caja { margin-top: 0; box-shadow: 0 24px 56px rgba(36,59,90,.3); } .sol-grid { grid-template-columns: 1fr; gap: 1.5rem; } .sol-lista { display: none; } .sol-visual { padding: .9rem; gap: .5rem; } .mini { padding: .7rem .8rem; } /* Aire de la tarjeta mas chico: 2,2rem a cada lado se comian 70px de una pantalla de 280, y el contenido no entraba. */ .sol-caja { --caja-pad: 1.25rem; } /* Los datos de ejemplo traen textos largos sin espacios ("Factura B 0001-00012345"), que no se podian cortar y empujaban la tarjeta mas ancha que la pantalla: eso desbordaba la pagina entera y dejaba una franja blanca al costado al scrollear. Con esto se parten. */ .mini-txt { overflow-wrap: anywhere; } .mini-val { white-space: normal; } } /* Progreso lateral (puntos) que marca en qué solución estás */ .sol-progreso { position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: .6rem; opacity: 0; transition: opacity .3s; pointer-events: none; } .sol-progreso.visible { opacity: 1; } .sol-progreso a { width: 10px; height: 10px; border-radius: 50%; background: rgba(36,59,90,.3); pointer-events: auto; transition: background .2s, transform .2s; } .sol-progreso a.on { background: var(--acento); transform: scale(1.35); } @media (max-width: 640px) { .sol-progreso { display: none; } } /* ── Quiénes somos ── */ .nosotros { } .nosotros-box { max-width: 760px; margin: 0 auto; text-align: center; } .nosotros-box p { font-size: 1.06rem; color: var(--texto); margin: 0 0 1.1rem; line-height: 1.5; } .nosotros-box p.suave { color: var(--tenue); font-size: .98rem; } /* Números de confianza */ .numeros { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; } .numero { background: #fff; border: 1.5px solid var(--borde); border-radius: 1rem; padding: 1.5rem 2.25rem; text-align: center; } .numero b { display: block; font-size: 2rem; color: var(--acento); } .numero span { color: var(--tenue); font-size: .9rem; font-weight: 600; } /* Los tres sistemas, como sello de marca (no son links aca, ver el nav): logos reales de Libra, Pivoo y FS Lite. */ .nosotros-logos { display: flex; align-items: center; justify-content: center; gap: 2.25rem; flex-wrap: wrap; margin-top: 2.25rem; } /* Pivoo y FS Lite vienen en un lienzo cuadrado con mucho blanco alrededor del isologo, no recortado -mix-blend-mode:multiply lo funde con el fondo blanco de la seccion, pero el alto de CAJA sigue siendo el lienzo entero, no el dibujo-. Por eso el alto real de cada una es bastante mayor al que se ve, para que los isologos pesen igual. opacity va ACA, no en el contenedor: Libra es un isologo transparente con trazos finos (texto + codigo de barras), no un sello solido como los otros dos, y a la misma opacidad se veia deslavado en vez de firme. Asi los tres quedan atenuados por igual, y Libra se lee a pleno color. */ .nosotros-logos img { display: block; height: 92px; width: auto; object-fit: contain; mix-blend-mode: multiply; opacity: .8; } .nosotros-logos img.nosotros-logos-libra { height: 56px; mix-blend-mode: normal; opacity: 1; } /* Pivoo: el isologo real ocupa menos de un 40% del alto del lienzo -a 92px de caja (igual que FS) se veia diminuto al lado de Libra y FS. overflow:hidden + object-fit:cover recorta ese margen en vez de agrandar la caja entera (que la haria enorme sin achicar el aire de sobra). */ .nosotros-logos-pivoo-wrap { display: block; height: 64px; width: 150px; overflow: hidden; } .nosotros-logos-pivoo-wrap img { height: 100%; width: 100%; object-fit: cover; object-position: center; } /* Azul, igual que Contacto: es la continuacion del mismo bloque de cierre (ver la nota en .contacto). La linea de arriba es blanca translucida porque el gris de los bordes no se ve sobre azul. */ footer { background: var(--acento); padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,.22); color: #fff; font-size: .9rem; } .footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } .footer-links a { text-decoration: none; } .footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; } .wa-flotante { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--exito); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(22,163,74,.4); transition: transform .15s, background .15s; } .wa-flotante:hover { background: var(--exito-osc); transform: scale(1.06); } @media (max-width: 640px) { .wa-flotante { right: 1rem; bottom: 1rem; width: 52px; height: 52px; } } /* ── Nav: los tres sistemas de gestión ── Los links de los dos costados -"Qué hacemos" y los tres sistemas- llevan la misma tipografia: liviana (500), pareja, sin mayuscula forzada. Nada de negrita 800 ni cuadraditos de color por todos lados: eso era lo que le daba mucho peso visual y volvia la barra informal. */ /* Blanco puro: con el azul principal da 4,94:1 y cualquier transparencia cae por debajo del minimo accesible. El hover se marca con subrayado. "Cerradas" por dentro (interletrado ajustado) pero con gap propio entre si, para que el grupo entero no quede demasiado apretado. */ .nav-izq { display: flex; align-items: center; gap: 2.1rem; flex-shrink: 0; } .nav-izq a { text-decoration: none; color: #fff; font-weight: 400; font-size: .8rem; letter-spacing: -.01em; } .nav-izq a:hover { text-decoration: underline; text-underline-offset: 4px; } /* Los tres sistemas, en texto plano -sin icono ni divisor-, misma tipografia y mismo gap que la lista de la derecha. */ .nav-sistemas { display: flex; align-items: center; gap: 2.1rem; flex-shrink: 0; } .nav-sistema { text-decoration: none; font-size: .8rem; font-weight: 400; color: #fff; letter-spacing: -.01em; } .nav-sistema:hover { text-decoration: underline; text-underline-offset: 4px; } /* Sin opacity: ya establecimos que cualquier transparencia de blanco sobre este azul cae del minimo de contraste. "En desarrollo" ya lo dice el propio texto, no hace falta atenuarlo para diferenciarlo. */ /* El llamado a la accion: flotante en el CENTRO de la barra, fuera del flujo (position:absolute contra .nav-row, su ancestro mas cercano con position:relative). Su alto no depende para nada del alto de la fila -antes, atrapado adentro de la fila junto con el resto del contenido, se veia cortado en algunos navegadores-: con esto es estructuralmente imposible que se recorte, sin importar cuanto midan los links de al lado. Lo que SI hay que vigilar es que los dos grupos no lo choquen por los costados -ver la medicion del punto de corte a hamburguesa, mas abajo-, porque el centrado horizontal si depende del ancho disponible. Se despega un poco al pasar el mouse (sube y agranda la sombra), como un boton que "flota" de verdad, no solo un cambio de color. */ .nav-probar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: var(--acento); text-decoration: none; font-weight: 700; font-size: .85rem; padding: .55rem 1.3rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s; } .nav-probar:hover { transform: translate(-50%, -56%) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,.24); background: var(--fondo); color: var(--acento-osc); } /* ── Portada ── Ya no es "solo la imagen": ahora tiene dos videos en bucle (oficina y negocio, ver el HTML) que se van pasando la posta, con un titulo fijo y una linea que cambia segun cual este activo. La decision anterior -sin velo ni texto- quedaba corta para trafico de campanas pagas: dos pantallas completas de puro impacto visual (esta y "Elegi tu camino", debajo) sin ninguna explicacion todavia. background-image se queda como respaldo, DETRAS de los videos: si todavia no hay (ver el comentario en el HTML) o el navegador no puede reproducir video, esta imagen es lo que se ve. Ocupa el alto de la ventana menos la barra. El alto: ver la nota de las lineas blancas arriba, en el bloque de scroll-snap. Resumen: 100vh - 48px estira la seccion 8px MAS ALLA del borde inferior de la pantalla, margin-bottom se los descuenta para no mover a la que sigue, y z-index:1 hace que ese sobrante tape a la siguiente en vez de quedar debajo. Sin eso quedaba una rendija de 1,6px con el blanco de la seccion de abajo asomando. */ /* padding:0 pisa el "section { padding: 4.5rem 0 }" general: cuando la foto era el fondo de la seccion entera ese padding no se notaba, pero ahora que la imagen vive en un bloque adentro, esos 72px de arriba quedaban como una barra blanca entre la barra de navegacion y la foto. El padding lateral es para que la imagen no toque los bordes. */ .portada { position: relative; z-index: 1; margin-bottom: -8px; padding: 0; background: #fff; } /* La imagen/video. Antes ocupaba 100vh con el texto encima; ahora es mas baja, con el texto debajo. aspect-ratio con la proporcion EXACTA de la foto (1672x941) y no una altura fija: asi no se recorta nada. Con una altura fija y el ancho completo de la pantalla, cover tenia que comerse media foto de arriba y de abajo para llegar a esa franja -a 1440px de ancho le sacaba casi el 30%-. La unica forma de tenerla entera Y baja a la vez es no estirarla de lado a lado: de ahi el max-width. Queda enmarcada, con el blanco de la pagina alrededor. max-height es solo un seguro para ventanas muy bajas (ahi si recorta un poco, antes que comerse la pantalla entera). */ /* De lado a lado otra vez, como el hero de Apple que se tomo de ejemplo: ancho completo, alto propio, y el titulo breve encima. Con el ancho completo y un alto menor al de la proporcion de la foto (16:9), cover recorta arriba y abajo: es el precio de que ocupe todo el ancho, y se decidio a proposito. El recorte va centrado, que es donde esta el monitor. */ /* aspect-ratio con la proporcion exacta de la foto (1933x814) en vez de un alto fijo: asi no se recorta nada. Se puede hacer porque los objetos flotantes se mudaron ADENTRO de la foto y ya no necesitan una franja propia debajo, que es el alto que antes se le estaba sacando a la imagen. max-height es el tope para que no se coma la pantalla entera en monitores anchos (ahi si recorta algo). */ /* width:100% explicito: sin esto, en pantallas anchas el ancho se calculaba a partir del alto YA recortado por max-height (en vez de al reves), y la caja quedaba mas angosta que la seccion -se veia un borde blanco a la derecha, el fondo de .portada asomando-. Con el ancho fijo en 100%, max-height sigue recortando arriba/abajo (cover centrado) pero el ancho no se achica nunca. */ .portada-media { position: relative; width: 100%; aspect-ratio: 1933 / 814; max-height: 74vh; overflow: hidden; /* ?v=5: la foto cambio de nuevo pero el archivo se sigue llamando igual, asi que sin esto los navegadores que ya la tenian guardada seguian mostrando la vieja. Si se vuelve a cambiar, subir el numero (aca y en el poster del