/* Wallfi — landing page styles
   Base tokens, animaciones y estados :hover.
   El layout vive en estilos inline dentro de app.js (mismo modelo que el diseño original). */

* { box-sizing: border-box; }
    body { margin: 0; background: #FAF6F0; -webkit-font-smoothing: antialiased; scrollbar-width: none; }
    body::-webkit-scrollbar { display: none; }
    html { scrollbar-width: none; }
    html::-webkit-scrollbar { display: none; }
    a { color: #5B4B8A; text-decoration: none; }
    a:hover { color: #453768; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
    @keyframes blobMove { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-30px) scale(1.05); } }
    @keyframes barGrow82 { 0%,8% { width: 0%; } 55%,88% { width: 82%; } 100% { width: 0%; } }
    @keyframes barGrow95 { 0%,8% { width: 0%; } 55%,88% { width: 95%; } 100% { width: 0%; } }
    @keyframes ringGrow82 { 0%,8% { stroke-dashoffset: 131.9; } 55%,88% { stroke-dashoffset: 23.7; } 100% { stroke-dashoffset: 131.9; } }
    @keyframes lineDraw { 0%,8% { stroke-dashoffset: 100; opacity: 0.35; } 55%,88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 100; opacity: 0.35; } }
    @keyframes skelPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
    @keyframes scanSweep { 0%,6% { top: 4%; opacity: 0; } 12% { opacity: 1; } 55% { top: 92%; opacity: 1; } 65%,100% { opacity: 0; top: 92%; } }
    @keyframes itemLive { 0%,5% { opacity: 0.4; transform: translateX(-4px); } 20%,90% { opacity: 1; transform: translateX(0); } 100% { opacity: 0.4; transform: translateX(-4px); } }
    @keyframes lineReveal { 0%,10% { background: #ECE6EE; width: 0%; } 45%,88% { background: var(--rc,#C9A23F); width: var(--rw,80%); } 100% { background: #ECE6EE; width: 0%; } }
    @keyframes chipPop { 0%,60% { opacity: 0; transform: scale(0.7); } 75%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.7); } }
    @keyframes pillAppear { 0%,8% { opacity: 0; transform: scale(0.7); } 14%,84% { opacity: 1; transform: scale(1); } 92%,100% { opacity: 0; transform: scale(0.7); } }
    @keyframes todayPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(91,75,138,0.45); } 50% { box-shadow: 0 0 0 6px rgba(91,75,138,0); } }
    @keyframes phoneIn { 0% { opacity: 0; transform: translateY(46px) scale(0.92) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }
    @keyframes wordSwap { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes floatR1 { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(-4deg); } }
    @keyframes floatR2 { 0%,100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
    @keyframes floatR3 { 0%,100% { transform: translateY(0) rotate(-14deg); } 50% { transform: translateY(-16px) rotate(-10deg); } }
    @keyframes floatR4 { 0%,100% { transform: translateY(0) rotate(16deg); } 50% { transform: translateY(-14px) rotate(20deg); } }
    @keyframes floatR5 { 0%,100% { transform: translateY(0) rotate(-22deg); } 50% { transform: translateY(-18px) rotate(-18deg); } }
    @keyframes floatR6 { 0%,100% { transform: translateY(0) rotate(20deg); } 50% { transform: translateY(-13px) rotate(24deg); } }
    @keyframes floatR7 { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-11px) rotate(-6deg); } }
    @keyframes skelPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
    @keyframes scanSweep { 0% { top: 6%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 94%; opacity: 0; } }
    @keyframes starTwinkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.92); } }
    @keyframes lockPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
    @keyframes badgePop { 0% { opacity: 0; transform: translateX(-50%) scale(0.5); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
    @keyframes softPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,63,0.4); } 50% { box-shadow: 0 0 0 8px rgba(201,162,63,0); } }
    @keyframes ctaRingPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ---- estados hover (equivalen a style-hover del diseño) ---- */
.wf-h1:hover {
  border-color: #5B4B8A !important;
  color: #241F2E !important;
}
.wf-h2:hover {
  background: #C9A23F !important;
}
.wf-h3:hover {
  filter: brightness(1.08) !important;
}
.wf-h4:hover {
  background: rgba(36,31,46,0.06) !important;
}
.wf-h5:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 36px rgba(36,31,46,0.1) !important;
}
.wf-h6:hover {
  transform: translateY(-6px) !important;
}
.wf-h7:hover {
  transform: scale(1.02) !important;
}
.wf-h8:hover {
  border-color: #C9A23F !important;
}
.wf-h9:hover {
  background: #C9A23F !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.wf-h10:hover {
  border-color: #fff !important;
  transform: translateY(-2px) !important;
}