.demo-navegador{display:flex;flex-direction:column;height:var(--demo-marco-alto)}.demo-navegador__barra{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;height:var(--demo-barra-alto);padding:0 var(--sp-3);background:var(--c-white);border-bottom:1px solid var(--c-border)}.demo-navegador__puntos{position:absolute;left:var(--sp-3);display:flex;gap:var(--sp-2)}.demo-navegador__puntos span{width:var(--demo-mac-boton);height:var(--demo-mac-boton);border-radius:50%;background:var(--demo-mac-cerrar);box-shadow:inset 0 0 0 .5px var(--demo-mac-cerrar-borde)}.demo-navegador__puntos span:nth-child(2){background:var(--demo-mac-minimizar);box-shadow:inset 0 0 0 .5px var(--demo-mac-minimizar-borde)}.demo-navegador__puntos span:nth-child(3){background:var(--demo-mac-agrandar);box-shadow:inset 0 0 0 .5px var(--demo-mac-agrandar-borde)}.demo-navegador__direccion{display:flex;align-items:center;gap:var(--sp-1-5);height:22px;padding:0 var(--sp-4);border-radius:var(--rd-pill);background:var(--c-bg);font-size:var(--font-xs);font-weight:500;color:var(--c-gray)}.demo-navegador__candado{width:9px;color:var(--c-green700)}.demo-navegador__pantalla{position:relative;flex:1 1;overflow:hidden}.demo-navegador__vista{position:absolute;top:0;left:0;width:var(--demo-ancho);height:var(--demo-alto);border:0;transform-origin:0 0;opacity:0;transition:opacity var(--duration-slow) ease;will-change:transform}.demo-navegador__vista.es-lista{opacity:1}.demo-telefono{position:relative;box-sizing:content-box;width:calc(var(--demo-telefono-ancho) * var(--demo-escala));height:calc((var(--demo-telefono-alto) + var(--demo-telefono-estado) + var(--demo-telefono-inicio)) * var(--demo-escala));margin:0 auto;padding:var(--demo-telefono-bisel);border:var(--demo-telefono-canto) solid transparent;border-radius:var(--rd-telefono);background:linear-gradient(var(--demo-telefono-vidrio),var(--demo-telefono-vidrio)) padding-box,var(--demo-telefono-metal-canto) border-box;box-shadow:inset 0 0 0 1px var(--demo-telefono-brillo);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.demo-telefono:after,.demo-telefono:before{content:"";position:absolute;width:var(--demo-telefono-canto);background:var(--demo-telefono-metal)}.demo-telefono:before{left:calc(var(--demo-telefono-canto) * -2);top:21%;height:7%;border-radius:2px 0 0 2px;box-shadow:0 calc(var(--demo-telefono-alto) * var(--demo-escala) * .1) 0 var(--demo-telefono-metal)}.demo-telefono:after{right:calc(var(--demo-telefono-canto) * -2);top:26%;height:11%;border-radius:0 2px 2px 0}.demo-telefono__pantalla{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--rd-telefono) - var(--demo-telefono-bisel) - var(--demo-telefono-canto));background:var(--demo-telefono-vidrio)}.demo-telefono__estado{position:absolute;top:0;left:0;right:0;z-index:1;height:calc(var(--demo-telefono-estado) * var(--demo-escala));display:flex;align-items:center;justify-content:space-between;padding:0 calc(28px * var(--demo-escala)) 0 calc(38px * var(--demo-escala));background:var(--demo-telefono-estado-bg-cargando);color:var(--demo-telefono-estado-texto-cargando);transition:color var(--duration-slow) ease;font-family:var(--font-sans);font-size:calc(var(--font-base) * var(--demo-escala));font-weight:600;letter-spacing:.01em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.demo-telefono__estado:before{content:"";position:absolute;inset:0;background:var(--demo-telefono-estado-bg);opacity:0;transition:opacity var(--duration-slow) ease}.con-demo .demo-telefono__estado{color:var(--demo-telefono-estado-texto)}.con-demo .demo-telefono__estado:before{opacity:1}.demo-telefono__estado:after,.demo-telefono__inicio:after{content:"";position:absolute;inset:0;pointer-events:none;transition:background-color var(--duration-fast) linear}.demo-telefono__estado:after{background-color:var(--demo-telefono-velo-arriba,transparent)}.demo-telefono__inicio:after{background-color:var(--demo-telefono-velo-abajo,transparent)}.demo-telefono__iconos{display:flex;align-items:center;gap:calc(5px * var(--demo-escala))}.demo-telefono__iconos svg{display:block;height:calc(11px * var(--demo-escala));width:auto;fill:currentColor}.demo-telefono__isla{position:absolute;top:calc(10px * var(--demo-escala));left:50%;z-index:2;width:calc(112px * var(--demo-escala));height:calc(30px * var(--demo-escala));transform:translateX(-50%);border-radius:999px;background:var(--demo-telefono-vidrio)}.demo-telefono__inicio{position:absolute;left:0;right:0;bottom:0;z-index:2;height:calc((var(--demo-telefono-inicio) + 1px) * var(--demo-escala));background:var(--c-white)}.demo-telefono__estado>*,.demo-telefono__rayita{position:relative;z-index:1}.demo-telefono__rayita{position:absolute;bottom:calc(8px * var(--demo-escala));left:50%;width:calc(134px * var(--demo-escala));height:calc(5px * var(--demo-escala));transform:translateX(-50%);border-radius:999px;background:var(--demo-telefono-rayita)}.demo-telefono__pantalla .demo-cargando{top:calc(var(--demo-telefono-estado) * var(--demo-escala))}.demo-cargando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--c-white);transition:opacity var(--duration-slow) ease}.demo-cargando .spinner-ring-container{margin:0}.demo-cargando.es-oculta{opacity:0}.demo-cargando.es-oculta *{animation-play-state:paused}.demo-telefono__vista{position:absolute;top:calc(var(--demo-telefono-estado) * var(--demo-escala));left:0;width:var(--demo-telefono-ancho);height:var(--demo-telefono-alto);border:0;transform:scale(var(--demo-escala));transform-origin:0 0;opacity:0;transition:opacity var(--duration-slow) ease}.demo-telefono__vista.es-lista{opacity:1}