/* Movimiento de la landing: solo transform/opacity, 150–600 ms, y nada si el sistema pide reducirlo. */

/* Hero visual (static composition is always visible; motion is layered on top). */
.hero-visual{position:relative;min-height:360px;display:none}
.hv-glow{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ui-primary,#0078bd) 22%,transparent),transparent);filter:blur(10px)}
.hv-card{position:absolute;display:grid;gap:8px;padding:20px 22px;border-radius:20px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line,#dbe5ee);box-shadow:0 2px 4px #0b1f3a0d,0 18px 40px #0b1f3a1f;color:var(--ui-ink,#0b1f3a)}
.hv-label{font-size:.8rem;color:var(--ui-muted,#5b6b7c)}
.hv-main{left:4%;top:12%;width:min(340px,78%)}
.hv-amount{font-family:Poppins,"Open Sans",sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hv-row{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.hv-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ui-secondary,#e4f1fa);color:var(--ui-primary,#0078bd);font-weight:700}
.hv-pill{margin-left:auto;padding:3px 10px;border-radius:99px;background:#e3f4e8;color:#1d7a3e;font-size:.75rem;font-weight:700}
.hv-bar{display:block;height:8px;border-radius:99px;background:var(--ui-secondary,#e4f1fa);overflow:hidden}
.hv-bar i{display:block;height:100%;width:72%;border-radius:inherit;background:linear-gradient(90deg,var(--ui-primary,#0078bd),#2d9b4b);transform-origin:left}
.hv-legend{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ui-muted,#5b6b7c)}
.hv-pin{right:2%;top:2%;width:190px}
.hv-code{font-family:Poppins,"Open Sans",sans-serif;font-size:1.6rem;letter-spacing:.18em;color:var(--ui-primary,#0078bd)}
.hv-small{font-size:.75rem;color:var(--ui-muted,#5b6b7c)}
.hv-receipt{right:8%;bottom:4%;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:14px 18px}
.hv-receipt small{display:block;color:var(--ui-muted,#5b6b7c);font-size:.78rem}
.hv-check{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#2d9b4b;color:#fff}
.hv-check svg{width:20px;height:20px}
@media(min-width:1024px){
  :root .hero-grid{grid-template-columns:1.05fr 1fr;gap:48px}
  .hero-visual{display:block}
  :root .hero h1{font-size:clamp(3.4rem,5.4vw,5.6rem)}
}
@media(max-width:1023px){.hero-visual{display:block;width:100%;max-width:540px;min-height:330px;margin:28px auto 0;justify-self:center}}
@media(max-width:599px){
  .hero-visual{min-height:340px;margin-top:24px}
  .hv-card{padding:16px 18px}
  .hv-main{left:0;top:14%;width:86%}
  .hv-amount{font-size:1.6rem}
  .hv-pin{right:0;top:0;width:150px;padding:12px 14px}
  .hv-code{font-size:1.25rem}
  .hv-receipt{right:2%;bottom:0}
}

/* Topbar gains depth once the page scrolls. */
.topbar{transition:box-shadow .25s ease}
.topbar.is-scrolled{box-shadow:0 6px 20px #0b1f3a14}

@media (prefers-reduced-motion:no-preference){
  @keyframes lx-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes lx-pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes lx-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
  @keyframes lx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes lx-check{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
  @keyframes lx-glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
  @keyframes lx-ring{0%{box-shadow:0 0 0 0 #0078bd59}100%{box-shadow:0 0 0 16px #0078bd00}}

  .hero-copy>*{animation:lx-up .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.18s}.hero-copy>:nth-child(4){animation-delay:.26s}

  .hv-glow{animation:lx-glow 7s ease-in-out infinite}
  /* Entrance uses transform; the endless float uses translate, so they compose. */
  .hv-main{animation:lx-pop .7s cubic-bezier(.2,.7,.2,1) .25s both,lx-float 6s ease-in-out 1.2s infinite}
  .hv-pin{animation:lx-pop .7s cubic-bezier(.2,.7,.2,1) .45s both,lx-float 7s ease-in-out 1.6s infinite}
  .hv-receipt{animation:lx-pop .7s cubic-bezier(.2,.7,.2,1) .65s both,lx-float 8s ease-in-out 2s infinite}
  .hv-bar i{animation:lx-fill 1.1s cubic-bezier(.2,.7,.2,1) .7s both}
  .hv-check{animation:lx-check .5s cubic-bezier(.3,1.4,.5,1) 1.1s both}

  /* Scroll reveal: only elements marked by motion.js, so content stays visible without JS. */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
  .reveal.is-visible{opacity:1;transform:none}
  .reveal[data-reveal-step="1"]{transition-delay:.08s}.reveal[data-reveal-step="2"]{transition-delay:.16s}.reveal[data-reveal-step="3"]{transition-delay:.24s}

  /* Interaction feedback. */
  .login-button,.button,.floating-demo,.outline-button{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
  .login-button:active,.button:active,.floating-demo:active,.outline-button:active{transform:scale(.97)}
  .floating-demo{animation:lx-up .6s ease .9s both}
  @media (hover:hover){
    .login-button:hover,.button:hover,.floating-demo:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0078bd33}
    .outline-button:hover{transform:translateY(-1px)}
    .steps li,.role-card,.example-slide{transition:transform .25s ease,box-shadow .25s ease}
    .steps li:hover,.role-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px #0b1f3a0d,0 22px 44px #0b1f3a1f}
  }
  .web-dialog[open]{animation:lx-pop .28s cubic-bezier(.2,.7,.2,1)}
}

/* Perfiles: cada tarjeta con su color, una cifra de lo que ve y respuesta al cursor. */
.roles{position:relative;overflow:hidden}
.roles>.wrap{position:relative}
.roles-backdrop{position:absolute;inset:0;pointer-events:none}
.roles-backdrop i{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(60px);opacity:.45}
.roles-backdrop i:first-child{left:-120px;top:10%;background:color-mix(in srgb,var(--ui-primary,#0078bd) 30%,transparent)}
.roles-backdrop i:last-child{right:-140px;bottom:-10%;background:#2d9b4b33}
.role-card{--role:var(--ui-primary,#0078bd);position:relative;overflow:hidden}
#luis.role-card{--role:#0e7fb8}#jose.role-card{--role:#2d9b4b}#bruno.role-card{--role:#0b8fa3}#ana.role-card{--role:#1d3f74}
.role-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--role)}
.role-card .avatar{background:color-mix(in srgb,var(--role) 14%,var(--ui-surface,#fff));color:var(--role)}
.role-stat{display:grid;gap:2px;margin:6px 0 14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--role) 7%,var(--ui-surface,#fff));border:1px solid color-mix(in srgb,var(--role) 18%,transparent)}
.role-stat small{font-size:.75rem;color:var(--ui-muted,#5b6b7c)}
.role-stat strong{font-family:Poppins,"Open Sans",sans-serif;font-size:1.35rem;font-weight:700;color:var(--ui-ink,#0b1f3a);font-variant-numeric:tabular-nums}
.role-link span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  @keyframes lx-drift{0%,100%{translate:0 0}50%{translate:40px -30px}}
  @keyframes lx-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--role) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
  @keyframes lx-bounce-in{0%{opacity:0;transform:translateY(30px) scale(.94)}70%{opacity:1;transform:translateY(-4px) scale(1.01)}100%{opacity:1;transform:none}}
  .roles-backdrop i:first-child{animation:lx-drift 14s ease-in-out infinite}
  .roles-backdrop i:last-child{animation:lx-drift 18s ease-in-out -6s infinite reverse}
  .role-card.reveal{transition:transform .25s ease,box-shadow .25s ease}
  .role-card.reveal.is-visible{opacity:1;transform:none;animation:lx-bounce-in .7s cubic-bezier(.2,.7,.2,1) backwards}
  #luis.role-card.reveal.is-visible{animation-delay:.1s}#jose.role-card.reveal.is-visible{animation-delay:.2s}#bruno.role-card.reveal.is-visible{animation-delay:.3s}
  .role-link span{transition:transform .2s ease}
  .role-card .avatar{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
  @media (hover:hover){
    .role-card:hover,.role-card.reveal.is-visible:hover{transform:translateY(-6px);box-shadow:0 2px 4px #0b1f3a0d,0 26px 50px color-mix(in srgb,var(--role) 22%,transparent)}
    .role-card:hover .avatar{transform:scale(1.08);animation:lx-pulse 1s ease-out}
    .role-card:hover .role-link span,.role-link:focus-visible span{transform:translate(3px,-3px)}
  }
}