*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020202;color:#eee;font-family:Arial,sans-serif}
body{background:radial-gradient(circle at 50% 28%,#24190c 0,#090704 38%,#010101 75%)}
.app{min-height:100vh;max-width:520px;margin:auto;padding:22px 14px 32px;text-align:center;display:flex;flex-direction:column;overflow:hidden}
header b{display:block;font:17px Georgia,serif;letter-spacing:.30em;color:#e4c47c}
header small{display:block;margin-top:8px;font-size:8px;letter-spacing:.32em;color:#78694e}
.rule{width:110px;height:1px;background:#513b20;margin:18px auto}
main{flex:1;display:flex;flex-direction:column;justify-content:center}
h1{font:400 30px/1.22 Georgia,serif;color:#ecd39e;margin:9px 0 14px}
p{max-width:410px;margin:7px auto;color:#ac9b7d;font-size:14px;line-height:1.65}
strong{color:#e3c27a}button{min-width:132px;min-height:48px;padding:0 23px;margin:17px 5px 0;border:1px solid #80612f;border-radius:999px;background:linear-gradient(#191108,#090603);color:#e7c77d;font-size:14px}
button:active{transform:scale(.98)}
.label{font-size:9px;letter-spacing:.25em;color:#927b55;margin-bottom:9px}
.scene{position:relative;width:min(430px,100%);height:330px;margin:10px auto 14px;border:1px solid #382816;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#38220f,#120b06 48%,#030202 75%);box-shadow:inset 0 -40px 70px #000}
.table{position:absolute;left:-8%;bottom:-48px;width:116%;height:190px;border-radius:50%;background:radial-gradient(ellipse,#4b2d13,#1a0f07 55%,#050302 77%);border-top:1px solid #62401f}
.obj{position:absolute;width:78px;height:91px;border-radius:12px;overflow:hidden;border:1px solid #5a4021;background:#080604;box-shadow:0 10px 22px #000;transition:.7s}
.obj img{width:100%;height:100%;object-fit:cover;display:block}
.obj:nth-child(2){left:18px;top:52px;transform:rotate(-5deg)} .obj:nth-child(3){left:105px;top:34px;transform:rotate(3deg)}
.obj:nth-child(4){left:193px;top:47px;transform:rotate(-2deg)} .obj:nth-child(5){right:20px;top:34px;transform:rotate(5deg)}
.obj:nth-child(6){left:53px;bottom:48px;transform:rotate(3deg)} .obj:nth-child(7){left:144px;bottom:34px;transform:rotate(-4deg)}
.obj:nth-child(8){right:103px;bottom:47px;transform:rotate(2deg)} .obj:nth-child(9){right:15px;bottom:37px;transform:rotate(-3deg)}
.glint{position:absolute;width:170px;height:6px;left:-180px;top:90px;transform:rotate(-18deg);background:linear-gradient(90deg,transparent,#f6d68d99,transparent);filter:blur(2px);animation:glint 5.2s 1.4s ease-in-out 1}
.shadowmark{position:absolute;right:28px;bottom:70px;width:58px;height:58px;border-radius:50%;background:#d7a94a0b;filter:blur(10px);animation:ghost 3s 2.2s both}
.timestamp{font:8px monospace;letter-spacing:.08em;color:#65583f;margin-top:5px;opacity:.72}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(300px,88vw);margin:16px auto}
.card{height:112px;border:1px solid #50391d;border-radius:14px;overflow:hidden;background:#080604}
.card img{width:100%;height:100%;object-fit:cover}
.seq{height:200px;position:relative;margin:8px auto;display:flex;align-items:center;justify-content:center}
.seq .card{position:absolute;width:135px;height:160px;opacity:0;animation:seq 8s linear infinite}
.seq .card:nth-child(2){animation-delay:2s}.seq .card:nth-child(3){animation-delay:4s}.seq .card:nth-child(4){animation-delay:6s}
.mist{position:relative;width:310px;height:230px;margin:12px auto;border-radius:50%;background:radial-gradient(ellipse,#24170b,#070403 67%);overflow:hidden}
.mist .card{position:absolute;width:92px;height:102px}
.mist .card:nth-child(1){left:35px;top:22px}.mist .card:nth-child(2){right:34px;top:29px}.mist .card:nth-child(3){left:53px;bottom:20px}.mist .card:nth-child(4){right:50px;bottom:18px}
.auto{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dot{width:8px;height:8px;border-radius:50%;background:#efce82;box-shadow:0 0 16px #e4b95c,0 0 50px #926324;margin:24px;animation:pulse 1.5s infinite}
.msg{font:24px/1.55 Georgia,serif;color:#dbc18b;max-width:420px;animation:fade 1s both}
.tiny{font-size:9px;letter-spacing:.22em;color:#77694e;margin-top:15px}
.rewind{position:relative;height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.rewind .scene{position:absolute;animation:rewindScene 4.5s both}
.rewindLines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,#fff 5px,#fff 6px);opacity:.04;animation:scan .15s infinite}
.clue{position:absolute;z-index:8;padding:8px 11px;border:1px solid #b9934c;border-radius:999px;background:#0c0906e8;color:#f0ce83;font-size:9px;letter-spacing:.13em;opacity:0;animation:clue 1.4s 4.4s forwards}
.prediction{margin:15px auto;padding:22px 18px;width:min(360px,92vw);border:1px solid #6b522d;border-radius:16px;background:linear-gradient(145deg,#171008,#070503);box-shadow:0 18px 45px #000}
.prediction small{display:block;font-size:8px;letter-spacing:.18em;color:#7f6c4c}
.prediction b{display:block;margin:12px 0 7px;font:28px Georgia,serif;color:#e8c77d;letter-spacing:.10em}
.bigobj{width:170px;height:195px;margin:12px auto;border:1px solid #77582d;border-radius:18px;overflow:hidden;box-shadow:0 0 40px #b67c2730}
.bigobj img{width:100%;height:100%;object-fit:cover}
footer{padding-top:15px;font-size:8px;letter-spacing:.18em;color:#594d39}
@keyframes glint{0%{left:-180px;opacity:0}20%{opacity:1}65%{left:470px;opacity:.8}100%{left:520px;opacity:0}}
@keyframes ghost{from{opacity:0;transform:scale(.5)}50%{opacity:.8}to{opacity:0;transform:scale(1.6)}}
@keyframes seq{0%{opacity:0;transform:scale(.85)}8%,20%{opacity:1;transform:scale(1)}25%,100%{opacity:0}}
@keyframes pulse{50%{transform:scale(2);opacity:.4}}@keyframes fade{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes rewindScene{0%{transform:scale(1);filter:none}30%{transform:scale(.94);filter:grayscale(.7) contrast(1.2)}55%{transform:scale(1.04);filter:grayscale(.2)}100%{transform:scale(1);filter:none}}
@keyframes scan{to{transform:translateY(6px)}}@keyframes clue{to{opacity:1;transform:scale(1.05)}}
@media(max-width:390px){.scene{height:305px}.obj{width:68px;height:81px}.obj:nth-child(3){left:92px}.obj:nth-child(4){left:166px}.obj:nth-child(7){left:125px}.obj:nth-child(8){right:88px}h1{font-size:27px}}


/* ============================================================
   V2.9.4 - Mejoras de presentación (sin alterar INFLUENCIA V1.0)
   ============================================================ */
.back-site{
    position:fixed;top:24px;left:26px;z-index:50;
    display:flex;align-items:center;gap:9px;
    padding:10px 14px;border:1px solid #5c4526;border-radius:999px;
    background:#090704b8;color:#a99570;text-decoration:none;
    font-size:9px;letter-spacing:.16em;backdrop-filter:blur(8px);
    transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.back-site .back-arrow{font-size:18px;line-height:1;color:#d2ad65;transition:transform .3s}
.back-site:hover{color:#f0d18b;border-color:#a77b38;background:#151006e8;transform:translateY(-1px)}
.back-site:hover .back-arrow{transform:translateX(-4px)}

/* Botón vivo inspirado en el efecto de líneas que recorren el borde. */
.magic-btn{position:relative;overflow:hidden;isolation:isolate;border-color:#725329;transition:color .35s,background .35s,box-shadow .35s,transform .2s}
.magic-btn .btn-text{position:relative;z-index:3}
.magic-btn .edge{position:absolute;display:block;z-index:2;pointer-events:none}
.magic-btn .edge-1{top:0;left:-100%;width:100%;height:1px;background:linear-gradient(90deg,transparent,#f2ce78);animation:edgeTop 2.6s linear infinite}
.magic-btn .edge-2{top:-100%;right:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,#f2ce78);animation:edgeRight 2.6s linear .65s infinite}
.magic-btn .edge-3{right:-100%;bottom:0;width:100%;height:1px;background:linear-gradient(270deg,transparent,#f2ce78);animation:edgeBottom 2.6s linear 1.3s infinite}
.magic-btn .edge-4{bottom:-100%;left:0;width:1px;height:100%;background:linear-gradient(0deg,transparent,#f2ce78);animation:edgeLeft 2.6s linear 1.95s infinite}
.magic-btn:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 130%,#8c5b1d55,transparent 62%);opacity:.35;transition:opacity .35s}
.magic-btn:hover{color:#fff0c3;background:#211507;box-shadow:0 0 16px #b77c2a40,0 0 42px #8e5d1d20;transform:translateY(-2px)}
.magic-btn:hover:before{opacity:.9}.magic-btn:active{transform:translateY(0) scale(.98)}
@keyframes edgeTop{0%{left:-100%}50%,100%{left:100%}}
@keyframes edgeRight{0%{top:-100%}50%,100%{top:100%}}
@keyframes edgeBottom{0%{right:-100%}50%,100%{right:100%}}
@keyframes edgeLeft{0%{bottom:-100%}50%,100%{bottom:100%}}

/* Aprovechamiento de pantalla en notebook/escritorio. El layout móvil original se conserva. */
@media (min-width:760px){
    .app{max-width:820px;padding:26px 28px 28px}
    header b{font-size:19px} header small{font-size:9px}
    main{min-height:calc(100vh - 155px)}
    h1{font-size:35px} p{font-size:15px;max-width:500px}
    .scene{transform:scale(1.18);margin:42px auto 45px}
    .grid4{width:360px;gap:13px;margin:22px auto}.grid4 .card{height:135px}
    .seq{height:250px}.seq .card{width:165px;height:195px}
    .mist{width:370px;height:275px}.mist .card{width:110px;height:122px}
    .mist .card:nth-child(1){left:42px;top:26px}.mist .card:nth-child(2){right:41px;top:34px}.mist .card:nth-child(3){left:64px;bottom:24px}.mist .card:nth-child(4){right:60px;bottom:22px}
    .auto{min-height:500px}.msg{font-size:29px;max-width:520px}
    .rewind{height:510px}.rewind .scene{margin:auto}
    .bigobj{width:195px;height:225px}.prediction{width:400px}
    button{min-width:155px;min-height:52px;font-size:15px}
}
@media (min-width:1200px){
    .app{max-width:940px}
    .scene{transform:scale(1.28);margin:58px auto 60px}
    h1{font-size:38px}
}
@media(max-width:620px){
    .back-site{top:12px;left:12px;padding:8px 10px;background:#090704d9}
    .back-site span:last-child{display:none}
    .back-site .back-arrow{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
    .magic-btn .edge{animation-duration:5s}
}