), pero se ve como kicker: la regla global de h2 lo pondría en serif, así que se fija la sans aquí. */ .stepper-titulo { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--gris); margin-bottom: 20px; line-height: 1.6; } .stepper { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--blanco); } .paso-flujo { padding: 22px 20px 24px; border-left: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #fafaf8, #ffffff); } .paso-flujo:first-child { border-left: none; } .paso-flujo .fila { display: flex; justify-content: space-between; align-items: center; } .paso-flujo .n { font-family: var(--mono); font-size: 13px; color: var(--gris); } .paso-flujo .punto { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 8px rgba(22,163,74,.5); } .paso-flujo .punto.progreso { background: #16a34a; animation: latido 1.4s ease infinite; } .paso-flujo .punto.pendiente { background: var(--linea); box-shadow: none; } @keyframes latido { 50% { opacity: .35; } } /* Mismo caso que .iso-lista: h3 por jerarquía, tipografía sans intacta. */ .paso-flujo h3, .paso-flujo h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1.6; } .paso-flujo p { font-size: 13px; color: var(--tinta-suave); line-height: 1.5; flex: 1; } .paso-flujo .estado { font-size: 12.5px; font-weight: 600; } .paso-flujo .estado.progreso::before { content: "● "; } .paso-flujo .estado.hecho::before { content: "✓ "; } .paso-flujo.apagado { opacity: .45; } @media (max-width: 1080px) { .stepper { grid-template-columns: repeat(2, 1fr); } .paso-flujo { border-top: 1px solid var(--linea); } .problemas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .stepper { grid-template-columns: 1fr; } .problemas { grid-template-columns: 1fr; } } /* ── Hover premium del banner de fotos ── */ .banner-celda { cursor: pointer; } .banner-celda img { transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s ease; } .banner-celda:hover img { transform: scale(1.07); filter: saturate(1.05) brightness(1.06); } .banner-celda .etiqueta { transition: transform .5s cubic-bezier(.22,1,.36,1); } .banner-celda:hover .etiqueta { transform: translateY(-6px); } .banner-celda .flecha { position: absolute; right: 16px; bottom: 14px; z-index: 2; color: #fff; font-size: 18px; opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .banner-celda:hover .flecha { opacity: 1; transform: none; } /* ═══ Animaciones premium: las gráficas trabajan solas (gris, lento) ═══ */ .grafica .g-grid { stroke: #e3e3e7; stroke-width: .75; stroke-dasharray: 1 5; stroke-linecap: round; fill: none; } .grafica .g-traza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-trazar 8s cubic-bezier(.45,0,.2,1) infinite; animation-delay: var(--d, 0s); } @keyframes g-trazar { 0% { stroke-dashoffset: 1; opacity: 0; } 5% { opacity: 1; } 38% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 93%, 100% { stroke-dashoffset: 0; opacity: 0; } } .grafica .g-doc rect, .grafica .g-doc path { fill: none; stroke: #17100d; stroke-width: 1.1; } .grafica .g-doc { opacity: 0; animation: g-aparecer 8s ease infinite; animation-delay: var(--d, 0s); } .grafica .g-fantasma rect { stroke: #9a9aa1; } @keyframes g-aparecer { 0% { opacity: 0; transform: translateY(-5px); } 6% { opacity: 1; transform: none; } 86% { opacity: 1; } 93%, 100% { opacity: 0; } } .g-pulso { animation: g-pulsar 3.2s ease-in-out infinite; } @keyframes g-pulsar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .g-bob { animation: g-bajar 2.6s ease-in-out infinite; } @keyframes g-bajar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .g-radar { transform-box: fill-box; transform-origin: center; animation: g-ondear 3.4s ease-out infinite; } .g-radar2 { animation-delay: 1.7s; } @keyframes g-ondear { 0% { transform: scale(.6); opacity: .9; } 75%, 100% { transform: scale(2.4); opacity: 0; } } /* ── El subrayado de "automatizado" se dibuja solo ── */ .hero-centro .subrayado .trazo-mano { stroke-dasharray: 1; stroke-dashoffset: 1; animation: subrayar 9s cubic-bezier(.5,0,.15,1) .4s infinite; } @keyframes subrayar { 0% { stroke-dashoffset: 1; } 14% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 93% { stroke-dashoffset: 0; opacity: 0; } 94%, 100% { stroke-dashoffset: 1; opacity: 0; } } /* ── Banner: título que se alza + descripción al hover ── */ .banner-celda .sub { transition: transform .5s cubic-bezier(.22,1,.36,1); } .banner-celda:hover .etiqueta, .banner-celda:hover .sub { transform: translateY(-40px); } .banner-celda .desc { position: absolute; left: 16px; right: 20px; bottom: 12px; z-index: 2; color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.45; font-weight: 400; opacity: 0; transform: translateY(10px); transition: opacity .4s ease .05s, transform .5s cubic-bezier(.22,1,.36,1) .05s; } .banner-celda:hover .desc { opacity: 1; transform: none; } .banner-celda::after { transition: background .5s ease; } .banner-celda:hover::after { background: linear-gradient(180deg, rgba(13,13,16,.25) 0%, rgba(13,13,16,0) 35%, rgba(13,13,16,.72) 100%); } @media (prefers-reduced-motion: reduce) { .grafica .g-traza, .grafica .g-doc, .g-pulso, .g-bob, .g-radar, .hero-centro .subrayado .trazo-mano { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } .banner-celda .desc, .banner-celda .sub { transition: none; } } /* ── El stepper se enciende paso a paso, en bucle ── */ .paso-flujo { transition: opacity .6s ease, background .6s ease, box-shadow .6s ease; } .paso-flujo.activo { background: #ffffff; box-shadow: inset 0 0 0 1px var(--linea), 0 14px 34px -20px rgba(23,16,13,.28); } .paso-flujo .estado { transition: color .4s ease; } /* ── Anillo de seguridad: diagrama animado (reemplaza la ilustración IA) ── */ /* ============================================================ El anillo de seguridad — Likida (sección Seguridad) Anima el SVG inline de anillo-snippet.html. Todas las clases, keyframes y variables llevan prefijo `anillo-`. ============================================================ */ .anillo-svg { display: block; width: 100%; height: auto; } /* Etiquetas monoespaciadas */ .anillo-etiqueta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; fill: #8b8b93; } /* --- Anillo intermedio: escáner que rota muy lento --- */ .anillo-escaner { transform-box: view-box; transform-origin: 280px 260px; animation: anillo-girar 52s linear infinite; } @keyframes anillo-girar { to { transform: rotate(360deg); } } /* --- Pulso que respira desde el núcleo --- */ .anillo-pulso { transform-box: view-box; transform-origin: 280px 260px; opacity: 0; animation: anillo-pulsar 7s cubic-bezier(.25, .6, .35, 1) infinite; } @keyframes anillo-pulsar { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.95); opacity: 0; } } /* --- Documentos válidos: entran por las líneas radiales hacia el núcleo --- */ .anillo-doc { animation: anillo-viajar 13s linear infinite; } /* Delays negativos: la escena ya está en marcha al cargar, sin pop-in */ .anillo-doc-1 { animation-delay: -2s; } .anillo-doc-2 { animation-delay: -5.25s; } .anillo-doc-3 { animation-delay: -8.5s; } .anillo-doc-4 { animation-delay: -11.75s; } @keyframes anillo-viajar { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 56% { opacity: 1; } 66% { transform: translate(var(--anillo-dx), var(--anillo-dy)); opacity: 0; } 100% { transform: translate(var(--anillo-dx), var(--anillo-dy)); opacity: 0; } } /* --- Documento inválido: llega al anillo exterior, rebota y se desvanece --- */ .anillo-doc-rechazado { animation: anillo-rebotar 26s linear infinite; } @keyframes anillo-rebotar { 0% { transform: translate(0, 0); opacity: 0; } 4% { opacity: 1; } 22% { transform: translate(var(--anillo-dx), var(--anillo-dy)); } 26% { transform: translate(calc(var(--anillo-dx) * .82), calc(var(--anillo-dy) * .82)); opacity: 1; } 36% { transform: translate(calc(var(--anillo-dx) * .5), calc(var(--anillo-dy) * .5)); opacity: 0; } 100% { transform: translate(calc(var(--anillo-dx) * .5), calc(var(--anillo-dy) * .5)); opacity: 0; } } /* Destello breve en el punto de impacto (misma duración = sincronizado) */ .anillo-flash { opacity: 0; animation: anillo-destello 26s linear infinite; } @keyframes anillo-destello { 0%, 20% { opacity: 0; } 23% { opacity: .9; } 30%, 100% { opacity: 0; } } /* --- Accesibilidad: sin movimiento --- */ @media (prefers-reduced-motion: reduce) { .anillo-svg, .anillo-svg * { animation: none !important; } } /* ═══ Gráficas v2: cada animación cuenta su texto ═══ */ .grafica .t-est, .grafica .t-campo { fill: none; stroke: #17100d; stroke-width: 1.1; } .grafica .t-lin { fill: none; stroke: #9a9aa1; stroke-width: 1; } .grafica .t-fant { fill: none; stroke: #9a9aa1; stroke-width: 1.1; animation: g-pulsar 3.2s ease-in-out infinite; } /* el ticket viaja de la guantera al campo de captura */ .t-viaja { animation: t-viajar 7s cubic-bezier(.55,0,.25,1) infinite; } @keyframes t-viajar { 0% { transform: translateX(0); opacity: 0; } 6% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(74px); opacity: 1; } 88% { transform: translateX(74px); opacity: 1; } 94%, 100% { transform: translateX(74px); opacity: 0; } } /* y se teclea, renglón por renglón */ .t-tipeo { stroke: #8b8b93; stroke-width: 1.3; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-tipear 7s steps(14) infinite; animation-delay: var(--d, 0s); } @keyframes t-tipear { 0%, 45% { stroke-dashoffset: 1; opacity: 1; } 80% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* la pasada de conciliación barre los 10 días */ .p-barrido { animation: p-barrer 10s linear infinite; } @keyframes p-barrer { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 83% { opacity: 1; } 86%, 100% { transform: translateX(183px); opacity: 0; } } .p-check { opacity: 0; animation: p-palomear 10s ease infinite; animation-delay: var(--d, 0s); } @keyframes p-palomear { 0% { opacity: 0; } 3% { opacity: 1; } 60% { opacity: 1; } 70%, 100% { opacity: 0; } } /* el reloj de 72 h */ .c-mano { transform-box: view-box; transform-origin: 146px 58px; animation: c-girar 8s linear infinite; } @keyframes c-girar { to { transform: rotate(360deg); } } .c-arco { stroke-dasharray: 1; animation: c-agotar 8s linear infinite; } @keyframes c-agotar { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } } .c-palomita { animation: c-valido 8s ease infinite; } @keyframes c-valido { 0%, 64% { opacity: 1; } 70%, 96% { opacity: 0; } 100% { opacity: 1; } } .c-equis { opacity: 0; animation: c-vencido 8s ease infinite; } @keyframes c-vencido { 0%, 66% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } } .c-etq { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; fill: #8b8b93; } /* el escáner vigila 4 vigencias; la quinta vence fuera */ .v-scan { animation: v-escanear 9s cubic-bezier(.6,0,.3,1) infinite; } @keyframes v-escanear { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(20px); } 50%, 70% { transform: translateY(40px); } 75%, 90% { transform: translateY(60px); } 96%, 100% { transform: translateY(0); } } .v-dot { opacity: .35; animation: v-vigilar 9s ease infinite; animation-delay: var(--d, 0s); } @keyframes v-vigilar { 0% { opacity: .35; } 4% { opacity: 1; } 24% { opacity: 1; } 32%, 100% { opacity: .35; } } .v-equis { opacity: 0; animation: v-sinaviso 9s ease infinite; } @keyframes v-sinaviso { 0%, 78% { opacity: 0; } 83%, 93% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .t-viaja, .t-tipeo, .t-fant, .p-barrido, .p-check, .c-mano, .c-arco, .c-palomita, .c-equis, .v-scan, .v-dot, .v-equis { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } .c-equis, .v-equis { opacity: 0 !important; } } /* ── Chatea con tus datos: banner de puntos estilo Handle ── */ .chat-marco { max-width: 1280px; margin: 0 auto; position: relative; overflow: hidden; background: #f2f1ee; border: 1px solid rgba(23,16,13,.05); border-radius: 30px; padding: clamp(48px, 6vw, 96px) 24px; transition: box-shadow .6s ease; } .chat-marco:hover { box-shadow: 0 30px 80px -30px rgba(23,16,13,.22); } .chat-puntos { position: absolute; inset: 0; width: 100%; height: 100%; color: #dbdad4; transition: color .6s ease; } .chat-marco:hover .chat-puntos { color: #c7c6bf; } .chat-tarjeta { position: relative; max-width: 520px; margin: 0 auto; text-align: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: 22px; padding: 34px 30px 26px; box-shadow: 0 18px 50px -22px rgba(23,16,13,.18); transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease; } .chat-marco:hover .chat-tarjeta { transform: translateY(-8px) scale(1.015); box-shadow: 0 34px 70px -26px rgba(23,16,13,.26); } .chat-glifo { width: 54px; height: 54px; border-radius: 14px; background: var(--tinta); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); } .chat-marco:hover .chat-glifo { transform: rotate(-6deg) scale(1.06); } .chat-glifo img { height: 26px; width: auto; } .chat-titulo { font-family: var(--serif); font-size: 24px; margin-bottom: 20px; } .chat-burbuja { text-align: left; font-size: 14.5px; line-height: 1.55; border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; } .chat-burbuja.usuario { background: var(--tinta); color: #fbfbfd; margin-left: 56px; border-bottom-right-radius: 4px; } .chat-burbuja.likida { background: var(--papel-2); color: var(--tinta); margin-right: 40px; border-bottom-left-radius: 4px; } .chat-campo { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--linea); border-radius: 999px; padding: 12px 18px; margin-top: 16px; color: var(--gris); font-size: 14.5px; text-align: left; } .chat-cursor { width: 1.5px; height: 16px; background: var(--tinta); animation: chat-parpadeo 1.1s steps(2) infinite; } @keyframes chat-parpadeo { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .chat-cursor { animation: none; } .chat-tarjeta, .chat-glifo, .chat-puntos, .chat-marco { transition: none !important; } } /* ── Hero: el SS del chat con zoom suave al pasar el cursor (tipo Handle) ── */ /* ── Marco del hero: el lienzo de mosaicos (misma estructura que Handle) ── El marco es estático a propósito: todo el movimiento vive dentro del canvas. */ .producto-marco-inner { position: relative; aspect-ratio: 16 / 9; /* el del video: 1920×1080, así no se recorta nada */ box-shadow: 0 8px 40px -12px rgba(0,0,0,.12); } /* El video del hero llena el marco. `contain` y no `cover` porque el anuncio está compuesto al pixel: recortarlo le comería el glifo y los remates. */ .producto-marco-inner .hero-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--blanco); } /* Botón de sonido. El video arranca mudo porque ningún navegador reproduce solo con audio; esto es lo único que devuelve la locución al que la quiera. */ .hero-sonido { position: absolute; right: 14px; bottom: 56px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #fff; background: rgba(23,16,13,.62); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; cursor: pointer; transition: background .18s ease, transform .18s ease; } .hero-sonido:hover { background: rgba(23,16,13,.8); transform: translateY(-1px); } .hero-sonido:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .hero-sonido svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; } .hero-sonido .hero-sonido-mudo path:first-child, .hero-sonido .hero-sonido-suena path:first-child { fill: currentColor; stroke: none; } /* Un solo icono a la vez, según el estado que anuncia aria-pressed. */ .hero-sonido .hero-sonido-suena { display: none; } .hero-sonido[aria-pressed="true"] .hero-sonido-mudo { display: none; } .hero-sonido[aria-pressed="true"] .hero-sonido-suena { display: inline; } @media (max-width: 560px) { .hero-sonido { right: 10px; bottom: 48px; padding: 7px 11px 7px 9px; font-size: 11.5px; } .hero-sonido .hero-sonido-txt { display: none; } .hero-controles { height: 34px; } } @media (prefers-reduced-motion: reduce) { .hero-sonido { transition: none; } .hero-sonido:hover { transform: none; } } /* ── Barra de controles del hero: play/pausa + progreso ── Mismo lenguaje visual que .hero-sonido (píldora oscura con blur), pero como barra completa al pie del marco. Aparece al mover el cursor sobre el video y se retira sola a los pocos segundos — igual que cualquier reproductor, para no taparle el anuncio a quien ya lo vio. */ .hero-controles { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px 0 8px; background: rgba(23,16,13,.62); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border-top: 1px solid rgba(255,255,255,.14); border-radius: 0 0 17px 17px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .28s ease, transform .28s ease; } .hero-controles.visible { opacity: 1; transform: none; pointer-events: auto; } .hero-play { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; padding: 0; color: #fff; background: transparent; border: none; cursor: pointer; } .hero-play svg { width: 15px; height: 15px; fill: currentColor; } .hero-play .hero-play-reproducir { display: none; } .hero-play[aria-pressed="false"] .hero-play-pausa { display: none; } .hero-play[aria-pressed="false"] .hero-play-reproducir { display: inline-block; } .hero-progreso { position: relative; flex: 1; height: 100%; display: flex; align-items: center; cursor: pointer; } .hero-progreso-pista { position: relative; display: block; width: 100%; height: 3px; background: rgba(255,255,255,.28); border-radius: 999px; } .hero-progreso-relleno { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: #fff; border-radius: 999px; } .hero-progreso-relleno::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translateY(-50%) scale(0); transition: transform .15s ease; } .hero-progreso:hover .hero-progreso-relleno::after, .hero-progreso:focus-visible .hero-progreso-relleno::after { transform: translateY(-50%) scale(1); } @media (prefers-reduced-motion: reduce) { .hero-controles { transition: none; } .hero-progreso-relleno::after { transition: none; } } /* ── Selector de idioma ES/EN (header, junto al CTA) ── El activo se pinta desde html[lang] — así nunca parpadea al recargar. */ .header-acciones { display: flex; align-items: center; gap: 14px; } .idioma { display: flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 13px; letter-spacing: .06em; line-height: 1; white-space: nowrap; } .idioma-op { font: inherit; letter-spacing: inherit; font-weight: 400; color: var(--gris); background: none; border: 0; padding: 3px 2px; margin: 0; cursor: pointer; border-radius: 4px; transition: color .18s ease; -webkit-appearance: none; appearance: none; } .idioma-op:hover { color: var(--tinta); } .idioma-op:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } .idioma-sep { color: var(--gris); opacity: .45; font-size: 12px; user-select: none; } html[lang="es"] .idioma-op[data-idioma="es"], html[lang="en"] .idioma-op[data-idioma="en"] { color: var(--tinta); font-weight: 600; cursor: default; } /* Velo anti-parpadeo mientras se aplica el idioma guardado (solo si no es el default) */ html[data-i18n-velo] body { visibility: hidden; } @media (max-width: 480px) { .header-acciones { gap: 10px; } .idioma { font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ MISIÓN — banner de mosaico en loop detrás del título ─────────────────────────────────────────────────────────────────────────── Clonado del hero de HappyRobot: rejilla modular de celdas cuadradas de ~98 px por las que van pasando fragmentos de foto, tenues, sin robarle la lectura al título. Allá el mosaico es un .mp4 de 10.04 s (1920×1080, loop muted); aquí es CSS puro — tres tiras en marquee, cada una repetida 3 veces y desplazada exactamente -33.3333%, así el último fotograma es idéntico al primero y el reinicio no se ve. Paleta del sitio: papel #fbfbfd, crema #f2f1ee, gris #9a9aa1, tinta #17100d. Todo va con prefijo .mision-* para no chocar con el hero de la portada. ═══════════════════════════════════════════════════════════════════════════ */ .mision-hero { --mision-celda: 98px; /* módulo de HappyRobot: 97.6 px a 1440 de ancho */ --mision-hueco: 14px; --mision-linea: rgba(154, 154, 161, .30); --mision-crema: #f2f1ee; --mision-op: .30; /* opacidad de reposo de cada foto */ isolation: isolate; } /* ── La caja del mosaico: centrada en vertical y desvanecida arriba y abajo ── */ .mision-mosaico { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; display: flex; flex-direction: column; justify-content: center; gap: var(--mision-hueco); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 70%, transparent 100%); } /* ── Una tira = una fila de celdas que se desplaza sola ── */ .mision-tira { position: relative; width: 100%; overflow: hidden; flex: 0 0 auto; } .mision-pista { display: flex; width: max-content; flex: 0 0 auto; animation: mision-desfile var(--mision-dur, 78s) linear infinite; will-change: transform; } /* Tres copias idénticas de una tira de 14 celdas ⇒ el recorrido es EXACTAMENTE el ancho de una copia (14 × la celda). Al terminar, la copia 2 está justo donde arrancó la 1 y el fotograma es idéntico al inicial: el reinicio no se ve. Se recorre en píxeles, no en %, para no dejar el residuo de subpíxel que deja un -33.3333% sobre un ancho que no divide exacto. */ @keyframes mision-desfile { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--mision-celda) * -14), 0, 0); } } /* Cinco filas, cada una a su velocidad y alternando el sentido: ninguna columna se queda alineada con la de arriba y el conjunto nunca se repite a la vista. */ .mision-tira-a .mision-pista { --mision-dur: 76s; } .mision-tira-b .mision-pista { --mision-dur: 104s; animation-direction: reverse; } .mision-tira-c .mision-pista { --mision-dur: 88s; } .mision-tira-d .mision-pista { --mision-dur: 122s; animation-direction: reverse; } .mision-tira-e .mision-pista { --mision-dur: 94s; } /* ── La celda: cuadrada, con su hilo de rejilla, como en el original ── */ .mision-celda { position: relative; display: block; flex: 0 0 auto; width: var(--mision-celda); height: var(--mision-celda); background: var(--mision-crema); border-right: 1px solid var(--mision-linea); border-top: 1px solid var(--mision-linea); border-bottom: 1px solid var(--mision-linea); } .mision-celda img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: var(--mision-op); /* desaturadas y aclaradas: el mosaico es textura, no fotografía */ filter: grayscale(.55) sepia(.14) contrast(.94) brightness(1.02); animation: mision-respira 17s ease-in-out infinite; } /* Las fotos no laten todas a la vez: cada cuarta celda entra desfasada, así el banner nunca se ve "encendido" ni "apagado" completo. */ .mision-celda:nth-child(4n + 1) img { animation-delay: -0s; } .mision-celda:nth-child(4n + 2) img { animation-delay: -4.2s; } .mision-celda:nth-child(4n + 3) img { animation-delay: -8.5s; } .mision-celda:nth-child(4n + 4) img { animation-delay: -12.8s; } @keyframes mision-respira { 0%, 100% { opacity: calc(var(--mision-op) * .55); } 40%, 60% { opacity: var(--mision-op); } } /* ── El velo: garantiza que el título se lea SIEMPRE ── Papel opaco sobre la columna del texto que se abre hacia la derecha, más un corte arriba para que el mosaico no se pegue al header. */ .mision-velo { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(96deg, #fbfbfd 0, #fbfbfd 30%, rgba(251, 251, 253, .92) 44%, rgba(251, 251, 253, .55) 62%, rgba(251, 251, 253, .12) 80%, rgba(251, 251, 253, 0) 92%), linear-gradient(to bottom, #fbfbfd 0, rgba(251, 251, 253, 0) 16%); } /* El plano de rutas queda de capa intermedia y más discreto que antes: ahora el movimiento lo pone el mosaico. Sus dos bloques macizos se ocultan: con el mosaico detrás leían como una mancha, no como parte del plano. */ .mision-fondo { z-index: 1; opacity: .28; } .mision-fondo rect[fill] { display: none; } /* ── El título entra como el de HappyRobot: sube 16 px y aparece ── Allá es un solo bloque (.hero-enter, .6s cubic-bezier(.22,1,.36,1) both); aquí van escalonados el pill y el h1 porque son dos piezas, no una. */ .mision-hero > .wrap { position: relative; z-index: 3; } .mision-hero .kicker { animation: mision-entra .6s cubic-bezier(.22, 1, .36, 1) both; } .mision-hero h1 { animation: mision-entra .6s cubic-bezier(.22, 1, .36, 1) .09s both; } @keyframes mision-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ── Responsive: en móvil el título ocupa todo el ancho, así que el velo pasa a ser vertical y las fotos bajan de intensidad. ── */ @media (max-width: 900px) { .mision-hero { --mision-celda: 76px; --mision-hueco: 10px; --mision-op: .24; } /* El campo ocupa casi toda la sección: la máscara solo corta arriba y abajo. */ .mision-mosaico { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); } /* Aquí el título ocupa todo el ancho, así que el velo deja de ser lateral y se vuelve una banda opaca justo detrás de las dos líneas del h1 (≈40–76% de la sección); arriba y abajo el mosaico sí se ve. */ .mision-velo { background: linear-gradient(to bottom, #fbfbfd 0, #fbfbfd 8%, rgba(251, 251, 253, .55) 24%, rgba(251, 251, 253, .93) 40%, rgba(251, 251, 253, .93) 76%, rgba(251, 251, 253, .55) 90%, rgba(251, 251, 253, .45) 100%); } .mision-fondo { opacity: .22; } } @media (max-width: 520px) { .mision-hero { --mision-celda: 64px; --mision-hueco: 8px; } } /* ── Sin movimiento: se queda quieto y legible, nada parpadea ── */ @media (prefers-reduced-motion: reduce) { .mision-pista, .mision-celda img, .mision-hero .kicker, .mision-hero h1 { animation: none !important; } .mision-celda img { opacity: var(--mision-op); } } /* ── Brillo del botón principal ── Misma mecánica que el CTA del hero de usehandle.ai: un degradado más ancho que el botón que se recorre con background-position (no con transform, así no repinta el layout). Ellos lo hacen sobre verde lima; aquí el destello es una veta más clara sobre la tinta, que es lo que aguanta nuestra paleta. */ @keyframes gloss-recorre { 0% { background-position: 200% center; } 100% { background-position: -100% center; } } .btn-gloss { background-image: linear-gradient(100deg, var(--tinta) 0%, var(--tinta) 40%, #4a3b33 46%, #7d6a5e 50%, #4a3b33 54%, var(--tinta) 60%, var(--tinta) 100%); background-size: 220% 100%; background-repeat: no-repeat; animation: gloss-recorre 4.2s linear infinite; } .btn-gloss:hover { animation-duration: 2.4s; } @media (prefers-reduced-motion: reduce) { .btn-gloss { animation: none; background-image: none; } } /* ═══════════════════════════════════════════════════════════════════════════ PÁGINA DE CONTACTO (contacto.html) Estructura clonada de usehandle.ai/getdemo: la pantalla partida a la mitad, argumento de un lado y formulario del otro, con el paso 1 arriba del pliegue. Lo que cambia es la piel: donde ellos ponen un panel de tinta oscura nosotros ponemos la crema del sitio, y donde ellos cuelgan logos de clientes nosotros NO ponemos nada — Likida todavía no tiene clientes. El formulario reusa .demo-*, .campo y .cal-marco tal cual: aquí solo se define el contenedor. ═══════════════════════════════════════════════════════════════════════════ */ .contacto-split { display: grid; grid-template-columns: 1fr 1fr; /* La columna crema son DOS piezas (intro arriba, detalle abajo) para poder colar el formulario entre las dos al apilarse en móvil. En escritorio se ven como una sola columna continua. */ grid-template-areas: "intro forma"; align-items: stretch; border-bottom: 1px solid var(--linea); /* El footer no debe asomar sin scroll: en esta página es el final del embudo y competiría con el formulario. La barra es `absolute` y no ocupa alto, así que la ventana completa es la medida exacta. `dvh` y no `vh` porque en móvil la barra del navegador se encoge y `vh` dejaría un dedo de footer visible. */ min-height: 100vh; min-height: 100dvh; } .contacto-intro { grid-area: intro; } .contacto-detalle { grid-area: detalle; } .contacto-forma { grid-area: forma; } .contacto-intro, .contacto-detalle { background: #f2f1ee; border-right: 1px solid var(--linea); } .contacto-intro { padding: clamp(88px, 8vw, 132px) clamp(24px, 3.4vw, 60px) clamp(46px, 5vw, 84px); } .contacto-detalle { padding: clamp(30px, 3.4vw, 52px) clamp(24px, 3.4vw, 60px) clamp(46px, 5vw, 84px); } .contacto-forma { background: var(--blanco); padding: clamp(38px, 4.6vw, 76px) clamp(24px, 3.4vw, 60px) clamp(46px, 5vw, 84px); } /* Las dos piezas crema comparten medida para que el texto quede en un solo eje. */ .contacto-columna { max-width: 560px; margin: 0 auto; } .contacto-forma-inner { max-width: 480px; margin: 0 auto; /* El argumento es más largo que el formulario: el form acompaña el scroll en vez de dejar media pantalla en blanco. */ position: sticky; top: 92px; } .contacto-h1 { font-size: clamp(34px, 3.4vw, 52px); margin: 22px 0 0; } .contacto-sub { margin-top: 18px; max-width: 48ch; font-size: 17px; line-height: 1.65; color: var(--tinta-suave); } /* Ilustración de línea: el mismo lenguaje que los diagramas de la landing. El fondo del PNG ya es #f2f1ee, así que se funde con la columna sin caja. */ .contacto-figura { margin: clamp(26px, 3vw, 44px) 0 0; } .contacto-figura img { display: block; width: 100%; height: auto; } /* ── Lo que Handle resuelve con logos, aquí es información útil ── */ .contacto-bloques { display: grid; gap: 34px; } .contacto-bloque { border-top: 1px solid var(--linea); padding-top: 22px; } .contacto-bloque .kicker { display: block; margin-bottom: 16px; letter-spacing: .18em; } .contacto-minutos { list-style: none; display: grid; gap: 16px; } .contacto-minutos li { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: baseline; } .contacto-min { font: 600 12.5px var(--mono); letter-spacing: .04em; color: var(--tinta); padding-top: 2px; white-space: nowrap; } .contacto-minutos p { font-size: 15.5px; line-height: 1.62; color: var(--tinta-suave); } .contacto-lista { list-style: none; display: grid; gap: 14px; } .contacto-lista li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.62; color: var(--tinta-suave); } .contacto-lista li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--tinta); } .contacto-lista strong { color: var(--tinta); font-weight: 600; } .contacto-honesto { margin-top: 34px; border-top: 1px solid var(--linea); padding-top: 22px; font-size: 14.5px; line-height: 1.65; color: var(--gris); max-width: 56ch; } .contacto-privacidad { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--gris); } .contacto-privacidad a { text-decoration: underline; text-underline-offset: 2px; } /* ── Apilado: intro, formulario, y hasta abajo el detalle ── */ @media (max-width: 1080px) { .contacto-split { grid-template-columns: 1fr; grid-template-areas: "intro" "forma" "detalle"; } .contacto-intro, .contacto-detalle { border-right: none; } .contacto-intro { padding-bottom: clamp(30px, 5vw, 48px); } .contacto-forma { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .contacto-forma-inner { position: static; } .contacto-columna, .contacto-forma-inner { max-width: 620px; } } @media (max-width: 560px) { .contacto-minutos li { grid-template-columns: 54px 1fr; gap: 12px; } .contacto-h1 { font-size: clamp(30px, 8.2vw, 40px); } } /* ── Al expandirse el encabezado, la palabra se retira y queda el ícono ── Igual que usehandle.ai: arriba se lee la marca completa; al scrollear, la píldora se vuelve barra y basta el glifo. El ancho se anima (no solo la opacidad) para que el nav no dé un salto cuando la palabra desaparece. 726×149 del logo a 22px de alto ≈ 107px; el glifo es cuadrado ≈ 22px. */ .logo { position: relative; display: flex; align-items: center; height: 22px; width: 107px; overflow: hidden; transition: width .45s cubic-bezier(.22,1,.36,1); } .logo img { height: 22px; width: auto; display: block; } .logo .logo-completo { transition: opacity .3s ease; } .logo .logo-glifo { position: absolute; left: 0; top: 0; opacity: 0; transform: scale(.86); transform-origin: left center; transition: opacity .3s ease .06s, transform .45s cubic-bezier(.34,1.56,.64,1) .06s; } .header.expandido .logo { width: 32px; height: 32px; } .header.expandido .logo .logo-glifo { height: 32px; } .header.expandido .logo .logo-completo { opacity: 0; transition-duration: .18s; } .header.expandido .logo .logo-glifo { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .logo, .logo img { transition: none !important; } } /* ── getdemo: barra mínima (volver + idioma), como la de usehandle.ai/getdemo ── */ .gd-barra { /* Flota ENCIMA de los paneles, sin ocupar alto: los dos paneles arrancan en y=0 y el botón se recuesta sobre la crema, igual que en usehandle.ai. */ position: absolute; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 3vw, 40px); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; } .gd-barra > * { pointer-events: auto; } body:has(.gd-barra) { position: relative; } .gd-volver { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px var(--sans); color: var(--tinta-suave); padding: 9px 18px 9px 14px; border: 1px solid var(--linea); border-radius: 999px; background: color-mix(in srgb, #ffffff 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1); } .gd-volver:hover { border-color: #cfcdc6; color: var(--tinta); transform: translateX(-2px); } .gd-flecha { font-size: 17px; line-height: 1; transition: transform .3s cubic-bezier(.22,1,.36,1); } .gd-volver:hover .gd-flecha { transform: translateX(-3px); } @media (prefers-reduced-motion: reduce) { .gd-volver, .gd-flecha { transition: none; } }