/* intro.css — Animación de entrada de 5 s (deudas → plan → libertad). La arma js/intro.js. */
.app-intro {
  --in-bg: #f1f6f3; --in-bg2: #e3f1ea; --in-ink: #0d2621; --in-muted: #53665f;
  --in-g1: #22b573; --in-g2: #087a55; --in-g3: #055c40; --in-mint: #3ccf8e;
  --in-d1: #d64545; --in-d2: #e8703a; --in-d3: #f0a33a;
  --size: min(36vmin, 230px);
  position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, var(--in-bg) 0%, var(--in-bg2) 100%); color: var(--in-ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
[data-theme="dark"] .app-intro { --in-bg: #0b1c18; --in-bg2: #0f2b24; --in-ink: #eaf5f0; --in-muted: #9db8ae; --in-g1: #8ff0bd; --in-g2: #3ccf8e; --in-g3: #1f9e6a; }
@media (max-width: 560px) { .app-intro { --size: min(52vw, 200px); } }
.app-intro::before {
  content: ""; position: absolute; width: calc(var(--size) * 2.2); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--in-mint) 35%, transparent) 0%, transparent 65%);
  opacity: 0; transform: scale(.6); top: 50%; left: 50%; translate: -50% -62%;
}
.app-intro .in-mark { position: relative; width: var(--size); height: var(--size); transform: translateY(calc(var(--size) * .32)); }
.app-intro .in-mark svg, .app-intro .in-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-intro .in-mark img { opacity: 0; }
.app-intro .in-bars rect { transform-box: fill-box; transform-origin: 50% 100%; transform: translate(var(--dx), var(--dy)) scale(var(--sx), 0); fill: var(--debt); }
.app-intro .in-b1 { --dx: 33.5px; --dy: 29px; --sx: 3.78; --sy: 10.94; --debt: var(--in-d1); }
.app-intro .in-b2 { --dx: 63.5px; --dy: 29px; --sx: 3.78; --sy: 5.4; --debt: var(--in-d2); }
.app-intro .in-b3 { --dx: 92.5px; --dy: 29px; --sx: 3.78; --sy: 2.703; --debt: var(--in-d3); }
.app-intro .in-arrow, .app-intro .in-head, .app-intro .in-ring { fill: none; stroke: url(#in-verde); stroke-linecap: round; stroke-linejoin: round; }
.app-intro .in-arrow { stroke-width: 11; stroke-dasharray: 1; stroke-dashoffset: 1; }
.app-intro .in-head { stroke-width: 11; opacity: 0; transform-box: fill-box; transform-origin: 70% 30%; }
.app-intro .in-ring { stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 128px 128px; transform: rotate(-110deg); }
.app-intro .in-word { margin-top: calc(var(--size) * .12); text-align: center; line-height: .95; font-family: var(--font-display, "Segoe UI", system-ui, sans-serif); }
.app-intro .in-name { font-size: calc(var(--size) * .27); font-weight: 850; letter-spacing: -.01em; position: relative; display: inline-block; overflow: hidden; padding: 0 .04em .06em; }
.app-intro .in-name span { display: inline-block; opacity: 0; transform: translateY(60%); }
.app-intro .in-name .l { background: linear-gradient(135deg, var(--in-g1), var(--in-g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-intro .in-name::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); mix-blend-mode: soft-light; opacity: 0;
}
.app-intro .in-pro { display: block; margin-top: .35em; font-size: calc(var(--size) * .11); font-weight: 800; color: var(--in-g2); letter-spacing: .05em; opacity: 0; padding-left: .45em; }
.app-intro .in-tag { margin-top: calc(var(--size) * .09); font-size: calc(var(--size) * .085); color: var(--in-muted); font-weight: 600; opacity: 0; transform: translateY(8px); }
.app-intro .in-skip { position: absolute; bottom: calc(18px + var(--sab, 0px)); font-size: 12px; color: var(--in-muted); opacity: 0; animation: in-fade .4s ease 1.2s forwards; }

/* Línea de tiempo (5 s) */
.app-intro { animation: in-out .3s ease-in 4.7s forwards; }
.app-intro::before { animation: in-halo 1.4s ease-out 2.7s forwards; }
.app-intro .in-b1 { animation: in-grow .55s cubic-bezier(.3,1.5,.5,1) .15s forwards, in-plan .75s cubic-bezier(.65,0,.35,1) 1.15s forwards; }
.app-intro .in-b2 { animation: in-grow .55s cubic-bezier(.3,1.5,.5,1) .27s forwards, in-plan .75s cubic-bezier(.65,0,.35,1) 1.25s forwards; }
.app-intro .in-b3 { animation: in-grow .55s cubic-bezier(.3,1.5,.5,1) .39s forwards, in-plan .75s cubic-bezier(.65,0,.35,1) 1.35s forwards; }
.app-intro .in-bars { animation: in-weight .3s ease-in-out .9s 1; }
.app-intro .in-arrow { animation: in-stroke .8s cubic-bezier(.5,0,.2,1) 1.75s forwards; }
.app-intro .in-head { animation: in-pop .35s cubic-bezier(.3,1.6,.5,1) 2.45s forwards; }
.app-intro .in-ring { animation: in-stroke .85s cubic-bezier(.6,0,.2,1) 2.15s forwards, in-spin .85s cubic-bezier(.6,0,.2,1) 2.15s forwards; }
.app-intro .in-draw { animation: in-fade-out .45s ease 3.05s forwards; }
.app-intro .in-mark img { animation: in-logo .6s cubic-bezier(.2,.9,.3,1.2) 2.85s forwards; }
.app-intro .in-mark { animation: in-lift .55s cubic-bezier(.5,0,.2,1) 3s both; }
.app-intro .in-name span { animation: in-rise .45s cubic-bezier(.2,.9,.3,1.15) calc(3.2s + var(--i) * 40ms) forwards; }
.app-intro .in-name::after { animation: in-sheen .7s ease-in-out 4.05s forwards; }
.app-intro .in-pro { animation: in-pro .6s cubic-bezier(.2,.8,.2,1) 3.6s forwards; }
.app-intro .in-tag { animation: in-tag .5s ease-out 3.85s forwards; }
/* Al tocar para saltar */
.app-intro.is-leaving { animation: in-out .25s ease-in forwards !important; }

@keyframes in-grow { to { transform: translate(var(--dx), var(--dy)) scale(var(--sx), var(--sy)); } }
@keyframes in-plan { from { transform: translate(var(--dx), var(--dy)) scale(var(--sx), var(--sy)); fill: var(--debt); } to { transform: none; fill: var(--in-g2); } }
@keyframes in-weight { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes in-stroke { to { stroke-dashoffset: 0; } }
@keyframes in-spin { to { transform: rotate(-20deg); } }
@keyframes in-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes in-fade-out { to { opacity: 0; } }
@keyframes in-fade { to { opacity: 1; } }
@keyframes in-logo { from { opacity: 0; transform: scale(.9); filter: blur(6px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes in-lift { from { transform: translateY(calc(var(--size) * .32)); } to { transform: translateY(0); } }
@keyframes in-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes in-sheen { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
@keyframes in-pro { from { opacity: 0; letter-spacing: .05em; } to { opacity: 1; letter-spacing: .45em; } }
@keyframes in-tag { to { opacity: 1; transform: translateY(0); } }
@keyframes in-halo { to { opacity: 1; transform: scale(1); } }
@keyframes in-out { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }

/* Movimiento reducido: solo el logo y el nombre, sin animaciones (lo acorta js/intro.js) */
.app-intro.is-reduced, .app-intro.is-reduced *, .app-intro.is-reduced::before { animation: none !important; }
.app-intro.is-reduced .in-draw { display: none; }
.app-intro.is-reduced .in-mark { transform: none; }
.app-intro.is-reduced .in-mark img, .app-intro.is-reduced .in-name span, .app-intro.is-reduced .in-pro, .app-intro.is-reduced .in-tag { opacity: 1; transform: none; }
.app-intro.is-reduced .in-pro { letter-spacing: .45em; }
.app-intro.is-reduced.is-leaving { opacity: 0; transition: opacity .25s; }