/* ============================================================================ GENIDEIA — flujo-guiado.css : estilos del flujo guiado por pasos. Bloqueo/desbloqueo de secciones, portada-gancho de video, CTA de cierre y cartel de "qué hacer". Tokenizable por marca (editá el :root). Cero dependencias. Respeta prefers-reduced-motion. ============================================================================ */ :root { --fg-accent: #2E6FD1; /* acento de marca Andrew Coach (play, CTA, glow) */ --fg-accent-2: #4F8FD9; /* segundo azul para los degradés */ --fg-ink: #0B1220; /* texto sobre el acento (botones) */ --fg-radius: 16px; /* radio de los videos */ --fg-dur: .45s; /* duración de reveal del bloque/CTA */ --fg-ease: cubic-bezier(.22,1,.36,1); } /* ── Bloqueo de pasos ────────────────────────────────────────────────────── Solo se ocultan cuando el JS marcó . Sin JS, todo queda visible (degradación elegante + SEO). */ html.fg-ready [data-fg-unlock] { display: none; } html.fg-ready [data-fg-unlock].fg-open{ display: block; animation: fgReveal var(--fg-dur) var(--fg-ease) both; } @keyframes fgReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ── Cartel de "qué hacer" (se oculta al cumplir el paso) ─────────────────── */ [data-fg-hint] { transition: opacity .3s; } [data-fg-hint].fg-hide { display: none; } /* ── CTA de cierre: oculto hasta cumplir; aparece con glow ─────────────────── */ [data-fg-cta] { opacity: 0; transform: translateY(8px); pointer-events: none; max-height: 0; overflow: hidden; transition: opacity var(--fg-dur) var(--fg-ease), transform var(--fg-dur) var(--fg-ease); } [data-fg-cta].fg-show { opacity: 1; transform: translateY(0); pointer-events: auto; max-height: 200px; animation: fgGlow 2s ease-in-out infinite; } @keyframes fgGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); } 50% { box-shadow: 0 0 26px 2px rgba(0,200,255,.45); } } /* ── Contenedor de video + portada-gancho ────────────────────────────────── .fg-video es el wrap (relative). Por defecto pensado para reel vertical 9:16; sobreescribí el aspect-ratio/max-width por proyecto. */ .fg-video { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9/16; border-radius: var(--fg-radius); overflow: hidden; border: 1px solid rgba(0,200,255,.25); background: var(--fg-ink); box-shadow: 0 8px 40px rgba(0,200,255,.10); } .fg-video > video { width: 100%; height: 100%; object-fit: cover; display: block; } [data-fg-cover] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; border: none; padding: 0; background: linear-gradient(180deg, rgba(7,8,13,.25) 0%, rgba(7,8,13,.55) 100%); transition: opacity .3s; } .fg-video.fg-playing [data-fg-cover] { opacity: 0; pointer-events: none; } .fg-play { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fg-ink); background: linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2)); animation: fgPulse 2.2s ease-in-out infinite; } @keyframes fgPulse { 0% { box-shadow: 0 0 0 0 rgba(0,200,255,.45); } 70% { box-shadow: 0 0 0 18px rgba(0,200,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); } } .fg-cover-hint { font-family: inherit; font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: #fff; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.6); } /* ── Accesibilidad: sin movimiento, sin animaciones (el bloqueo sigue igual) ── */ @media (prefers-reduced-motion: reduce) { html.fg-ready [data-fg-unlock].fg-open { animation: none; } [data-fg-cta].fg-show { animation: none; } .fg-play { animation: none; } }