/* Presentación «Portal de clientes MTC» (5 diapositivas). Se carga después de styles.css y react-effects.css. */

/* ===== Celulares: PNG transparentes de React Bits · Center Stage con capturas reales ===== */
.phone-mock{position:absolute;height:auto;filter:drop-shadow(0 1.6cqw 2.6cqw #000c);pointer-events:none}
.slide.active .phone-mock{animation:phone-in 1.2s cubic-bezier(.22,.61,.36,1) .35s both}
.slide.active .phone-mock--back{animation-delay:.6s}
@keyframes phone-in{from{opacity:0;transform:translateY(4cqw) scale(.96)}to{opacity:1;transform:none}}

/* 01 · Portada: celular completo sobre la carretera */
.phone-mock--cover{right:6%;top:6%;height:90%}
.portal-cover .redline{width:8cqw}

/* Texto común */
.portal-copy{position:absolute;left:6.2%;top:15%;width:40%;z-index:2}
.portal-copy p{margin-top:1.1cqw;max-width:34cqw}

/* 02 · Inicia sesión */
.phone-mock--right{right:10%;top:13%;height:83%}
.parts-stack.portal-steps{top:47%;width:36cqw}
.portal-steps .parts-row strong{min-width:3.4cqw;color:#f19ca4}
.portal-steps .parts-row span{font-size:1cqw;line-height:1.4}

/* 03 y 04 · dos celulares encimados */
.phone-mock--front{right:16%;top:15%;height:81%;z-index:2}
.phone-mock--back{right:2.5%;top:13%;height:72%;z-index:1;opacity:.92}
.portal-list{position:absolute;left:6.2%;top:42%;width:36cqw;margin:0}
.portal-tools .portal-list div{background:#182128d9}

.alta-steps{position:absolute;left:6.2%;top:47%;display:grid;grid-template-columns:repeat(5,auto);gap:.6cqw;z-index:2}
.alta-steps div{display:flex;flex-direction:column;gap:.35cqw;padding:.85cqw 1cqw;border:1px solid #ffffff2b;border-radius:.6cqw;background:#182128d9;backdrop-filter:blur(6px);font:700 .95cqw Montserrat,Arial,sans-serif}
.alta-steps b{font-size:.75cqw;color:#ed8993;letter-spacing:.1em}
.alta-tip{position:absolute;left:6.2%;top:62%;width:36cqw;font-size:.9cqw;color:#c9cfd2;padding-left:.9cqw;border-left:.22cqw solid #c92b40}
.alta-tip b{color:#f19ca4}
.slide.active .alta-steps div{animation:phone-in .7s ease both}
.slide.active .alta-steps div:nth-child(2){animation-delay:.1s}
.slide.active .alta-steps div:nth-child(3){animation-delay:.2s}
.slide.active .alta-steps div:nth-child(4){animation-delay:.3s}
.slide.active .alta-steps div:nth-child(5){animation-delay:.4s}

/* 02 y 03 · Gafete de cliente estático junto a los celulares (reusa .lny-* de react-effects.css) */
.client-card{--s:1;position:absolute;width:calc(15cqw * var(--s));height:calc(21cqw * var(--s));z-index:3;pointer-events:none;transform:rotate(var(--rot,-6deg));transform-origin:50% 0}
.client-card .lny-name{font-size:calc(.95cqw * var(--s));line-height:1.15;text-align:center;padding:0 .4cqw}
.client-card .lny-tag{color:#4b4f56}
.client-card::before{content:"";position:absolute;left:50%;bottom:100%;width:1.3cqw;height:40cqw;transform:translateX(-50%);background:linear-gradient(90deg,#3d0a12,#8e1f2d 30%,#a52a3a 50%,#8e1f2d 70%,#3d0a12);box-shadow:0 0 1cqw #0008}
.client-card--login{--s:.95;--rot:-7deg;right:35%;top:24%}
.client-card--tools{--s:.85;--rot:6deg;right:37%;top:30%}
.slide.active .client-card{animation:card-swing 1.6s cubic-bezier(.22,.61,.36,1) .5s both}
@keyframes card-swing{0%{opacity:0;transform:translateY(-6cqw) rotate(calc(var(--rot) * -2.4))}55%{opacity:1;transform:rotate(calc(var(--rot) * 1.5))}80%{transform:rotate(calc(var(--rot) * .7))}100%{transform:rotate(var(--rot))}}

/* 05 · Gafetes de clientes con LightRays de fondo */
.close-rays{position:absolute;inset:0;z-index:0;pointer-events:none}
.close-rays>*{position:absolute;inset:0}
.portal-close .lanyard-host{z-index:1}
.portal-close .lanyard-copy{z-index:3}
.portal-close .lny-name{font-size:calc(.95cqw * var(--s));line-height:1.15;text-align:center;padding:0 .4cqw}

.reduce-motion .phone-mock,.reduce-motion .alta-steps div,.reduce-motion .client-card{animation:none}
@media (prefers-reduced-motion:reduce){.phone-mock,.alta-steps div,.client-card{animation:none!important}}