/* ============================================================ Vestigia Design · capa propia sobre el esqueleto Nunca editamos la hoja de la referencia: todo lo nuestro va acá, cargado después, con la misma escala en vw que usa el esqueleto. Cortes: 991 / 767 / 479 (los mismos del esqueleto). ============================================================ */ /* ---------- logotipo del hero ---------- Logotipo propio: monolineal dibujado sobre las proporciones de Jost. Se iguala la ALTURA DE MAYÚSCULA de la referencia (32.2px a 393 · 117.9px a 1440), no su ancho. Estuvo primero a 48.3vw, que es el ancho exacto de ellos, y era el criterio equivocado: como "Vestigia Design" tiene 15 caracteres contra 8 de "Form&Fun", igualar el ancho deja la letra 22% más chica, y lo que el ojo lee como "tamaño del título" es la letra, no el ancho del bloque. Puesto uno al lado del otro en el teléfono, el de ellos se veía claramente más grande. A 62vw las dos mayúsculas miden lo mismo. Una línea y no dos: dos líneas ocupan 3.4x el alto de la de ellos. */ .marca-hero{width:62vw;display:block} .marca-hero svg{display:block;width:100%;height:auto;overflow:visible} /* ---------- estado de partida del revelado ---------- El SVG va EN LÍNEA, así que el navegador lo pinta completo apenas lo lee. Si el estado inicial lo pusiera el guion (que corre al final del cuerpo, después de todas las librerías del esqueleto), el logotipo se ve entero casi un segundo, desaparece y recién ahí se dibuja. Se veía como un defecto. Por eso el punto de partida vive acá, en el CSS, que se aplica ANTES del primer pintado. La clase `escribe` la pone un guion mínimo en el : si no hay JS, o si el visitante pidió menos movimiento, nunca se agrega y el logotipo se ve entero y quieto, que es lo correcto para una marca. Los trazos llevan pathLength="1", así que una sola regla sirve para los 24 por más que midan distinto. */ html.escribe .marca-hero path{stroke-dasharray:1;stroke-dashoffset:1} html.escribe .marca-hero circle{transform-box:fill-box;transform-origin:center;transform:scale(0)} /* Una sola propiedad (color) mueve el trazo y el punto de la i, porque el SVG está en currentColor. */ .marca-hero .letra{transition:color 620ms cubic-bezier(.23,1,.32,1)} .marca-hero .v{color:#1d1d1d} .marca-hero .d{color:#1d1d1d} /* llega en tinta... */ .marca-hero.asentado .d{color:#9a9a9a} /* ...y se retira a gris, una sola vez */ /* El retiro recorre "Design" de izquierda a derecha. Es el mismo gesto que probamos en bucle, pero ocurre UNA vez al aparecer y después la marca no se vuelve a mover: en el hero ya rota la vitrina y dos ciclos a destiempo se leen como inquietud, no como refinamiento. */ .marca-hero .d:nth-of-type(9) {transition-delay:0ms} .marca-hero .d:nth-of-type(10){transition-delay:55ms} .marca-hero .d:nth-of-type(11){transition-delay:110ms} .marca-hero .d:nth-of-type(12){transition-delay:165ms} .marca-hero .d:nth-of-type(13){transition-delay:220ms} .marca-hero .d:nth-of-type(14){transition-delay:275ms} @media (prefers-reduced-motion:reduce){ .marca-hero .letra{transition:none} } /* ---------- declaración del estudio ---------- Sin el rótulo "El estudio" a la izquierda, la frase arranca en el margen y ya no necesita la sangría del 25% que era el hueco de ese rótulo. `text-wrap:balance` reparte los renglones parejos: sin él quedaba "Hacemos / realidad tu idea en un sitio / web.", con "web." solo en la última línea, que es el corte más feo que hay. La hoja de ellos la deja en `display:inline`, y así el botón "Conocer el estudio" se le pega al final del último renglón, en la misma línea. Pasa a bloque con su propio ancho: dos renglones y el botón abajo, con aire. */ .home-intro{display:block;text-wrap:balance;max-width:17ch;margin-bottom:2.6vw} .studio-text-indent{margin-left:0 !important} /* El revelado: UNA pasada de tinta que recorre la frase en el orden en que se lee, y se retira. La de ellos va atada al scroll (scrub) y fragmenta la frase en ocho palabras que cambian de color por separado; si el visitante deja de bajar, la frase queda a medio teñir. Acá es un solo trazo continuo, una sola vez, y después queda texto pelado para siempre. Se hace con una máscara en degradado a 100°: el borde de tinta baja un poco hacia la derecha, así el renglón de arriba se revela antes que el de abajo y sigue el recorrido de la lectura. Igual que el logotipo, el punto de partida cuelga de html.escribe: sin JS o con menos movimiento, la frase se ve entera desde el principio. */ html.escribe .home-intro:not(.escrita){ -webkit-mask-image:linear-gradient(100deg,#000 0 35%,transparent 62%); mask-image:linear-gradient(100deg,#000 0 35%,transparent 62%); -webkit-mask-size:280% 100%; mask-size:280% 100%; -webkit-mask-position:100% 0; mask-position:100% 0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* ---------- rótulo de Trabajos ---------- Va ARRIBA del carrusel: en la referencia titulaba las teselas de abajo, que sacamos por repetir las mismas obras. ⚠️ La hoja de ellos OCULTA la segunda línea en móvil (en su diseño solo dice "Selected Work (22-25)", que no se pierde nada). La nuestra sí dice algo, y en móvil está el grueso del tráfico: se muestra en todos los tamaños. */ /* ⚠️ SE INVIERTE LA JERARQUÍA DE ELLOS, a propósito. Su rótulo es la palabra "work" a 14vw: cuatro letras que funcionan como un signo gráfico. "Trabajos" tiene ocho y a ese cuerpo se vuelve una banda de tipografía a todo lo ancho — un SEGUNDO titular, repitiendo el gesto del logotipo que está justo arriba (medido a 393: el rótulo era 1,45x el alto del logotipo, o sea le gritaba más fuerte que la marca). Acá la palabra sólo orienta, así que va chica; y lo que se lee es la frase, que dice algo que ellos no pueden decir. El que tiene que gritar es el trabajo, no el cartel que lo anuncia. */ .work-tag-container{flex-direction:column;align-items:flex-start;gap:.6vw} .work-tag-container .h2-title{ font-size:11px;line-height:1;letter-spacing:.2em;text-transform:uppercase; color:#9a9a9a;width:auto;max-width:none; } .work-tag-container .selected-work-container{display:block} .work-tag-container .selected-work-container .h4{ color:#1d1d1d;max-width:30ch;text-wrap:balance;line-height:1.3; font-size:1.5vw;letter-spacing:-.01em; } @media screen and (max-width:991px){ .work-tag-container{gap:1.6vw} .work-tag-container .selected-work-container .h4{font-size:2.8vw} } @media screen and (max-width:767px){ .work-tag-container .selected-work-container .h4{font-size:3.6vw} } @media screen and (max-width:479px){ .work-tag-container{gap:2.6vw} .work-tag-container .selected-work-container .h4{font-size:4.6vw;max-width:29ch} } /* ---------- vitrina del hero ---------- El recuadro sigue siendo el 2:1 del esqueleto y NO cambia de tamaño. Adentro entran dos sitios en versión móvil, uno por lado, y la pareja rota. Cada mitad queda en 0.99:1 (casi cuadrada), por eso las portadas se graban a 393 de ancho (móvil real) y se recortan arriba: se ve la primera pantalla. */ .hero-vitrina{ position:relative;width:100%;height:100%; border-radius:8px;overflow:hidden;background:var(--campo,#f5f4f2); transition:background-color 760ms cubic-bezier(.23,1,.32,1); } /* las dos caras se cruzan en el mismo lugar: el recuadro no se mueve */ .hv-cara{position:absolute;inset:0;opacity:0;pointer-events:none; transition:opacity 760ms cubic-bezier(.23,1,.32,1)} .hv-cara.on{opacity:1} /* cara "uno": el escritorio llena el recuadro entero */ .hv-esc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity 500ms linear} .hv-esc.on{opacity:1} /* cara "par": UN solo recuadro partido en dos, sin separación ni bordes propios (era lo que hacía que los cantos no cerraran). Cada lado es un campo de color sacado de la propia pantalla del cliente, con el teléfono entero encima. */ .hv-par{display:grid;grid-template-columns:1fr 1fr;gap:0} .hv-mitad{position:relative;display:flex;align-items:center;justify-content:center; overflow:hidden;background:var(--campo,#f5f4f2); transition:background-color 760ms cubic-bezier(.23,1,.32,1)} .hv-tel{ position:absolute;height:82%;width:auto;max-width:none;object-fit:contain;display:block; border-radius:6px;box-shadow:0 2px 14px rgba(0,0,0,.22); opacity:0;transition:opacity 760ms cubic-bezier(.23,1,.32,1); } .hv-tel.on{opacity:1} @media (prefers-reduced-motion:reduce){ .hero-vitrina,.hv-cara,.hv-esc,.hv-tel,.hv-mitad{transition:none} } /* ---------- las obras llenan su tesela, sin campo de color alrededor ---------- */ /* si la tesela recorta, que recorte por abajo: en una captura de sitio la cabecera del cliente es lo que identifica que es un sitio web */ .v-obra{width:100%;height:100%;object-fit:cover;object-position:center top; display:block;background:#f5f4f2} /* La tesela vertical trae el contenedor centrado (top:50% + translate -50%) dentro de una caja mas baja, asi que recortaba arriba Y abajo: se veia la franja del medio y se perdia la cabecera del cliente. Va anclado arriba. El estilo viene en linea, por eso necesita !important. */ .home-video-container.portrait [data-video-id]{ top:0!important;transform:translateX(-50%)!important} .inner-video-embed video{border-radius:inherit} /* ---------- clientes (ocupa el lugar de la cinta de marcas) ---------- */ .single-brand-container.swiper-slide{ background:#f6f6f6;flex-direction:column;align-items:flex-start;justify-content:flex-end; padding:1vw;gap:.2vw; } .cliente-nombre{ font-family:'Mona Sans',sans-serif;font-size:1.4vw;line-height:110%;letter-spacing:-.02em;color:#1d1d1d; } .cliente-dom{font-family:'Mona Sans',sans-serif;font-size:.8vw;line-height:130%;color:#9a9a9a} /* ---------- contacto: filas en vez del formulario ---------- */ .contacto-filas{display:flex;flex-direction:column;width:100%} .contacto-fila{ display:flex;align-items:baseline;justify-content:space-between;gap:1vw; padding:1.1vw 0;border-bottom:1px solid #e5e5e5;text-decoration:none; } .contacto-fila:first-child{border-top:1px solid #e5e5e5} .contacto-k{font-family:'Mona Sans',sans-serif;font-size:1vw;color:#9a9a9a} .contacto-v{font-family:'Mona Sans',sans-serif;font-size:1.6vw;color:#1d1d1d;letter-spacing:-.02em} a.contacto-fila:hover .contacto-v{text-decoration:underline} /* ---------- marca en la barra, el pie y la cinta ---------- */ /* el glifo va en el hueco de 24px que tenia el de ellos */ .marca-v{width:24px;height:auto;display:block} .form-fun-logo{width:auto} .marca-pie{ font-family:'Mona Sans',sans-serif;font-size:1.2vw;letter-spacing:-.03em;color:#1d1d1d; white-space:normal;display:block;max-width:100%;line-height:1.05; } .logo-container{min-width:0} /* el logotipo grande del cierre: ocupa el ancho completo como el de ellos */ .marca-pie-grande{ display:block;width:100%;text-align:center;font-family:'Mona Sans',sans-serif;font-weight:500; font-size:12.6vw;line-height:.85;letter-spacing:-.055em;color:#1d1d1d;white-space:nowrap; } .marca-cinta{ font-family:'Mona Sans',sans-serif;font-size:7vw;letter-spacing:-.03em;color:#e5e5e5; white-space:nowrap;line-height:1;padding-right:2vw; } /* los enlaces originales se quedan en la barra, invisibles pero accionables: ahi es donde Webflow tiene atadas las interacciones de sus paneles */ .oculto-ix{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap;pointer-events:none} /* ---------- botón del menú ---------- Dos trazos, no tres: el esqueleto es de trazo fino y tres rayas lo ensucian. El área táctil llega a 44px aunque el dibujo mida 24. */ .ham{ -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer; display:flex;flex-direction:column;justify-content:center;gap:6px; width:44px;height:44px;padding:0 10px;margin-right:-10px; } .ham span{display:block;height:1.5px;background:#1d1d1d;border-radius:2px; transition:transform 320ms cubic-bezier(.23,1,.32,1),width 320ms cubic-bezier(.23,1,.32,1)} .ham span:first-child{width:24px} .ham span:last-child{width:16px;align-self:flex-end} @media(hover:hover){ .ham:hover span:last-child{width:24px} } /* ---------- menú ---------- */ .menu{ position:fixed;inset:0;z-index:200;background:#fff; display:flex;flex-direction:column;justify-content:center; padding:0 4vw;opacity:0;visibility:hidden; transition:opacity 420ms cubic-bezier(.23,1,.32,1),visibility 420ms; } .menu.abierto{opacity:1;visibility:visible} .menu-x{ -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer; position:absolute;top:16px;right:calc(4vw - 10px); width:44px;height:44px;padding:10px;display:grid;place-items:center; } .menu-x span{position:absolute;width:22px;height:1.5px;background:#1d1d1d;border-radius:2px} .menu-x span:first-child{transform:rotate(45deg)} .menu-x span:last-child{transform:rotate(-45deg)} .menu-lista{display:flex;flex-direction:column;border-top:1px solid #e5e5e5} a.menu-op{ display:block;font-family:'Mona Sans',sans-serif;font-weight:400;color:#1d1d1d; text-decoration:none;letter-spacing:-.03em;line-height:1.1; font-size:8vw;padding:4.5vw 0;border-bottom:1px solid #e5e5e5; transform:translateY(14px);opacity:0; transition:transform 460ms cubic-bezier(.23,1,.32,1),opacity 460ms cubic-bezier(.23,1,.32,1), padding-left 300ms cubic-bezier(.23,1,.32,1); } .menu.abierto a.menu-op{transform:none;opacity:1} .menu.abierto a.menu-op:nth-child(1){transition-delay:60ms} .menu.abierto a.menu-op:nth-child(2){transition-delay:110ms} .menu.abierto a.menu-op:nth-child(3){transition-delay:160ms} .menu.abierto a.menu-op:nth-child(4){transition-delay:210ms} @media(hover:hover){ a.menu-op:hover{padding-left:12px} } a.menu-wa{color:#9a9a9a} .menu-pie{ position:absolute;left:4vw;bottom:26px;font-family:'Mona Sans',sans-serif; font-size:3vw;color:#9a9a9a;letter-spacing:.04em;text-transform:uppercase; } @media(prefers-reduced-motion:reduce){ .menu,.menu a.menu-op,.ham span{transition:none} a.menu-op{transform:none;opacity:1} } @media screen and (min-width:768px){ .menu{padding:0 2vw} .menu-x{right:calc(2vw - 10px);top:22px} a.menu-op{font-size:4.4vw;padding:1.8vw 0} .menu-pie{left:2vw;font-size:1vw} } @media screen and (min-width:992px){ .menu{padding:0 1vw} .menu-x{right:calc(1vw - 10px)} a.menu-op{font-size:3.4vw;padding:1.2vw 0} .menu-pie{left:1vw;font-size:.8vw} } /* ---------- barra: en español las palabras son mas largas ---------- La rejilla de ellos son 4 columnas iguales; en ingles el contenido cabe igual porque "Studio Contact Work" mide poco. Con "Estudio Contacto Trabajos" se desborda 80px. Se arregla dejando que la ultima columna tome el resto, no achicando la letra (legibilidad y area tactil no se tocan). */ @media screen and (max-width:991px){ /* la rejilla la define Webflow por id, que gana por especificidad */ #w-node-d162c96d-def7-dca0-b5b9-c4c4c5ca370d-73e587b1.nav{grid-template-columns:auto 0 0 1fr} .nav-inner{justify-content:flex-end;width:100%} } /* ============================ 991 ============================ */ @media screen and (max-width:991px){ /* la frase es mas grande en proporcion: entra menos texto por renglon */ .home-intro{max-width:20ch;margin-bottom:4vw} .cliente-nombre{font-size:2.6vw} .cliente-dom{font-size:1.6vw} .contacto-k{font-size:2vw} .contacto-v{font-size:3vw} .contacto-fila{padding:2vw 0} .marca-pie{font-size:2.4vw} .marca-cinta{font-size:9vw} } /* ============================ 767 ============================ */ @media screen and (max-width:767px){ .cliente-nombre{font-size:3.4vw} .cliente-dom{font-size:2.2vw} .single-brand-container.swiper-slide{padding:2vw;gap:.4vw} .contacto-k{font-size:2.6vw} .contacto-v{font-size:4vw} .marca-pie{font-size:3.4vw} .marca-cinta{font-size:14vw} } /* ============================ 479 ============================ */ @media screen and (max-width:479px){ .cliente-nombre{font-size:4.6vw} .cliente-dom{font-size:3vw} .contacto-k{font-size:3.4vw} .contacto-v{font-size:5.4vw} .contacto-fila{padding:3.5vw 0} .marca-pie{font-size:4.6vw} } /* ---------- recursos dentro de las láminas de "Qué hacemos" ---------- Ocupan el hueco donde la referencia pone su video. Cada uno corre de verdad y reacciona al dedo; el guion está en recursos.js. El cuadrado 1:1 es el que traía el hueco de ellos, no se toca. */ .recurso{ position:relative;overflow:hidden;width:100%;aspect-ratio:1/1; display:block;background:transparent;touch-action:pan-y; } /* ---------- rótulo de Recursos ---------- Mismo criterio que el de Trabajos: la palabra sólo orienta y va chica, y lo que se lee es la línea. La de ellos ("Expertise & Capabilities") nombra la categoría y no dice nada. */ .rot-recursos{display:flex;flex-direction:column;align-items:flex-start;gap:.6vw} .rot-recursos .h4{ font-size:11px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a; } .rot-recursos-linea{ font-family:'Mona Sans',sans-serif;color:#1d1d1d;letter-spacing:-.01em; line-height:1.3;max-width:30ch;text-wrap:balance;font-size:1.5vw; } @media screen and (max-width:991px){ .rot-recursos{gap:1.6vw} .rot-recursos-linea{font-size:2.8vw} } @media screen and (max-width:767px){ .rot-recursos-linea{font-size:3.6vw} } @media screen and (max-width:479px){ .rot-recursos{gap:2.6vw} .rot-recursos-linea{font-size:4.6vw;max-width:29ch} } /* ⚠️ La referencia pone un `.overlay-hover` ENCIMA de cada lámina. Con el recurso adentro eso se come el puntero: el dedo nunca llegaba al canvas y el recurso parecía un video. En sus láminas no molesta porque las suyas son video y no reaccionan a nada. */ .expertise-wrapper .overlay-hover{pointer-events:none} /* pan-y y no `none`: el arrastre horizontal va al recurso y el vertical sigue sirviendo para bajar por la página, que es lo que uno hace en un teléfono */ .recurso{touch-action:pan-y;cursor:grab} .recurso:active{cursor:grabbing} /* La invitación a tocar. Sin esto el recurso se lee como un video: nadie pasa el dedo por encima de una imagen para ver si responde. Se va sola en cuanto la tocan una vez. */ .recurso-pista{ position:absolute;left:50%;bottom:10px;transform:translateX(-50%); display:flex;align-items:center;gap:6px; padding:6px 11px;border-radius:999px; background:rgba(29,29,29,.72);color:#fff; font-family:'Mona Sans',sans-serif;font-size:10.5px;letter-spacing:.04em; white-space:nowrap;pointer-events:none; transition:opacity 420ms ease, transform 420ms ease; } .recurso-pista::before{ content:'';width:7px;height:7px;border-radius:50%;background:#fff; animation:pistaLat 1.8s ease-in-out infinite; } @keyframes pistaLat{0%,100%{transform:translateX(-4px);opacity:.5}50%{transform:translateX(4px);opacity:1}} .recurso.tocado .recurso-pista{opacity:0;transform:translateX(-50%) translateY(6px)} @media (prefers-reduced-motion:reduce){ .recurso-pista::before{animation:none} } /* ============================================================ CÓMO TRABAJAMOS — "ficha sin filetes" (T1b, elegido 2026-08-13). Va en el hueco que dejaron los premios de la referencia, pero YA NO hereda su tabla: eso era lo que delataba la copia. Dos decisiones, las dos con referencia detrás: 1. JERARQUÍA INVERTIDA. Lo grande es QUÉ PASA; el nombre del paso baja a versalita chica y el tiempo queda al margen, como el cartel de una pieza en una sala. Es el patrón de los diez principios de Rams en Vitsœ y del índice de ensayos de Craig Mod. La tabla anterior hacía lo contrario: gritaba el rótulo y susurraba el contenido. 2. SIN FILETES. La estructura la sostienen la alineación y el aire (Robin Rendle, Craig Mod; en Basecamp los filetes separan secciones, no filas). El filete por fila era el rasgo del bloque de premios: quitándolo se va el parecido, sin agregar nada a cambio. ⚠️ La sección ya NO lleva el rótulo diminuto en versalita. Era el tercero de la página y a partir del tercero deja de ser sistema de marca y pasa a ser tic. Lo reemplaza el total, que además es el dato que el visitante venía a buscar. ============================================================ */ /* ⚠️ LA FAMILIA HAY QUE PEDIRLA A MANO. El esqueleto de Webflow no pone la tipografía en `body`: la declara clase por clase, y `body` se queda en el Arial por defecto de su hoja. Cualquier clase NUEVA que uno invente cae en Arial sin avisar. Se desplegó así una vez y sólo se vio midiendo `fontFamily` computado: en la captura parecía "otra Mona". Vale para cualquier bloque que se agregue a este sitio de aquí en adelante. */ .proceso, .proceso *{font-family:'Mona Sans',sans-serif} .proceso-total{ margin:0 0 7vw;font-size:5.4vw;line-height:1.1;letter-spacing:-.012em;color:#1d1d1d; } .proceso-total small{ display:block;font-size:.63em;color:#767676;margin-top:.5em;letter-spacing:0; } .lista-pasos{width:100%} /* ============================================================ BASE COMÚN. Vuelve el filete —era la única estructura que tenía la sección y quitarlo dejó "texto suelto todo igual"— y vuelve el NOMBRE como elemento de despliegue. Una palabra corta en grande crea ritmo y aire; una frase de veinte palabras en grande crea un muro. Ese fue el error de T1b, y es la diferencia con los diez principios de Rams, donde cada principio es una sola línea. ============================================================ */ .paso-item{ padding:4vw 0;border-top:1px solid rgba(29,29,29,.2); } .paso-alto{ display:flex;justify-content:space-between;align-items:baseline;gap:1em; } /* El nombre es el elemento de despliegue; el número va delante, chico y en gris, como una foliación. `align-items:baseline` para que los dos cuerpos se apoyen en la misma línea. */ .paso-nombre{display:inline-flex;align-items:baseline;gap:.7em} .paso-nombre i{ font-style:normal;font-size:3vw;color:#767676; font-variant-numeric:tabular-nums; } .paso-nombre b{ font-weight:400;font-size:5.1vw;line-height:1.05; letter-spacing:-.012em;color:#1d1d1d; } .paso-tiempo{font-size:3.2vw;color:#767676;white-space:nowrap} .paso-frase{font-size:3.6vw;line-height:1.35;margin:1.2vw 0 0;max-width:38ch;color:#3d3d3d} .paso-tuyo{font-size:3.4vw;color:#767676;margin:1.1vw 0 0} .paso-tuyo b{color:#1d1d1d;font-weight:400} @media screen and (min-width:700px){ /* ⚠️ A todo el ancho, el tiempo quedaba en el borde derecho de la pantalla (1.392 px) mientras la frase medía 503: 890 px de vacío en medio y la fila dejaba de leerse como una unidad. El dato se alinea al borde de la COLUMNA de lectura, no del navegador — que es lo que hacen Craig Mod y Robin Rendle con sus fechas. */ .proceso .lista-pasos, .proceso-total{max-width:52rem} .proceso-total{ font-size:2.3rem;margin-bottom:3.4rem; display:flex;align-items:baseline;gap:1.4rem; } .proceso-total small{display:inline;font-size:.42em;margin:0} .paso-item{padding:1.3rem 0} .paso-nombre i{font-size:.78rem} .paso-nombre b{font-size:1.5rem} .paso-tiempo{font-size:.85rem} .paso-frase{font-size:1rem;margin-top:.5rem;max-width:52ch} .paso-tuyo{font-size:.9rem;margin-top:.35rem} } /* Revelado: cada paso sube un poco y aparece, escalonado 110 ms. Una vez y después quieto, como todo acá. El estado de partida va en el CSS detrás de `html.escribe`: sin JS o con "menos movimiento" la lista se ve entera desde el primer pintado. */ /* Lo que se perdió al recortar el copy ("de tu lado: nada"), dicho UNA vez al pie de la lista en lugar de seis veces dentro de ella. */ .proceso-tuyo{ margin:4.5vw 0 0;font-size:3.4vw;line-height:1.4;color:#767676; padding-top:4vw;border-top:1px solid rgba(29,29,29,.2); } @media screen and (min-width:700px){ .proceso-tuyo{margin-top:1.3rem;padding-top:1.3rem;font-size:.9rem;max-width:52rem} } html.escribe .lista-pasos .paso-item{ opacity:0;transform:translateY(10px); transition:opacity .7s ease var(--d,0ms), transform .7s cubic-bezier(.22,.85,.3,1) var(--d,0ms); } html.escribe .lista-pasos .paso-item.revelada{opacity:1;transform:none} /* ============================================================ LOTE DE AUDITORÍA (08-13) — accesibilidad y uso en teléfono. Medido con accesslint sobre el sitio en vivo (20 avisos) y con Playwright a 393 y 1440. ============================================================ */ /* ⚠️ CONTRASTE. El gris de la marca (#9a9a9a) da 2,6:1 sobre blanco: sirve para el logotipo (que es display y está exento) pero NO para texto chico, donde el mínimo es 4,5:1. Todos estos son texto de lectura, no marca: los rótulos de sección, los dominios de los clientes, los enlaces del pie y los rótulos de la tabla de proceso. #767676 da 4,54:1 y sigue leyéndose claramente como secundario. */ .work-tag-container .h2-title, .rot-recursos .h4, .cliente-dom, .footer-links.gray{color:#767676} /* ⚠️ Volver la declaración un

le trajo encima la regla de Webflow para ese elemento: `h1{text-transform:uppercase; line-height:6.5vw; color:#101010}` más `h1..h6{margin-bottom:10px; font-weight:700}`. La frase salió EN MAYÚSCULAS, más apretada y pegada al botón. La etiqueta cambia por semántica y por buscadores; el aspecto tiene que quedar igual que antes. */ h1.home-intro{ text-transform:none;font-weight:inherit;color:#1d1d1d; line-height:110%;margin-top:0;margin-bottom:2.6vw; } /* ⚠️ TOQUE. Los puntos del carrusel miden 6×6 px: 20 blancos de ese tamaño en la página. El punto se deja igual —es lo que se ve— y se le cuelga un área táctil invisible de 44 px, que es el mínimo con el que un pulgar acierta. */ .splide__pagination__page{position:relative} .splide__pagination__page::after{ content:"";position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%); } /* ⚠️ TAMAÑO DE LETRA. En móvil los rubros de cada obra caían a 10,2 px y la píldora de los recursos a 10,5. Por debajo de 11 px se deja de leer en un teléfono, y en móvil está el grueso del tráfico. */ @media screen and (max-width:767px){ .work-tags{font-size:max(11.5px, 2.9vw)} .recurso-pista{font-size:11.5px} } /* el dominio del cliente va sobre #f6f6f6, no sobre blanco: ahí #767676 se queda en 4,2:1 y hace falta un punto más de tinta para llegar al mínimo */ .cliente-dom{color:#6e6e6e} /* Los rubros de cada obra: 2,6vw caen a 10,2 px a 393 y el gris #a0a0a0 da 2,4:1. Es la etiqueta que dice de qué es cada sitio, no un adorno. */ .work-tags.nav-work{color:#6e6e6e} @media screen and (max-width:767px){ .work-tags.nav-work{font-size:max(11.5px, 2.9vw)} } /* la píldora del recurso también a 11,5 px en escritorio */ .recurso-pista{font-size:11.5px} /* ---------- la marca dibujada en la cinta y en el pie ---------- Los dos son usos de DESPLIEGUE del nombre. Iban en texto (Mona) mientras el hero ya llevaba el logotipo dibujado: eran dos marcas distintas en la misma página. El tamaño sigue colgando del `font-size` que ya tenían, así que el ritmo de la cinta no se mueve. */ .marca-cinta{display:inline-block;line-height:0;white-space:nowrap} .marca-cinta svg{display:block;height:1.05em;width:auto;overflow:visible} .marca-cinta .letra{color:#e5e5e5} .marca-pie-grande{display:block;line-height:0} .marca-pie-grande svg{display:block;width:100%;height:auto;overflow:visible} .marca-pie-grande .v{color:#1d1d1d} .marca-pie-grande .d{color:#9a9a9a} /* ---------- cierre: el llamado a escribir ---------- La página terminaba en la cinta de clientes y caía directo al pie: el visitante convencido no tenía dónde tocar. No va una píldora. La acción se compone como se compone todo acá, con la escala tipográfica: la línea grande ES el enlace, la marca de WhatsApp queda como signo al margen y un filete se traza debajo al entrar. Ese filete es el mismo gesto del logotipo, de los iconos y de la tabla. ⚠️ Se queda POR DEBAJO de la altura de mayúscula del logotipo: es la lección del rótulo "Trabajos", que medía 1,45x la marca y le gritaba encima. La acción puede pesar como el nombre del estudio, nunca más. */ .module-blocks.cierre{ display:flex;flex-direction:column;align-items:flex-start; /* ⚠️ EL RELLENO DE ARRIBA HACE EL TRABAJO QUE HACÍA LA FRASE. Acá vivía "El paso 01 empieza con un mensaje.", borrada por repetir la tabla de arriba. Si sólo se borra el texto, el llamado queda pegado al filete de sección y el cierre arranca en seco: el aire que ocupaba la frase se le devuelve al llamado subiendo este relleno (era 5/8/12vw). */ padding-top:9vw;padding-bottom:5vw;border-top:1px solid rgba(29,29,29,.2); } .cierre-cta{ position:relative;display:inline-block;text-decoration:none;color:#1d1d1d; font-family:'Mona Sans',sans-serif;font-size:7vw;line-height:1.02; letter-spacing:-.035em;padding-bottom:.14em; } /* ⚠️ La marca de WhatsApp iba ANTES del texto y empujaba el primer renglón: la primera línea arrancaba corrida y la segunda en el margen, o sea que el borde izquierdo dejaba de estar a plomo. Va detrás, como signo. */ /* ⚠️ ESTABA A 9 PX Y EN GRIS, y era el peor desperdicio de la página: la marca de WhatsApp es el ÚNICO signo de esta pantalla que se reconoce sin saber nada de diseño (cualquiera en Colombia lo identifica al instante), y estaba puesto al 19% del cuerpo de la letra en gris de segunda. Sube a .42em y pasa a tinta. Sigue siendo un signo al margen, no un botón. El desplazamiento vertical se recalculó: `vertical-align` en em cuelga del cuerpo del PROPIO elemento, así que al más que doblar la fuente el .58em viejo lo habría mandado por encima de la línea. */ .cierre-signo{ display:inline-block;vertical-align:.3em;font-size:.42em;margin-left:.3em; color:#1d1d1d;transition:transform .4s cubic-bezier(.22,.85,.3,1); } .cierre-signo svg{display:block} /* el filete: se traza de izquierda a derecha al entrar, y en el hover se retira por la derecha y vuelve a entrar por la izquierda */ .cierre-filete{ position:absolute;left:0;right:0;bottom:0;height:2px;background:#1d1d1d; transform:scaleX(0);transform-origin:left center; transition:transform .9s cubic-bezier(.22,.85,.3,1); } .cierre-cta.trazada .cierre-filete{transform:scaleX(1)} .cierre-cta:hover .cierre-signo{transform:translateY(-.12em)} @media (hover:hover){ .cierre-cta.trazada:hover .cierre-filete{ animation:cierre-repasa .85s cubic-bezier(.22,.85,.3,1); } } @keyframes cierre-repasa{ 0% {transform:scaleX(1);transform-origin:right center} 49% {transform:scaleX(0);transform-origin:right center} 50% {transform:scaleX(0);transform-origin:left center} 100% {transform:scaleX(1);transform-origin:left center} } @media (prefers-reduced-motion:reduce){ .cierre-filete{transform:scaleX(1);transition:none} .cierre-cta:hover .cierre-filete{animation:none} } @media screen and (max-width:991px){ .module-blocks.cierre{padding-top:14vw;padding-bottom:10vw} .cierre-cta{font-size:8.4vw} } @media screen and (max-width:767px){ .cierre-cta{font-size:9.4vw} } @media screen and (max-width:479px){ .module-blocks.cierre{padding-top:26vw;padding-bottom:14vw} /* dos renglones a este cuerpo: la mayúscula queda a la altura de la del logotipo, que es el techo que nos pusimos */ .cierre-cta{font-size:11.4vw;letter-spacing:-.04em} .cierre-filete{height:2px} } /* ---------- las ocho placas de clientes ---------- Reemplazan los cinco carruseles verticales de la referencia, que rotan una ficha cada 4 s: con logos de marcas mundiales eso funciona, con ocho clientes nuestros deja ver UNO mientras el titular promete ocho. Quietas, todas a la vista, y cada una abre el sitio del cliente. */ .placas{display:grid;grid-template-columns:repeat(4,1fr);gap:.8vw;width:100%} .placa{ position:relative;display:flex;flex-direction:column;justify-content:flex-end; aspect-ratio:16/10;border-radius:.6vw;padding:1.2vw;text-decoration:none; overflow:hidden;transition:transform .45s cubic-bezier(.22,.85,.3,1); } .placa-nombre{font-family:'Mona Sans',sans-serif;font-size:1.1vw;line-height:1.15} .placa-dom{font-family:'Mona Sans',sans-serif;font-size:.8vw;line-height:1.4;margin-top:.2vw} .placa-flecha{ position:absolute;top:1vw;right:1.1vw;font-size:1.1vw;line-height:1;opacity:0; transform:translate(-.25em,.25em); transition:opacity .35s ease,transform .45s cubic-bezier(.22,.85,.3,1); } @media (hover:hover){ .placa:hover{transform:translateY(-.35vw)} .placa:hover .placa-flecha{opacity:.8;transform:none} } .placa:focus-visible{outline:2px solid #1d1d1d;outline-offset:3px} @media (prefers-reduced-motion:reduce){ .placa,.placa-flecha{transition:none} } @media screen and (max-width:991px){ .placas{grid-template-columns:repeat(3,1fr);gap:1.6vw} .placa{border-radius:1.2vw;padding:2.2vw} .placa-nombre{font-size:2vw} .placa-dom{font-size:1.5vw} .placa-flecha{display:none} } @media screen and (max-width:767px){ .placas{grid-template-columns:repeat(2,1fr);gap:2.2vw} .placa{padding:3vw;border-radius:1.8vw} .placa-nombre{font-size:3vw} .placa-dom{font-size:2.2vw} } @media screen and (max-width:479px){ .placas{gap:3vw} .placa{aspect-ratio:3/2;padding:4vw;border-radius:2.4vw} .placa-nombre{font-size:4vw;line-height:1.1} .placa-dom{font-size:3vw;margin-top:.6vw} } /* ---------- el cuadro abre el sitio, y lleva su pie ---------- El nombre, el dominio y el enlace venían del bloque "Ocho negocios", que era la tercera aparición de los mismos ocho y se eliminó. Van donde está la obra: debajo del cuadro, en el registro de un pie de exposición. */ .obra-enlace{display:block;text-decoration:none;color:inherit} .obra-pie{ display:flex;align-items:baseline;gap:.55em; padding-top:.75vw;position:relative; } .obra-nombre{font-family:'Mona Sans',sans-serif;color:#1d1d1d;font-size:.95vw;line-height:1.2} .obra-rubro{font-family:'Mona Sans',sans-serif;color:#767676;font-size:.8vw;line-height:1.2} .obra-flecha{ margin-left:auto;color:#767676;font-size:.85vw;line-height:1; opacity:0;transform:translate(-.25em,.25em); transition:opacity .3s ease,transform .4s cubic-bezier(.22,.85,.3,1); } @media (hover:hover){ .obra-enlace:hover .obra-flecha{opacity:1;transform:none} .obra-enlace:hover .obra-nombre{text-decoration:underline;text-underline-offset:.22em} } /* en el teléfono no hay hover: la flecha se queda puesta, callada */ @media (hover:none){ .obra-flecha{opacity:.55;transform:none} } .obra-enlace:focus-visible{outline:2px solid #1d1d1d;outline-offset:4px} @media (prefers-reduced-motion:reduce){ .obra-flecha{transition:none} } @media screen and (max-width:991px){ .obra-pie{padding-top:1.6vw;gap:.5em} .obra-nombre{font-size:1.9vw} .obra-rubro{font-size:1.6vw} .obra-flecha{font-size:1.7vw} } @media screen and (max-width:767px){ .obra-nombre{font-size:2.6vw} .obra-rubro{font-size:2.2vw} .obra-flecha{font-size:2.4vw} } @media screen and (max-width:479px){ .obra-pie{padding-top:2.8vw;flex-wrap:wrap;gap:.45em} .obra-nombre{font-size:3.9vw} .obra-rubro{font-size:3.2vw} .obra-flecha{font-size:3.4vw} } /* ⚠️ El nombre accesible de un enlace tiene que CONTENER su texto visible: con un `aria-label` propio ("Abrir el sitio de …") el lector anuncia una cosa y quien dicta por voz dice otra. La coletilla va como texto oculto. */ .solo-lectores{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* ============================================================ EL PIE FIRMA CON EL TRAZO (08-13) La página abre escribiendo el nombre y cierra firmándolo. El gesto sale de cómo está construido nuestro logotipo —líneas medias trazadas con un grosor— y por eso la referencia no puede hacerlo: su marca son contornos rellenos y sólo se puede revelar con máscaras. El estado de partida vive acá, en el CSS, y cuelga de `html.escribe`: sin JavaScript o con `prefers-reduced-motion` la clase nunca se agrega y la marca se ve entera y quieta, que es lo correcto para una marca. Los trazos llevan pathLength="1", así que una sola regla oculta los 24 por más que midan distinto. ============================================================ */ html.escribe .marca-pie-grande path{stroke-dasharray:1;stroke-dashoffset:1} html.escribe .marca-pie-grande circle{ transform-box:fill-box;transform-origin:center;transform:scale(0); } @media (prefers-reduced-motion:reduce){ html.escribe .marca-pie-grande path{stroke-dasharray:none;stroke-dashoffset:0} html.escribe .marca-pie-grande circle{transform:none} } /* El "Respondemos el mismo día" es una aclaración del teléfono, no otro enlace: va un punto más chico y sin subrayado para que no compita. */ .footer-nota{margin-top:.35em;font-size:.86em} /* ============================================================ PIE (08-13, tarde) — fuera la rejilla de cuatro columnas de la referencia. Era lo último de la página que se leía como calco: logo | Menu | Social | Business enquiries. Y en un teléfono, tres columnas de enlaces de 14 px son objetivos malos de tocar; funcionan como mapa del sitio, no como puerta. Ahora el final es UNA acción y dos hechos que quitan miedo. ⚠️ SE PROBÓ CON BOTONES Y SE TIRÓ (08-13, 17:40). Una hilera de botones rellenos ponía "Escribir por WhatsApp" DOS VECES en la misma pantalla —la línea gigante de arriba ya ES ese enlace— y las dos se anulaban. Y un rectángulo negro con etiqueta blanca y flecha es el componente más genérico posible en una página que es toda hairline, sin rellenos y sin cajas: se leía atornillado. Queda un llamado (la línea grande), dos salidas de texto y dos hechos. ⚠️ LA FAMILIA SE PIDE A MANO. El esqueleto de Webflow no la pone en `body`: la declara clase por clase, así que cualquier clase nueva cae en Arial sin avisar y en la captura parece "otra Mona", no un error. ============================================================ */ /* ⚠️ EL HUECO DE 110 px ERAN DOS RELLENOS IGUALES, UNO ENCIMA DEL OTRO, y sólo se vio midiendo: `.module-blocks.cierre` cierra con 55 px (14vw) y el `.footer` de la referencia abre con otros 55 (en escritorio, 72 + 86). El intervalo salía 2,8 veces más grande que el siguiente de la pantalla y casi un TERCIO del cierre entero era banda vacía: el llamado y el pie se leían como dos bloques que no se hablan, no como un final. El relleno de ellos existía para despegar su pie de la sección de arriba; acá esa separación ya la pone nuestro propio cierre. Se va el duplicado y queda el ritmo 48 · 31 · 55 · 28 · 39, que baja parejo y agrupa la cola debajo del llamado. ⚠️ NO subir esto a `.module-blocks.cierre`: su relleno es el que hace la separación buena. El sobrante era el de ellos. */ .footer{padding-top:0} .pie-cierre{padding:0 0 10vw} .pie-cierre, .pie-cierre *{font-family:'Mona Sans',sans-serif} /* Las dos salidas: enlaces de texto. No son botones y no deben parecerlo, pero SÍ tienen que leerse como accionables sin pasar el cursor —en el teléfono no hay hover y ahí está el grueso del tráfico. ⚠️ MEDIDO: la página tiene 15 filetes visibles y sólo 5 son clicables, o sea que el subrayado acierta 1 de cada 3 veces. Acá la línea de un pelo es el idioma de la casa, así que sola no puede significar "enlace". Por eso la señal se reparte en tres: cuerpo mayor que el de los datos, subrayado a tinta de verdad (no al 28%), y el glifo de la marca. Y por contraste, los datos de abajo quedan chicos, grises y sin subrayar: la diferencia entre las dos filas es la que le enseña al visitante cuál se toca. */ .pie-salidas{ margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.8em; font-size:4.3vw;line-height:1.5; } .pie-salidas a{ position:relative;display:inline-flex;align-items:center;gap:.5em; color:#1d1d1d;text-decoration:none; } /* el subrayado cuelga del span y no del enlace: puesto en el se dibuja también bajo el glifo y lo tacha. `skip-ink` abre el trazo al pasar por la jota de "trabajos" en vez de partirla. */ .pie-salidas a span{ text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.26em;text-decoration-skip-ink:auto; text-decoration-color:rgba(29,29,29,.55); transition:text-decoration-color .28s ease; } .pie-salidas a:hover span,.pie-salidas a:focus-visible span{text-decoration-color:#1d1d1d} /* el glifo va a trazo, con el mismo grosor relativo del resto de los iconos del sitio: es la marca del servicio, no un icono de librería */ .pie-glifo{width:1.3em;height:1.3em;flex:none;display:block} /* El ÁREA es grande, el DIBUJO sigue siendo una línea: el alto táctil se consigue con un ::after invisible de 44 px —el mismo truco que ya usan los puntos de los carruseles— y no con relleno, que engordaría la caja y volvería a leerse como botón. Un enlace en línea tampoco crece con padding vertical: el renglón lo ignora. */ .pie-salidas a::after{ content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px; } .pie-datos{ margin:7vw 0 0;display:flex;flex-wrap:wrap;gap:.35em 1.4em; font-size:3.4vw;line-height:1.5;color:#767676; } @media screen and (min-width:700px){ .pie-cierre{padding:0 0 4rem} /* por encima de los datos (.9rem): que la fila accionable pese más que la fila informativa es la mitad de la señal */ .pie-salidas{font-size:1.05rem;gap:.5em 2.2rem} .pie-datos{margin-top:2.6rem;font-size:.9rem;gap:.35em 2.2rem} } @media (prefers-reduced-motion:reduce){ .pie-salidas a{transition:none} } /* ============================================================ EL ASISTENTE (08-13) — panel, no globo flotante. ⚠️ Un globo de chat es el elemento más genérico de un sitio con IA, y esta página no tiene ni una caja ni un relleno: se leería atornillado, igual que se leyeron los botones del pie. Se abre desde la tercera salida de texto del cierre, que es donde el visitante duda. ⚠️ SIN GLOBOS TAMPOCO ADENTRO. La conversación se distingue con la misma jerarquía que ya usa el cierre: el visitante en gris y chico, el asistente en tinta y al cuerpo de lectura. La estructura la hacen el aire y el color, no las cajas. ⚠️ La familia se pide a mano: el esqueleto de Webflow no la pone en `body`. ============================================================ */ html.asis-abierto{overflow:hidden} .asis{position:fixed;inset:0;z-index:9999;background:#fff} .asis, .asis *{font-family:'Mona Sans',sans-serif} .asis-shell{ display:flex;flex-direction:column;height:100%; max-width:52rem;margin:0 auto;padding:0 5vw; } .asis-tope{ display:flex;align-items:baseline;justify-content:space-between;gap:1em; padding:5vw 0 3vw;border-bottom:1px solid rgba(29,29,29,.2); } .asis-quien{font-size:3.4vw;color:#767676;line-height:1.4} /* el cerrar es un enlace de texto con filete, no una cruz ni un botón */ .asis-cerrar{ flex:none;background:none;border:0;padding:0;cursor:pointer; font-size:3.4vw;color:#1d1d1d;line-height:1.4; border-bottom:1px solid rgba(29,29,29,.55); } .asis-hilo{ flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:6vw 0;display:flex;flex-direction:column;gap:4.5vw; } .asis-linea{margin:0;white-space:pre-wrap} /* el asistente manda: tinta, cuerpo de lectura */ .asis-asistente{font-size:4.3vw;line-height:1.45;color:#1d1d1d;letter-spacing:-.01em} /* el visitante es la pregunta, no la respuesta: gris y más chico, como los datos del pie. La diferencia de color y cuerpo alcanza para saber quién habla, sin una sola caja ni alineación a la derecha. */ .asis-visitante{font-size:3.6vw;line-height:1.5;color:#767676} .asis-espera{color:#9a9a9a} /* la salida a WhatsApp la pone el sitio, nunca el modelo: tiene prohibido escribir enlaces o el número en su texto */ .asis-wa{ align-self:flex-start;display:inline-flex;align-items:center;gap:.5em; color:#1d1d1d;text-decoration:none;font-size:4vw; } .asis-wa svg{width:1.25em;height:1.25em;flex:none;display:block} .asis-wa span{ text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.26em;text-decoration-color:rgba(29,29,29,.55); } .asis-barra{ display:flex;align-items:center;gap:1em;flex:none; padding:3.5vw 0 5vw;border-top:1px solid rgba(29,29,29,.2); } /* ⚠️ 16px DUROS: por debajo de eso iOS Safari hace auto-zoom al enfocar y el sitio entero se descuadra. Esta línea no es estética, es funcional. */ .asis-campo{ flex:1;min-width:0;background:none;border:0;padding:0; font-size:16px;line-height:1.4;color:#1d1d1d; } .asis-campo:focus{outline:none} .asis-campo::placeholder{color:#9a9a9a} .asis-enviar{ flex:none;background:none;border:0;padding:0;cursor:pointer; font-size:16px;color:#1d1d1d; border-bottom:1px solid rgba(29,29,29,.55); } .asis-pensando .asis-enviar{opacity:.4;pointer-events:none} /* ⚠️ CON EL TECLADO ABIERTO (body.kb-open) el `position:fixed` frena el scroll nativo de iOS, que si no arrastra la página por debajo del panel. El alto exacto lo escribe el guion una sola vez, ya asentado el viewport. */ /* ⚠️ EL CUERPO SE CONGELA AL ABRIR EL PANEL, NO AL ENFOCAR EL CAMPO. Ése era el bug del salto: el panel es `position:fixed`, y en iOS un elemento fijo se ancla al viewport de MAQUETA, no al visual. Al enfocar, iOS desplaza el de maqueta para revelar el input y se lleva el panel entero hacia arriba. Con el cuerpo congelado no hay nada que desplazar. El `top` negativo lo escribe el guion con el scroll guardado, y lo devuelve al cerrar. */ body.asis-fija{position:fixed;left:0;right:0;width:100%;overflow:hidden} body.kb-open .asis-tope{padding-top:2.5vw;padding-bottom:2.5vw} body.kb-open .asis-hilo{padding:3vw 0} @media screen and (min-width:700px){ .asis-shell{padding:0 2rem} .asis-tope{padding:2rem 0 1.1rem} .asis-quien,.asis-cerrar{font-size:.9rem} .asis-hilo{padding:2.2rem 0;gap:1.6rem} .asis-asistente{font-size:1.15rem} .asis-visitante{font-size:.95rem} .asis-wa{font-size:1.05rem} .asis-barra{padding:1.2rem 0 2rem} } /* ============================================================ CARRUSEL DE TRABAJOS EN ESCRITORIO (08-13) — se podía ver menos de la mitad. ⚠️ MEDIDO: la pista mide 3.226 px dentro de una ventana de 1.440, recortada por `overflow:hidden`, y el esqueleto NO pone flechas ni puntos en escritorio (en móvil sí hay puntos). O sea: más de la mitad de las obras era inalcanzable salvo que el guion las corriera solo — y correrlas solo es justamente lo que se sentía acelerado, porque el movimiento no lo mandaba el visitante. La corrección es una sola idea: que la pista se desplace de verdad y que el visitante la mande. Sin autoplay, sin inercia prestada. ⚠️ `transform:none` es lo que apaga el movimiento heredado. Va con !important a propósito: el guion del esqueleto escribe el transform en línea, y en línea le gana a cualquier regla que no lo lleve. Sólo de 992 para arriba: en móvil el gesto es deslizar con el dedo y los puntos ya existen; ahí no hay nada roto que arreglar. */ @media screen and (min-width:992px){ .home-slider-container .splide__track{ overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity;scroll-behavior:smooth; padding-bottom:18px; /* el aire donde vive la barra */ } .home-slider-container .splide__list{transform:none !important} /* ⚠️ NO poner `width:max-content` en la lista. El guion le escribe a cada obra `width:calc(33.3333% - .666667vw)` en línea, y ese porcentaje se mide contra la lista: si la lista se mide contra su propio contenido, cada obra crece a 2.109 px y la pista se va a 16.971. MEDIDO, no supuesto. La lista se queda del ancho de la pista; cada obra ocupa un tercio y no se encoge. */ .home-slider-container .splide__slide{flex:0 0 auto;scroll-snap-align:start} /* La barra es un filete, no un control de sistema: 2 px de tinta corriendo sobre una línea de un pelo. Es el mismo gesto del resto de la página, y además dice cuánto falta por ver. */ .home-slider-container .splide__track{ scrollbar-width:thin;scrollbar-color:#1d1d1d rgba(29,29,29,.14); } .home-slider-container .splide__track::-webkit-scrollbar{height:2px} .home-slider-container .splide__track::-webkit-scrollbar-track{ background:rgba(29,29,29,.14); } .home-slider-container .splide__track::-webkit-scrollbar-thumb{ background:#1d1d1d;border-radius:0; /* esquinas en plano, como el logotipo */ } }