. MÁXIMO una zona con barrido por página. El wrapper recorta (overflow) y la línea solo se mueve con transform; si el hero es más bajo que el recorrido, la línea sale del encuadre y "descansa" — a propósito. */ .linea-scan { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .linea-scan::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(126, 217, 87, .28) 18%, rgba(126, 217, 87, .28) 82%, transparent); box-shadow: 0 0 14px rgba(126, 217, 87, .16); opacity: 0; animation: barrido 11s linear infinite; will-change: transform; } @keyframes barrido { 0% { transform: translateY(-4px); opacity: 0; } 4% { opacity: .8; } 46% { opacity: .8; } 55%, 100% { transform: translateY(82vh); opacity: 0; } } /* --- Micro-flicker de la marca de agua X ------------------------ Neón viejo: opacidad plena casi todo el ciclo, dos flutters breves. Se percibe apenas — la X ya vive al 5% de alfa. */ .marca-x::after { animation: neon-x 9s linear infinite; } @keyframes neon-x { 0%, 41%, 100% { opacity: 1; } 41.5% { opacity: .55; } 42% { opacity: .9; } 42.6% { opacity: .6; } 43.4%, 68% { opacity: 1; } 68.6% { opacity: .7; } 69.4% { opacity: 1; } } /* --- Hover "encendido" de tarjetas-enlace ----------------------- Sin markup extra: al entrar el cursor, un destello cromático de 300ms (una sola vez, no loop) y el título queda con halo verde. */ .card-link:hover h3 { text-shadow: 0 0 16px rgba(126, 217, 87, .35); animation: destello-rgb .3s steps(1, end) 1; } @keyframes destello-rgb { 0% { text-shadow: -2px 0 var(--glitch-rojo), 2px 0 var(--glitch-cian); } 45% { text-shadow: 2px 0 var(--glitch-rojo), -2px 0 var(--glitch-cian); } 100% { text-shadow: 0 0 16px rgba(126, 217, 87, .35); } } /* --- Reduced motion: la capa cyberpunk se apaga ENTERA ---------- No basta el bloque general de la sección 9: estas animaciones son infinitas y con duración .01ms reiniciarían en bucle (repintado constante). Se anulan explícitamente y el contenido queda íntegro: cursor fijo visible, wordmark limpio, sin overlay ni barrido. */ @media (prefers-reduced-motion: reduce) { .scanlines, .linea-scan { display: none; } .glitch-marca::before, .glitch-marca::after { animation: none !important; opacity: 0 !important; } .cursor-terminal, .marca-x::after { animation: none !important; } .card-link:hover h3 { animation: none !important; text-shadow: none; } } /* ------------------------------------------------------------- 11. FONDOS DE HERO TEMÁTICOS (img/hero-*.svg) Un "plano técnico" vectorial por página: trazo fino verde sobre negro, retícula y rótulos mono. La ilustración vive en el tercio derecho y emerge del negro; el texto del hero se apoya SIEMPRE sobre negro puro (proporción 70/20/10 intacta: el fondo es atmósfera, no protagonista). Markup:

— SIN .marca-x: el fondo temático ES el gesto audaz del hero (dos motivos competirían, y la X con z-index:-1 quedaría además oculta tras el background). La .marca-x sigue disponible para otras zonas. Legibilidad con doble red: cada SVG trae su propio fundido a negro horneado (izquierda + bordes) y aquí se suma un velo en gradiente sobre la zona del texto. --velo-hero se redefine en móvil para pasar de velo lateral a velo vertical sin repetir las URLs. */ [class*="hero-tema-"] { --velo-hero: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 72%, var(--negro) 100%), linear-gradient(97deg, var(--negro) 0%, var(--negro) 34%, rgba(0, 0, 0, .8) 54%, rgba(0, 0, 0, .35) 74%, rgba(0, 0, 0, .08) 100%); background-color: var(--negro); background-image: var(--velo-hero); /* fallback si falta el SVG */ background-repeat: no-repeat; background-position: center, center, right center; background-size: auto, auto, cover; } /* Ojo con la ruta: url() se resuelve desde css/, por eso ../img/. No se usa var() para las url(): su base de resolución es ambigua entre navegadores (hoja vs documento) y aquí no se arriesga. */ .hero-tema-index { background-image: var(--velo-hero), url("../img/hero-index.svg"); } .hero-tema-productos { background-image: var(--velo-hero), url("../img/hero-productos.svg"); } .hero-tema-contacto { background-image: var(--velo-hero), url("../img/hero-contacto.svg"); } .hero-tema-reservas { background-image: var(--velo-hero), url("../img/hero-plugin-reservas.svg"); } .hero-tema-plugin-karin { background-image: var(--velo-hero), url("../img/hero-plugin-ley-karin.svg"); } .hero-tema-rendicuentas { background-image: var(--velo-hero), url("../img/hero-rendicuentas.svg"); } .hero-tema-celebra { background-image: var(--velo-hero), url("../img/hero-celebraconmigo.svg"); } .hero-tema-canal-karin { background-image: var(--velo-hero), url("../img/hero-canal-ley-karin.svg"); } /* Móvil: el texto ocupa todo el ancho, así que el velo lateral no basta. Se recorta la ilustración a su zona de motivo (abajo a la derecha) y el velo pasa a ser vertical: negro arriba donde vive el texto, atmósfera tenue abajo, y cierre a negro en el borde. */ @media (max-width: 720px) { [class*="hero-tema-"] { --velo-hero: linear-gradient(180deg, var(--negro) 0%, rgba(0, 0, 0, .94) 38%, rgba(0, 0, 0, .74) 64%, rgba(0, 0, 0, .45) 84%, var(--negro) 100%), linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%); background-position: center, center, right bottom; } }