/* ==========================================================================
   Animaciones de entrada de cada producto (≈2 s, se omiten con un toque o con ?nointro)
   Regulus: huella que se escanea · Zosma: latido y acceso · Algieba: tilde y aviso · Algedi: código de barras y venta
   ========================================================================== */
html.has-intro body { overflow: hidden; }
html.has-intro main, html.has-intro #site-header, html.has-intro #site-footer { visibility: hidden; }

.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--ib, #050d14); color: #fff; overflow: hidden; cursor: pointer; transition: transform .95s cubic-bezier(.76, 0, .24, 1), opacity .5s .5s; }
.intro.out { transform: translateY(-101%); opacity: .98; }
.intro::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px); background-size: 9px 9px; -webkit-mask-image: radial-gradient(60% 50% at 50% 55%, #000, transparent 75%); mask-image: radial-gradient(60% 50% at 50% 55%, #000, transparent 75%); }
.intro-in { position: relative; display: grid; justify-items: center; gap: 26px; text-align: center; padding: 20px; }
.intro-lab { display: grid; gap: 6px; min-height: 64px; }
.intro-lab b { font: 500 .78rem 'Geist Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ic, #7cc0f5); transition: color .3s; }
.intro-lab small { font: 500 1.5rem 'Geist', sans-serif; letter-spacing: -.03em; min-height: 1.6em; }
.intro-skip { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font: 500 .68rem 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.intro-name { position: absolute; top: 24px; left: 0; right: 0; display: flex; justify-content: center; }
.intro-name img { height: 20px; width: auto; opacity: .85; }

/* ----- Regulus: huella ----- */
.in-fp { width: 240px; height: 290px; position: relative; }
.in-fp svg { width: 100%; height: 100%; overflow: visible; }
.in-fp .ring { fill: none; stroke: rgba(124,192,245,.35); stroke-width: 1.4; stroke-dasharray: 3 6; transform-origin: 95px 110px; animation: spin 8s linear infinite; }
.in-fp .arc { fill: none; stroke: #7cc0f5; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: arcIn .9s ease-out forwards; }

@keyframes arcIn { to { stroke-dashoffset: 0; } }
.in-fp .beam { fill: #aee0ff; opacity: 0; filter: drop-shadow(0 0 10px #7cc0f5); animation: beam 1.3s ease-in-out .5s 1 forwards; }
@keyframes beam { 0% { transform: translateY(20px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(205px); opacity: 0; } }
.in-fp.ok .arc { stroke: #34d399; transition: stroke .3s; } .in-fp.ok .ring { stroke: rgba(52,211,153,.5); }
.in-fp .okb { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.in-fp .okb circle { fill: #052e1f; stroke: #34d399; stroke-width: 2.6; filter: drop-shadow(0 0 10px rgba(52,211,153,.55)); }
.in-fp .tick { fill: none; stroke: #34d399; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.in-fp.ok .okb { opacity: 1; transform: none; transition: opacity .25s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.in-fp.ok .tick { animation: arcIn .45s ease-out .2s forwards; }

/* ----- Zosma: latido y acceso ----- */
.in-zs { width: min(560px, 82vw); height: 190px; position: relative; display: grid; place-items: center; }
.in-zs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.in-zs .ecg { fill: none; stroke: #b9fbef; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: arcIn 1.5s ease-in-out forwards; filter: drop-shadow(0 0 8px rgba(185,251,239,.7)); }
.in-zs .ecg0 { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.6; }
.in-zs .check { position: absolute; width: 112px; height: 112px; border-radius: 50%; background: #10b981; display: grid; place-items: center; transform: scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
.in-zs .check svg { position: static; width: 54px; height: 54px; }
.in-zs.ok .check { animation: popIn .6s cubic-bezier(.16, 1, .3, 1) forwards; } .in-zs.ok svg.sig { opacity: .25; transition: opacity .4s; }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 26px rgba(16,185,129,0); } }

/* ----- Algieba: tilde a mano y aviso ----- */
.in-al { position: relative; width: min(360px, 84vw); height: 220px; }
.in-al .pg { position: absolute; left: 0; top: 0; width: 100%; background: #fffdf8; border-radius: 6px 16px 16px 6px; padding: 22px 22px 22px 56px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); color: #2b2540; text-align: left; transform: rotate(-2deg);
  background-image: repeating-linear-gradient(transparent 0, transparent 37px, #cfd6e8 37px, #cfd6e8 38px); background-position: 0 50px; }
.in-al .pg::before { content: ''; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: #f0a4b3; }
.in-al .pg b { display: block; font: 600 1.7rem 'Caveat', 'Segoe Script', cursive; color: #3a1a49; }
.in-al .pg .row { display: flex; justify-content: space-between; align-items: center; font: 500 1.55rem 'Caveat', 'Segoe Script', cursive; height: 38px; }
.in-al .pg .row svg { width: 44px; height: 30px; overflow: visible; } .in-al .pg .row path { fill: none; stroke: #1b8a4b; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: arcIn .6s ease-out forwards; }
.in-al .pg .row:nth-of-type(1) path { animation-delay: .35s; } .in-al .pg .row:nth-of-type(2) path { animation-delay: .75s; } .in-al .pg .row:nth-of-type(3) path { animation-delay: 1.15s; }
.in-al .nt { position: absolute; right: -14px; bottom: -34px; width: 230px; background: rgba(255,255,255,.96); color: #1d1024; border-radius: 16px; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; font-size: .82rem; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); transform: translateY(24px) scale(.94); opacity: 0; animation: ntIn .6s cubic-bezier(.16, 1, .3, 1) 1.5s forwards; }
.in-al .nt i { width: 30px; height: 30px; border-radius: 9px; background: #690681; color: #fff; display: grid; place-items: center; } .in-al .nt i svg { width: 16px; height: 16px; } .in-al .nt b { color: #690681; display: block; font-size: .72rem; }
@keyframes ntIn { to { transform: none; opacity: 1; } }

/* ----- Algedi: código de barras, láser y total ----- */
.in-ag { width: min(340px, 82vw); position: relative; display: grid; gap: 18px; justify-items: center; }
.in-ag .bcode { width: 100%; height: 120px; background: #fffefb; border-radius: 6px; padding: 16px; position: relative; overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); }
.in-ag .bcode i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #2a1d14 0 2px, transparent 2px 4px, #2a1d14 4px 5px, transparent 5px 8px, #2a1d14 8px 11px, transparent 11px 13px, #2a1d14 13px 14px, transparent 14px 17px); transform-origin: left; animation: bcIn .5s ease-out both; }
@keyframes bcIn { from { transform: scaleX(0); } }
.in-ag .laser { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #ff3b30; box-shadow: 0 0 14px 2px rgba(255,59,48,.8); animation: laser 1.5s ease-in-out .5s 1 forwards; opacity: 0; }
@keyframes laser { 0% { left: 4%; opacity: 1; } 50% { left: 94%; opacity: 1; } 100% { left: 4%; opacity: 0; } }
.in-ag .itot { font: 600 3rem 'Geist Mono', monospace; letter-spacing: -.06em; color: #fff; display: flex; gap: 10px; align-items: baseline; } .in-ag .itot small { font: 500 1rem 'Geist Mono'; letter-spacing: 0; color: #f5b08e; }
.in-ag .itot b { color: #f5b08e; transition: color .3s; }
.in-ag.ok .itot b { color: #34d399; }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } html.has-intro main, html.has-intro #site-header, html.has-intro #site-footer { visibility: visible; } html.has-intro body { overflow: auto; } }