/* ========================================================================== ACV21 · motion.css — capa de movimiento con física de muelle -------------------------------------------------------------------------- Inspirada en Kinetics (kinetics.colorion.co): en vez de easings lineales de duración fija, cada transición tiene "peso": sale rápido y se asienta con un ligero rebote (spring) o con una cola larga (glide). Reglas de la casa: · Todo lo que mueve va bajo `html.k-js` (la clase la pone un script en el ). Sin JS la página se ve exactamente igual que antes, estática. · `prefers-reduced-motion: reduce` desactiva todas las animaciones. · Solo se animan transform y opacity (compositor), nunca layout, salvo el acordeón (height), que se anima con WAAPI y overflow hidden. ========================================================================== */ :root { --k-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote: llega, se pasa, vuelve */ --k-soft: cubic-bezier(0.18, 1.25, 0.4, 1); /* rebote suave */ --k-glide: cubic-bezier(0.16, 1, 0.3, 1); /* sale rápido, se asienta largo */ --k-swift: cubic-bezier(0.65, 0, 0.35, 1); /* simétrico, para desplazar píldoras */ --k-blue: #0F77AE; --k-blue-light: #E8F1F8; --k-yellow: #FBB81F; /* ---- Escala fluida (método de utopia.fyi) --------------------------- En vez de saltar de tamaño en cada corte de Tailwind, se interpola entre el valor de móvil (360 px) y el de escritorio (1440 px). El segundo término de cada clamp() es la recta que une los dos extremos. */ --paso-0: clamp(0.94rem, 0.90rem + 0.17vw, 1.05rem); /* texto normal */ --paso-1: clamp(1.13rem, 1.05rem + 0.32vw, 1.33rem); --paso-2: clamp(1.35rem, 1.22rem + 0.55vw, 1.69rem); --paso-3: clamp(1.25rem, 1.13rem + 0.56vw, 1.5rem); /* h3: 20 → 24 px */ --paso-4: clamp(1.625rem, 1.42rem + 0.93vw, 2.25rem); /* h2: 26 → 36 px */ --paso-5: clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem); /* h1: 36 → 60 px */ --hueco-s: clamp(0.75rem, 0.66rem + 0.37vw, 1rem); --hueco-m: clamp(1.5rem, 1.32rem + 0.74vw, 2rem); --hueco-l: clamp(3rem, 2.17rem + 3.70vw, 5rem); /* aire de sección */ /* ---- Radios, sombras y curvas (idea de open-props, sin la librería) -- */ --radio-s: 0.5rem; --radio-m: 0.75rem; --radio-l: 1rem; --radio-xl: 1.25rem; --radio-redondo: 9999px; --sombra-1: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.08); --sombra-2: 0 4px 12px rgba(15, 119, 174, 0.10), 0 2px 4px rgba(26, 26, 26, 0.05); --sombra-3: 0 12px 28px -8px rgba(15, 119, 174, 0.22), 0 4px 10px rgba(26, 26, 26, 0.06); --foco: 0 0 0 2px #fff, 0 0 0 5px rgba(15, 119, 174, 0.55); } html.k-js { scroll-behavior: smooth; } /* ---- 1. Entrada escalonada (stagger entrance) ---------------------------- */ /* El JS oculta con esta clase y revela con WAAPI (opacity + translateY). Si motion.js no llega a cargar, a los 2,5 s todo se muestra igualmente. */ html.k-js .k-reveal { opacity: 0; } html.k-js:not(.k-motion) .k-reveal { animation: k-safety 0.01s linear 2.5s forwards; } @keyframes k-safety { to { opacity: 1; } } /* ---- 2. Titular del hero: cada línea sube desde su propia máscara -------- */ html.k-js .k-line { display: inline-block; clip-path: inset(-0.15em 0 -0.3em 0); } html.k-js .k-line > span { display: inline-block; transform: translateY(110%); animation: k-line-up 0.95s var(--k-glide) forwards; animation-delay: var(--k-d, 0ms); } @keyframes k-line-up { to { transform: translateY(0); } } /* ---- 3. Botones: squish al pulsar + ripple + foco visible ---------------- */ html.k-js .k-btn { overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: transform 0.28s var(--k-spring), box-shadow 0.2s var(--k-glide), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } html.k-js .k-btn:active { transform: scale(0.96); transition-duration: 0.08s; transition-timing-function: ease-out; } html.k-js .k-btn:focus-visible { outline: none; box-shadow: var(--foco); } html.k-js .k-ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: 0.22; transform: scale(0); pointer-events: none; animation: k-ripple 0.65s ease-out forwards; } @keyframes k-ripple { to { transform: scale(2.6); opacity: 0; } } /* El hover del CTA principal sube 2 px: con el muelle el gesto se nota. Solo con ratón: en táctil el navegador simula el hover al pulsar y el estado se queda pegado después de soltar. */ @media (hover: hover) and (pointer: fine) { html.k-js .cta-primary:hover, html.k-js .cta-secondary:hover { transform: translateY(-2px); } } html.k-js .cta-primary:active, html.k-js .cta-secondary:active { transform: translateY(0) scale(0.97); } /* ---- 4. Tarjetas: elevación con muelle e icono que salta ----------------- */ html.k-js .k-lift { transition: transform 0.28s var(--k-spring), box-shadow 0.25s var(--k-glide), border-color 0.2s ease, background-color 0.2s ease; } html.k-js .k-icon { transition: transform 0.28s var(--k-spring); transform-origin: 50% 70%; } @media (hover: hover) and (pointer: fine) { html.k-js .k-lift:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); } html.k-js .k-lift:hover .k-icon { transform: scale(1.18) rotate(-6deg); } } /* ---- 5. Píldora que se desliza entre pestañas (tab pill glide) ----------- */ html.k-js .k-tabs { position: relative; } html.k-js .k-tabs > * { position: relative; z-index: 1; } html.k-js .k-tab-pill { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; box-sizing: border-box; border-radius: 9999px; background: var(--k-blue-light); border: 2px solid var(--k-blue); opacity: 0; pointer-events: none; transition: left 0.45s var(--k-swift), top 0.45s var(--k-swift), width 0.45s var(--k-swift), height 0.45s var(--k-swift), opacity 0.2s ease; } html.k-js .k-tab-pill.is-ready { opacity: 1; } html.k-js .k-tab-pill.no-anim { transition: none; } html.k-js .k-tabs[data-pill="solid"] .k-tab-pill { background: var(--k-blue); border-color: var(--k-blue); } html.k-js .k-tabs[data-pill="nav"] .k-tab-pill { background: var(--k-blue-light); border: 0; border-radius: 0.5rem; } html.k-js .k-tabs[data-pill="nav"] > a.is-active, html.k-js .k-tabs[data-pill="nav"] > .is-active > button { color: var(--k-blue) !important; } /* La pestaña activa cede su fondo y su borde a la píldora, que es la que se mueve. */ html.k-js .k-tabs .tab-btn.active, html.k-js .k-tabs .calc-cliente-pill[aria-pressed="true"], html.k-js .k-tabs .cat-filter.active { background-color: transparent !important; border-color: transparent !important; } html.k-js .k-tabs .cat-filter.active { color: white !important; } html.k-js .k-tabs .tab-btn { transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.5s var(--k-spring); } /* ---- 6. Acordeones: chevrón con muelle, contenido que entra --------------- */ html.k-js details .faq-icon, html.k-js details summary svg.transition-transform, html.k-js details .mr-chevron { transition: transform 0.55s var(--k-spring) !important; } html.k-js details.k-animating { overflow: hidden; } html.k-js details.k-closing .faq-icon, html.k-js details.k-closing summary svg, html.k-js details.k-closing .mr-chevron { transform: none !important; } html.k-js details summary { transition: background-color 0.2s ease, color 0.2s ease; } /* ---- 7. Contadores (odómetro) y saltos de cifra ---------------------------- */ html.k-js [data-count], html.k-js [data-bump] { font-variant-numeric: tabular-nums; display: inline-block; transition: transform 0.45s var(--k-spring); } html.k-js .k-bump { transform: scale(1.18) translateY(-3px); } /* ---- 8. Estados del botón de envío: puntos → check dibujado --------------- */ html.k-js .k-dots { display: inline-flex; gap: 5px; align-items: center; margin-right: 8px; } html.k-js .k-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: k-dot 0.9s var(--k-glide) infinite; } html.k-js .k-dots i:nth-child(2) { animation-delay: 0.12s; } html.k-js .k-dots i:nth-child(3) { animation-delay: 0.24s; } @keyframes k-dot { 0%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-5px); opacity: 1; } } html.k-js .k-check-sm { width: 18px; height: 18px; margin-right: 6px; } html.k-js .k-check-sm path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: k-draw 0.45s var(--k-glide) 0.1s forwards; } html.k-js .k-btn.is-loading { pointer-events: none; opacity: 0.92; } html.k-js .k-btn.is-success { background-color: #2E7D32 !important; border-color: #2E7D32 !important; color: white !important; } /* Check grande de la pantalla de éxito: el anillo y el tick se dibujan. */ .k-check { display: block; width: 100%; height: 100%; } .k-check circle { fill: none; stroke: currentColor; stroke-width: 3; transform: rotate(-90deg); transform-origin: 50% 50%; } .k-check path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } html.k-js .k-check circle { stroke-dasharray: 220; stroke-dashoffset: 220; } html.k-js .k-check path { stroke-dasharray: 60; stroke-dashoffset: 60; } html.k-js .k-pop:not(.hidden) .k-check circle, html.k-js .k-check.is-on circle { animation: k-draw 0.7s var(--k-glide) 0.15s forwards; } html.k-js .k-pop:not(.hidden) .k-check path, html.k-js .k-check.is-on path { animation: k-draw 0.45s var(--k-glide) 0.6s forwards; } @keyframes k-draw { to { stroke-dashoffset: 0; } } /* ---- 9. Avisos, toasts y banner de cookies: entran con rebote ------------- */ html.k-js .k-pop:not(.hidden) { animation: k-pop-in 0.55s var(--k-spring) both; } @keyframes k-pop-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } html.k-js .k-notif:not(.hidden) { animation: k-notif-in 0.7s var(--k-spring) both; } @keyframes k-notif-in { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } } html.k-js .k-shake { animation: k-shake 0.5s var(--k-swift); } @keyframes k-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } /* ---- 10. Cabecera: barra de progreso de lectura y sombra al hacer scroll -- */ html.k-js header.k-header { transition: box-shadow 0.4s var(--k-glide); } html.k-js header.k-header.is-scrolled { box-shadow: 0 8px 28px -14px rgba(15, 119, 174, 0.35); } html.k-js .k-progress { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--k-blue), #3A9AD0 70%, var(--k-yellow)); transform-origin: left center; transform: scaleX(var(--k-p, 0)); transition: transform 0.12s linear; pointer-events: none; z-index: 2; } /* Desplegable de escritorio: baja con cola larga en vez de aparecer de golpe. */ html.k-js header [role="menu"] { transition-timing-function: var(--k-glide) !important; transition-duration: 0.35s !important; } @media (hover: hover) and (pointer: fine) { html.k-js header .group:hover svg.transition-transform { transition-timing-function: var(--k-spring); transition-duration: 0.3s; } } html.k-js header .group:focus-within svg.transition-transform { transition-timing-function: var(--k-spring); transition-duration: 0.3s; } /* ---- 11. Menú móvil: hamburguesa que se convierte en aspa ---------------- */ html.k-js .k-burger line { transform-box: fill-box; transform-origin: center; transition: transform 0.5s var(--k-spring), opacity 0.2s ease; } html.k-js .k-burger[aria-expanded="true"] line:nth-child(1) { transform: translateY(6px) rotate(45deg); } html.k-js .k-burger[aria-expanded="true"] line:nth-child(2) { opacity: 0; transform: scaleX(0); } html.k-js .k-burger[aria-expanded="true"] line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } html.k-js .k-collapsing { overflow: hidden; } /* ---- 12. Formularios: foco que "se enciende", casillas que saltan --------- */ html.k-js input:not([type="checkbox"]):not([type="radio"]), html.k-js select, html.k-js textarea { transition: border-color 0.2s ease, box-shadow 0.4s var(--k-glide), background-color 0.2s ease; } html.k-js input:not([type="checkbox"]):not([type="radio"]):focus, html.k-js select:focus, html.k-js textarea:focus { box-shadow: 0 0 0 4px rgba(15, 119, 174, 0.14); } html.k-js input[type="checkbox"], html.k-js input[type="radio"] { transition: transform 0.35s var(--k-spring); } html.k-js input[type="checkbox"]:active, html.k-js input[type="radio"]:active { transform: scale(0.85); } html.k-js input[type="checkbox"]:checked { animation: k-tick 0.4s var(--k-spring); } @keyframes k-tick { 0% { transform: scale(0.8); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } /* ---- 13. Barras de progreso elásticas (cuestionario) ---------------------- */ html.k-js .k-bar { position: relative; overflow: hidden; background: #e5e7eb; } html.k-js .k-bar > i { position: absolute; inset: 0; background: var(--k-blue); transform-origin: left center; transform: scaleX(0); transition: transform 0.6s var(--k-spring); } html.k-js .k-bar.is-done > i { transform: scaleX(1); } html.k-js .k-bar.is-current > i { transform: scaleX(1); opacity: 0.55; } /* ---- 14. WhatsApp flotante: entra con rebote y late en anillos ------------ */ html.k-js a.fixed[aria-label="WhatsApp"] { animation: k-pop-in 0.7s var(--k-spring) 0.9s both; transition: transform 0.5s var(--k-spring), background-color 0.2s ease; } @media (hover: hover) and (pointer: fine) { html.k-js a.fixed[aria-label="WhatsApp"]:hover { transform: scale(1.1); } } html.k-js a.fixed[aria-label="WhatsApp"]:active { transform: scale(0.95); } html.k-js a.fixed[aria-label="WhatsApp"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: k-ring 2.6s var(--k-glide) 1.6s 3; pointer-events: none; } @keyframes k-ring { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.7); opacity: 0; } } /* ---- 15. Barra fija de móvil (landings) y carrusel ------------------------ */ html.k-js #lp-sticky { transition: transform 0.55s var(--k-spring) !important; } html.k-js #testimonios-dots button { transition: width 0.45s var(--k-spring), background-color 0.25s ease; } /* ---- 16. Decoración de fondo: los halos flotan despacio ------------------- */ /* Solo se desplazan: escalar un rectángulo con blur produce bandas de color. El bucle se pausa cuando la sección sale de pantalla (lo marca motion.js), para no gastar GPU animando algo que nadie está viendo. */ html.k-js section > .blur-3xl { animation: k-float 11s ease-in-out infinite alternate; } html.k-js .k-pausado > .blur-3xl { animation-play-state: paused; } @keyframes k-float { to { transform: translate(14px, 20px); } } /* ---- Accesibilidad: sin movimiento si el sistema lo pide ------------------ */ @media (prefers-reduced-motion: reduce) { html.k-js { scroll-behavior: auto; } html.k-js .k-reveal { opacity: 1; animation: none; } html.k-js .k-line { clip-path: none; } html.k-js .k-line > span { transform: none; animation: none; } html.k-js *, html.k-js *::before, html.k-js *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } html.k-js .k-tab-pill { transition: none; } html.k-js .k-lift:hover, html.k-js .cta-primary:hover, html.k-js .cta-secondary:hover { transform: none; } html.k-js .k-check circle, html.k-js .k-check path, html.k-js .k-check-sm path { stroke-dashoffset: 0; } } @media print { html.k-js .k-reveal { opacity: 1 !important; } html.k-js .k-line > span { transform: none !important; } } /* ========================================================================== Detalles de interfaz · Web Interface Guidelines (interfaces.rauno.me) ========================================================================== */ /* Legibilidad del texto: suavizado y ligaduras. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Selección del documento con el azul de la marca. */ ::selection { background: rgba(15, 119, 174, 0.22); color: #1A1A1A; } /* Los controles no se seleccionan al arrastrar sobre ellos. */ a, button, summary, [role="button"], label { -webkit-user-select: none; user-select: none; } /* Salvo lo que uno querría copiar: enlaces dentro de texto corrido, teléfonos y correos. */ p a, td a, a[href^="tel:"], a[href^="mailto:"] { -webkit-user-select: auto; user-select: auto; } /* iOS amplía la página al enfocar un campo de menos de 16 px. El :not() es para ganarle en especificidad a las clases de tamaño de Tailwind. */ @media (max-width: 767px) { input:not([type="checkbox"]):not([type="radio"]), select:not([multiple]), textarea:not([hidden]) { font-size: 16px; } } /* Cifras de ancho fijo: las tablas de tarifas y los contadores no bailan. */ table, .tabular, [data-count], [data-bump], #calc-puntos { font-variant-numeric: tabular-nums; } /* ---- Tipografía y aire fluidos ------------------------------------------ Antes los titulares y el alto de las secciones saltaban de golpe en 640, 768 y 1024 px. Ahora crecen con la ventana, sin escalones. */ :root .section-title { font-size: var(--paso-4); line-height: 1.12; } :root section h1 { font-size: var(--paso-5); line-height: 1.05; } /* El aire vertical de las secciones que van «py-12 md:py-20». */ section[class*="py-12"][class*="py-20"] { padding-block: var(--hueco-l); } section[class*="py-16"][class*="py-24"] { padding-block: calc(var(--hueco-l) * 1.2); } /* Zona de toque de los puntos del carrusel: 8 px se ven, 24 px se tocan. */ #testimonios-dots button { position: relative; } #testimonios-dots button::after { content: ""; position: absolute; inset: -8px -4px; } /* Campo con error: se queda marcado hasta que se corrige. */ html.k-js .k-invalid, html.k-js [aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }