/* Piezas compartidas por las 3 propuestas (prototipos, no producción). */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Celular realista: barra de estado + app + barra de gestos */
.phone{position:relative;border-radius:13%/6%;background:#0B0A08;padding:1.6%;box-shadow:0 0 0 1.5px rgba(255,255,255,.08) inset,0 50px 110px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.28)}
.phone .scr{container-type:inline-size;aspect-ratio:1170/2532;border-radius:11.5%/5.3%;overflow:hidden;display:flex;flex-direction:column;position:relative}
.phone .sb{flex:none;height:9cqw;display:flex;align-items:center;justify-content:space-between;padding:.6cqw 6.5cqw 0 7.5cqw;position:relative;font:600 3.6cqw/1 "Plus Jakarta Sans",system-ui,sans-serif}
.phone .sb i{position:absolute;left:50%;top:50%;width:3.6cqw;height:3.6cqw;margin:-1.5cqw 0 0 -1.8cqw;border-radius:50%;background:#050504}
.phone .sb span{display:flex;gap:1.4cqw;align-items:center}
.phone .sb svg{height:3cqw;width:auto}
.phone .app{flex:1;overflow:hidden;position:relative;min-height:0}
.phone .app>img{width:100%}
.phone .ph-nav{position:absolute;left:0;right:0;bottom:0;height:16.4cqw;overflow:hidden}
.phone .ph-nav img{position:absolute;left:0;bottom:0;width:100%}
.phone .ph-esf{position:absolute;left:42.75cqw;bottom:6.6cqw;width:14.5cqw;height:14.5cqw;border-radius:50%;overflow:hidden}
.phone .ph-esf img{position:absolute;left:-42.75cqw;top:-195.3cqw;width:100cqw;max-width:none}
.phone .nb{flex:none;height:6cqw;display:flex;align-items:center;justify-content:center}
.phone .nb b{width:28cqw;height:1.2cqw;border-radius:1cqw}

/* Entradas con el scroll (sección 5 de la skill) */
[data-reveal]{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none;filter:none}
/* Título del hero: línea por línea con máscara */
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.in .mask>span,.mask.in>span{transform:none}

/* Botón primario con brillo que cruza en hover */
.shine{position:relative;overflow:hidden;isolation:isolate}
.shine::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:transform .7s cubic-bezier(.16,1,.3,1);z-index:-1}
.shine:hover::after{transform:translateX(120%) skewX(-20deg)}
.shine:active{transform:scale(.98)}

/* Grano (2.3) */
.grain{pointer-events:none;position:fixed;inset:0;z-index:60;width:100%;height:100%;mix-blend-mode:overlay}

/* Nota de prototipo */
.proto-note{position:fixed;left:12px;bottom:12px;z-index:70;font:600 12px/1.3 system-ui;padding:8px 12px;border-radius:999px;background:rgba(20,17,14,.85);color:#E8C48E;border:1px solid rgba(232,196,142,.3);backdrop-filter:blur(8px)}

@media (prefers-reduced-motion:reduce){
  [data-reveal],.mask>span{transition:opacity .4s;transform:none!important;filter:none!important}
  .orbs span,.ring,.sweep{animation:none!important}
}