/* ========================================================================== Portada del congreso — rediseño 2026. Evolución propia sobre la paleta y los materiales del cartel oficial: mismos colores, mismas fotografías y logotipos; composición inmersiva (héroe a pantalla completa, secciones editoriales, banda de convocatoria). PALETA — es la del entregable de la diseñadora, no inventar variantes: verde cartel #8cc63f teal #1c5d6e cta #2a8a99 azul hondo #163f52 tinta #152a36 neutro #f7f7f7 TIPOGRAFÍAS — auto-alojadas (public/assets/fonts): Jost para display y botones, Nunito para texto. NO enlazar fonts.googleapis.com (la red del INSP no tiene salida a Internet y la hoja externa es render-blocking). ANIMACIONES — la entrada del héroe es CSS puro al cargar. Las apariciones al desplazar las gobierna public/landing/js/landing.js con IntersectionObserver: los elementos [data-reveal] SOLO se ocultan cuando lleva la clase .lp-js (la pone el script); sin JavaScript todo es visible. Todo movimiento va dentro de prefers-reduced-motion: no-preference. ========================================================================== */ :root { --lp-verde: #8cc63f; --lp-teal: #1c5d6e; --lp-cta: #2a8a99; --lp-azul-hondo: #163f52; --lp-tinta: #152a36; --lp-neutro: #f7f7f7; --lp-degradado: linear-gradient(102deg, var(--lp-verde) 0%, #3c8560 40%, var(--lp-teal) 74%, var(--lp-azul-hondo) 100%); --lp-font-display: 'Jost', 'Avant Garde', system-ui, sans-serif; --lp-font-texto: 'Nunito', system-ui, sans-serif; --lp-radio: 18px; --lp-ease: cubic-bezier(.22, .61, .36, 1); --lp-ancho: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Que los anclajes no queden debajo de la barra fija. */ scroll-padding-top: 100px; } body { margin: 0; background: #fff; color: var(--lp-tinta); font-family: var(--lp-font-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } a { color: var(--lp-cta); text-decoration: none; } a:focus-visible, button:focus-visible { outline: 3px solid var(--lp-cta); outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; } /* Sólo para lectores de pantalla. */ .lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Botones -------------------------------------------------------------------------- */ .lp-btn { display: inline-block; font-family: var(--lp-font-display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1; padding: 15px 30px; border-radius: 999px; white-space: nowrap; } /* Texto oscuro sobre verde: contraste AA (blanco sobre #8cc63f no llega). */ .lp-btn--primario { background: var(--lp-verde); color: #10333f; box-shadow: 0 8px 24px rgba(140, 198, 63, .35); } .lp-btn--cristal { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(6px); } .lp-btn--xl { font-size: 16px; padding: 18px 38px; } .lp-btn--nav { font-size: 13px; padding: 12px 22px; box-shadow: 0 4px 14px rgba(140, 198, 63, .30); } .lp-btn--bloque { display: block; width: 100%; } /* -------------------------------------------------------------------------- Barra de navegación fija -------------------------------------------------------------------------- */ .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(22, 63, 82, .08); } .lp-nav.is-scrolled { box-shadow: 0 8px 30px rgba(22, 63, 82, .12); } .lp-nav__inner { max-width: var(--lp-ancho); margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; gap: 26px; } .lp-nav__marca img { display: block; height: 62px; width: auto; } .lp-nav__links { display: flex; gap: 26px; margin-left: auto; } .lp-nav__links a { position: relative; font-family: var(--lp-font-display); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--lp-tinta); padding: 6px 0; } /* Subrayado que se desliza al pasar el cursor. */ .lp-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--lp-verde); } .lp-nav__acciones { display: flex; align-items: center; gap: 18px; } .lp-nav__acceso { font-family: var(--lp-font-display); font-weight: 600; font-size: 14px; color: var(--lp-teal); } /* -------------------------------------------------------------------------- Héroe -------------------------------------------------------------------------- */ .lp-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--lp-azul-hondo); padding: 140px 22px 90px; } .lp-hero__fondo { position: absolute; inset: 0; } .lp-hero__foto { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } /* Velo profundo: azul de marca con acento teal y un resplandor verde bajo, para que el blanco del texto y el verde de los botones respiren. */ .lp-hero__velo { position: absolute; inset: 0; background: /* Sombra del lado en que se monta el logotipo: la luz de la escena cae hacia la derecha y la marca en negativo se recorta con holgura. */ linear-gradient(100deg, rgba(8, 28, 38, .55) 0%, rgba(8, 28, 38, .28) 34%, rgba(8, 28, 38, 0) 62%), radial-gradient(ellipse 60% 50% at 12% 100%, rgba(140, 198, 63, .28), transparent 65%), linear-gradient(165deg, rgba(22, 63, 82, .93) 0%, rgba(28, 93, 110, .82) 52%, rgba(21, 42, 54, .94) 100%); } .lp-hero__contenido { position: relative; z-index: 1; max-width: var(--lp-ancho); margin: 0 auto; width: 100%; color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); /* Las dos columnas arrancan a la misma altura: el borde superior del logotipo queda al nivel de la primera línea del título. */ align-items: start; gap: clamp(32px, 4vw, 60px); } /* El logotipo en negativo se apoya directo en la fotografía: sin fondo, sin placa y sin cristal. Lo único que lo sostiene es el propio velo del héroe (ver .lp-hero__velo), más oscuro del lado en que se monta la marca. */ .lp-hero__marca { position: relative; /* Compensa la media interlínea del título para alinear por el trazo. */ margin-top: .06em; } .lp-hero__logo { display: block; width: 100%; height: auto; } .lp-hero__texto { min-width: 0; } .lp-hero__titulo { margin: 0; max-width: 17ch; font-family: var(--lp-font-display); font-weight: 600; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; } .lp-hero__subtitulo { margin: 22px 0 0; max-width: 44ch; font-size: clamp(17px, 1.9vw, 23px); font-weight: 400; font-style: italic; line-height: 1.45; color: #cfe8d9; } /* Cruza las dos columnas y se centra: los botones y el plazo cierran la portada como un solo bloque, no como pie de la columna de texto. */ .lp-hero__accion { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; margin-top: clamp(34px, 4.4vw, 58px); } .lp-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .lp-hero__plazo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; width: 100%; max-width: 720px; margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); } .lp-hero__plazo-texto { margin: 0; font-size: clamp(15px, 1.6vw, 18px); color: #dcebe4; } .lp-hero__plazo-texto b { color: #fff; font-weight: 800; } /* Contador regresivo: lo enciende landing.js; sin JS queda oculto (hidden). */ .lp-cd { display: flex; gap: 12px; } .lp-cd__celda { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 10px 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); } .lp-cd__celda b { font-family: var(--lp-font-display); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } .lp-cd__celda small { margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #bcd9cc; } /* Guía de desplazamiento: línea vertical que respira al pie del héroe. */ .lp-hero__guia { position: absolute; left: 50%; bottom: 26px; width: 2px; height: 44px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75)); border-radius: 2px; } /* -------------------------------------------------------------------------- Secciones -------------------------------------------------------------------------- */ .lp-seccion { padding: clamp(70px, 9vw, 120px) 22px; } .lp-seccion__inner { max-width: var(--lp-ancho); margin: 0 auto; } .lp-seccion__cabecera { margin-bottom: clamp(34px, 4vw, 54px); } .lp-kicker { margin: 0 0 14px; font-family: var(--lp-font-display); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--lp-cta); } .lp-kicker::before { content: ""; display: inline-block; vertical-align: 2px; width: 26px; height: 2px; margin-right: 10px; background: var(--lp-verde); } .lp-kicker--claro { color: #bfe08a; } .lp-titulo2 { margin: 0 0 20px; font-family: var(--lp-font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.01em; color: var(--lp-azul-hondo); text-wrap: balance; } .lp-titulo2--claro { color: #fff; } .lp-parrafo { margin: 0 0 14px; max-width: 46ch; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: #3c525e; } .lp-parrafo--claro { color: #d6e6dd; } .lp-enlace { display: inline-block; margin-top: 10px; font-family: var(--lp-font-display); font-weight: 700; font-size: 16px; color: var(--lp-teal); border-bottom: 2px solid var(--lp-verde); padding-bottom: 3px; } /* -------------------------------------------------------------------------- El congreso: texto editorial + composición de fotografías -------------------------------------------------------------------------- */ /* Marca de agua "21" del cartel, como textura sutil del fondo claro. */ .lp-congreso { background-color: var(--lp-neutro); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='320'%3E%3Ctext x='12' y='155' font-family='Arial,sans-serif' font-size='200' font-weight='800' fill='%23ffffff'%3E2I%3C/text%3E%3Ctext x='247' y='315' font-family='Arial,sans-serif' font-size='200' font-weight='800' fill='%23ffffff'%3E2I%3C/text%3E%3C/svg%3E"); } .lp-congreso .lp-seccion__inner { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: clamp(36px, 5vw, 70px); align-items: center; } .lp-congreso__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .lp-foto { position: relative; margin: 0; border-radius: var(--lp-radio); overflow: hidden; box-shadow: 0 18px 40px rgba(22, 63, 82, .18); } .lp-foto--ancha { grid-column: 1 / -1; } .lp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; } .lp-foto--ancha img { aspect-ratio: 3 / 1; } /* Pie de foto sobre un degradado de tinta, siempre legible. */ .lp-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 18px 14px; font-family: var(--lp-font-display); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(to top, rgba(21, 42, 54, .82), rgba(21, 42, 54, 0)); } /* -------------------------------------------------------------------------- Programa — de momento un aviso "Próximamente" (la rejilla de agenda por día vive en el historial de git, junto con su marcado en landing.blade.php) -------------------------------------------------------------------------- */ .lp-programa { background: #fff; } .lp-programa__proximamente { border: 1.5px dashed rgba(28, 93, 110, .35); border-radius: var(--lp-radio); padding: clamp(48px, 6vw, 80px) 26px; text-align: center; background: radial-gradient(ellipse 50% 90% at 50% 110%, rgba(140, 198, 63, .10), transparent 70%), #fdfdfd; } .lp-programa__aviso { margin: 0; font-family: var(--lp-font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .04em; text-transform: uppercase; background: var(--lp-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-programa__nota { margin: 12px 0 0; font-size: clamp(15px, 1.6vw, 17px); color: #51656f; } /* -------------------------------------------------------------------------- Convocatoria: banda inmersiva con línea de tiempo y tarjeta de cierre -------------------------------------------------------------------------- */ .lp-convocatoria { position: relative; background: var(--lp-degradado); overflow: hidden; } /* Resplandores suaves para dar profundidad a la banda. */ .lp-convocatoria::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 60% at 88% 10%, rgba(255, 255, 255, .12), transparent 70%), radial-gradient(ellipse 50% 70% at 5% 95%, rgba(21, 42, 54, .35), transparent 70%); pointer-events: none; } .lp-convocatoria__grid { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 90px); align-items: center; } /* Línea de tiempo vertical. */ .lp-linea { list-style: none; margin: 34px 0 0; padding: 0; position: relative; } .lp-linea::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: rgba(255, 255, 255, .30); } .lp-linea__paso { position: relative; padding: 0 0 26px 44px; color: #dcebe4; } .lp-linea__paso:last-child { padding-bottom: 0; } .lp-linea__nodo { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .75); } .lp-linea__paso--activo .lp-linea__nodo { background: var(--lp-verde); border-color: #fff; box-shadow: 0 0 0 6px rgba(140, 198, 63, .30); } .lp-linea__paso b { display: block; font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(16px, 1.8vw, 20px); color: #fff; } .lp-linea__paso span:not(.lp-linea__nodo) { font-size: clamp(14px, 1.5vw, 16px); } /* Enlace a la convocatoria completa (/convocatoria), bajo la línea de tiempo. */ .lp-convocatoria__completa { margin-top: 34px; } /* Tarjeta de cierre. */ .lp-cierre { background: #fff; border-radius: 24px; padding: clamp(28px, 3vw, 40px); text-align: center; box-shadow: 0 30px 70px rgba(21, 42, 54, .35); } .lp-cierre__etiqueta { margin: 0 0 10px; font-family: var(--lp-font-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-cta); } .lp-cierre__fecha { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 22px; color: var(--lp-azul-hondo); font-family: var(--lp-font-display); } .lp-cierre__dia { font-size: clamp(64px, 7vw, 92px); font-weight: 700; line-height: .9; } .lp-cierre__mesanio { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .lp-cierre__mesanio b { font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: .08em; } .lp-cierre__mesanio span { font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); color: var(--lp-cta); } .lp-cierre__contacto { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; font-size: 14px; color: #51656f; } .lp-cierre__contacto a { font-weight: 700; } /* -------------------------------------------------------------------------- Pie institucional -------------------------------------------------------------------------- */ .lp-pie { background: var(--lp-neutro); padding: clamp(50px, 6vw, 80px) 22px 30px; border-top: 1px solid rgba(22, 63, 82, .08); } .lp-pie__grid { display: grid; grid-template-columns: minmax(260px, 1.4fr) 1fr 1fr; gap: 36px; align-items: start; } .lp-pie__logo { display: block; height: 96px; width: auto; margin-bottom: 16px; } .lp-pie__congreso p { margin: 0; max-width: 40ch; font-size: 13.5px; line-height: 1.55; color: #51656f; } .lp-pie__encabezado { margin: 0 0 12px; font-family: var(--lp-font-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-azul-hondo); } .lp-pie__contacto a, .lp-pie__acceso a { display: block; font-size: 14.5px; font-weight: 700; color: var(--lp-teal); margin-bottom: 8px; } .lp-pie__contacto p { margin: 0; font-size: 14px; color: #51656f; } /* Jerarquía institucional: el INSP grande arriba; debajo, en chico, la leyenda de colaboración con la FIESP. */ .lp-pie__instituciones { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(22, 63, 82, .10); } .lp-pie__insp { height: 82px; width: auto; } .lp-pie__colab { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; } /* El SVG de la FIESP trae aire dentro del viewBox: aun así debe quedar claramente menor que el del INSP. */ .lp-pie__fiesp { height: 40px; width: auto; } .lp-pie__colab p { margin: 0; font-size: 13.5px; color: #3a3a3a; } .lp-pie__legal { margin: 26px 0 0; text-align: center; font-size: 12.5px; color: #7a8a92; } /* -------------------------------------------------------------------------- Móvil / tableta -------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* El logotipo pasa arriba del texto y deja de competir por el ancho. */ .lp-hero__contenido { grid-template-columns: 1fr; gap: clamp(44px, 6vw, 60px); } .lp-hero__marca { max-width: 560px; } .lp-hero__titulo { max-width: 21ch; } /* En una sola columna el bloque de acción vuelve a alinearse a la izquierda, con el resto de la portada. */ .lp-hero__accion { align-items: stretch; margin-top: clamp(30px, 4.5vw, 42px); } .lp-hero__ctas, .lp-hero__plazo { justify-content: flex-start; } .lp-hero__plazo { max-width: none; } .lp-congreso .lp-seccion__inner, .lp-convocatoria__grid { grid-template-columns: 1fr; } .lp-pie__grid { grid-template-columns: 1fr 1fr; } .lp-pie__congreso { grid-column: 1 / -1; } } @media (max-width: 760px) { html { scroll-padding-top: 70px; } .lp-nav__links { display: none; } /* En móvil el botón de la barra es "Iniciar sesión"; el CTA de subir resumen ya domina el héroe y la banda de convocatoria. */ .lp-btn--nav { display: none; } .lp-nav__acceso { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 11px 20px; border: 1.5px solid var(--lp-teal); border-radius: 999px; line-height: 1; } .lp-nav__inner { padding: 8px 16px; } .lp-nav__marca img { height: 48px; } .lp-nav__acciones { margin-left: auto; } .lp-hero { padding: 120px 18px 80px; text-align: left; } .lp-hero__marca { max-width: none; } .lp-hero__ctas .lp-btn { flex: 1 1 100%; } .lp-cd__celda { min-width: 64px; } .lp-seccion { padding: 60px 18px; } .lp-congreso__fotos { grid-template-columns: 1fr; } .lp-foto img, .lp-foto--ancha img { aspect-ratio: 16 / 10; } .lp-pie__grid { grid-template-columns: 1fr; gap: 28px; } } /* -------------------------------------------------------------------------- Animaciones — todas dentro de no-preference; quien pida menos movimiento ve la portada quieta y completa. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* --- Entrada del héroe al cargar, escalonada --- */ @keyframes lp-sube { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* Acercamiento lento y único de la fotografía (efecto Ken Burns). */ @keyframes lp-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes lp-respira { 0%, 100% { transform: none; opacity: .9; } 50% { transform: translateY(10px); opacity: .4; } } /* La placa del logotipo entra enfocándose, como una diapositiva que encuentra su foco; después respira muy despacio. */ @keyframes lp-placa { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes lp-deriva { 0%, 100% { transform: none; } 50% { transform: translateY(-7px); } } .lp-hero__foto { animation: lp-kenburns 9s var(--lp-ease) both; } /* La deriva entra después y toma el relevo de la transformación. */ .lp-hero__marca { animation: lp-placa .95s var(--lp-ease) .06s both, lp-deriva 8s ease-in-out 1.6s infinite; } .lp-hero__titulo { animation: lp-sube .8s var(--lp-ease) .15s both; } .lp-hero__subtitulo { animation: lp-sube .8s var(--lp-ease) .28s both; } .lp-hero__ctas { animation: lp-sube .8s var(--lp-ease) .40s both; } .lp-hero__plazo { animation: lp-sube .8s var(--lp-ease) .52s both; } .lp-hero__guia { animation: lp-respira 2.6s ease-in-out 1.4s infinite; } /* --- Aparición al desplazar (IntersectionObserver en landing.js) --- Sólo se oculta si el JS corrió (.lp-js): sin script, todo visible. */ .lp-js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease); } .lp-js [data-reveal].is-in { opacity: 1; transform: none; } /* Las fotos entran con un acercamiento en lugar de subir. */ .lp-js .lp-foto[data-reveal] { transform: scale(.94); } .lp-js .lp-foto[data-reveal].is-in { transform: none; } /* Escalonado natural dentro de cada grupo. */ .lp-congreso__fotos [data-reveal]:nth-child(2), .lp-linea__paso:nth-child(2) { transition-delay: .12s; } .lp-congreso__fotos [data-reveal]:nth-child(3), .lp-linea__paso:nth-child(3) { transition-delay: .24s; } /* --- Micro-interacciones --- */ .lp-nav { transition: box-shadow .3s var(--lp-ease); } .lp-nav__links a::after { transition: right .25s var(--lp-ease); } .lp-nav__links a:hover::after, .lp-nav__links a:focus-visible::after { right: 0; } .lp-btn { transition: transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease), background-color .22s var(--lp-ease); } .lp-btn:hover, .lp-btn:focus-visible { transform: translateY(-3px); } .lp-btn--primario:hover, .lp-btn--primario:focus-visible { box-shadow: 0 14px 34px rgba(140, 198, 63, .45); } .lp-btn--cristal:hover, .lp-btn--cristal:focus-visible { background: rgba(255, 255, 255, .16); } .lp-btn:active { transform: translateY(0); transition-duration: .08s; } .lp-foto img { transition: transform .6s var(--lp-ease); } .lp-foto:hover img { transform: scale(1.05); } .lp-enlace { transition: color .2s var(--lp-ease), border-color .2s var(--lp-ease); } .lp-enlace:hover { color: var(--lp-cta); } .lp-linea__paso--activo .lp-linea__nodo { animation: lp-pulsa 2.4s ease-in-out infinite; } @keyframes lp-pulsa { 0%, 100% { box-shadow: 0 0 0 6px rgba(140, 198, 63, .30); } 50% { box-shadow: 0 0 0 11px rgba(140, 198, 63, .12); } } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }