/* ArepaNet — versión de ordenador (escritorio.js). Solo se aplica con html.escaparate. */

/* La app dentro del teléfono simulado: sin barras de desplazamiento, como en un móvil. */
html.incrustada{scrollbar-width:none}
html.incrustada::-webkit-scrollbar{display:none}
html.incrustada body{background:#fff}

html.escaparate #app{display:none}
html.escaparate body{background:#FFF9EC;min-height:100%}

.esc{--crema:#FFF9EC;max-width:1320px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,540px);gap:64px;align-items:start}

/* ---------- izquierda: invitación e instrucciones ---------- */
.esc-info{padding:44px 0 36px;max-width:600px}
.esc-marca{display:flex;align-items:center;gap:12px}
.esc-marca img{border-radius:11px;box-shadow:0 2px 8px rgba(16,33,63,.12)}
.esc-marca .logo{font-size:30px}
.esc-antetitulo{margin:48px 0 0;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.esc-titulo{margin:10px 0 0;font-family:var(--titulo);font-weight:800;font-size:clamp(42px,4.4vw,62px);line-height:1.02;letter-spacing:-.035em;color:var(--tinta);text-wrap:balance}
.esc-intro{margin:18px 0 0;font-size:18px;line-height:1.55;color:var(--tinta-2);max-width:34em}

.esc-qr{margin-top:30px;display:flex;align-items:center;gap:22px;padding:18px 22px 18px 18px;background:#fff;border:1px solid var(--linea);border-radius:20px;box-shadow:0 6px 24px rgba(16,33,63,.06)}
.esc-qr img{flex:none;width:132px;height:132px;padding:8px;border-radius:12px;background:#fff;outline:1px solid var(--linea)}
.esc-qr b{display:block;font-size:17px;color:var(--tinta)}
.esc-qr span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--gris)}
.esc-qr span b{display:inline;font-size:inherit}

.esc-sub{margin:40px 0 14px;font-family:var(--titulo);font-weight:700;font-size:22px;letter-spacing:-.01em}
.esc-pestanas{display:flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--linea);border-radius:999px;width:max-content;max-width:100%}
.esc-pestanas button{display:flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:600;color:var(--gris);cursor:pointer}
.esc-pestanas button svg{width:18px;height:18px}
.esc-pestanas button:hover{color:var(--tinta)}
.esc-pestanas button[aria-selected="true"]{background:var(--tinta);color:#fff}
.esc-panel{margin-top:16px}
.esc-panel .btn.prim{margin-bottom:14px;padding:0 18px;width:max-content}
.esc-panel .pasos-inst li{background:#fff}

.esc-nota{margin:6px 0 0;font-size:15px;color:var(--gris)}
.esc-nota a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.esc-pie{margin-top:34px;padding-top:18px;border-top:1px solid #EFE6CF;font-size:13px;line-height:1.8;color:var(--gris)}
.esc-pie a{color:var(--gris)}
.esc-pie a:hover{color:var(--tinta)}

/* ---------- derecha: el teléfono ---------- */
.esc-escena{position:sticky;top:0;height:100vh;min-height:640px;padding:24px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.esc-escena::before{content:"";position:absolute;inset:24px 0;border-radius:40px;background:radial-gradient(120% 80% at 50% 0%,#2349B5 0%,#10213F 70%);z-index:-1}
.esc-escena{isolation:isolate}

.esc-movil{width:414px;height:min(870px,calc(100vh - 136px));min-height:540px;padding:12px;border-radius:58px;background:#0B1222;box-shadow:0 0 0 2px #2A3550 inset,0 30px 60px rgba(4,10,28,.45),0 8px 18px rgba(4,10,28,.3)}
.esc-pantalla{height:100%;border-radius:46px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.esc-barra{flex:none;height:48px;padding:0 30px 0 34px;display:flex;align-items:center;justify-content:space-between;background:#fff;color:#0B1222;font-size:15px;font-weight:700;position:relative}
.esc-isla{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:112px;height:30px;border-radius:20px;background:#0B1222}
.esc-estado{display:flex;align-items:center;gap:6px}
.esc-estado svg{height:12px;width:auto;fill:currentColor;stroke:none}
.esc-estado svg:last-child rect:first-child{stroke:currentColor;stroke-width:1;fill:none;opacity:.5}
.esc-pantalla iframe{flex:1;width:100%;min-height:0;border:0;display:block;background:#fff}
.esc-home{flex:none;height:24px;display:flex;align-items:center;justify-content:center;background:#fff}
.esc-home i{width:132px;height:5px;border-radius:3px;background:#0B1222}

.esc-pista{margin:0;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:600}
.esc-pista svg{width:20px;height:20px;color:var(--maiz)}

/* aviso flotante (p. ej. al cancelar la instalación) */
html.escaparate #esc-aviso{bottom:32px}

/* pantallas más justas */
@media (max-width:1140px){.esc{padding:0 32px;gap:36px;grid-template-columns:minmax(0,1fr) 450px}}
@media (max-height:760px){.esc-pista{display:none}.esc-movil{height:calc(100vh - 88px)}}
/* si se estrecha la ventana después de abrirla: todo en una columna */
@media (max-width:999px){
  .esc{grid-template-columns:1fr;padding:0 20px;gap:0}
  .esc-info{max-width:none}
  .esc-escena{position:relative;height:auto;min-height:0;padding:40px 0 48px}
  .esc-movil{height:760px}
}
@media (prefers-reduced-motion:reduce){html.escaparate *{transition:none!important}}