/* La disposición y los tokens son los de widget/index.html y vista-previa.html.
   Sólo la placa y su perspectiva pertenecen a la presentación del sitio. */
.recorrido{display:grid;grid-template-columns:44% 54%;column-gap:2%;overflow:clip}
.escenario{grid-column:2;grid-row:1;align-self:start;width:100%;margin:0;top:35px;min-height:0;height:calc(100svh - 70px);max-height:950px}
.relato{grid-column:1;grid-row:1}.escena{width:100%}
.objeto{width:300px;font:12.5px/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;color:var(--texto)}
/* Rasterizar al doble evita ampliar una textura pequeña con la perspectiva. */
@media(min-width:801px){.objeto{zoom:2;flex-shrink:0}}
.placa{border:1px solid var(--borde);border-radius:14px;color:var(--texto);background:linear-gradient(180deg,var(--fondo-a),var(--fondo-b));box-shadow:inset 0 1px 0 var(--brillo),2px 3px 0 var(--fondo-b),4px 6px 0 var(--fondo-b),20px 30px 50px rgb(20 35 28 / .2);text-shadow:var(--sombra-texto)}
.widget{padding:0 5px 6px;font:12.5px/1.35 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif}
.widget-cabecera{padding:12px 8px 8px;gap:7px}.widget-cabecera h3{font:600 13.5px/1 "Segoe UI Variable Display","Segoe UI",sans-serif}
.cuenta{font-size:11px;line-height:18px;height:18px;min-width:18px;padding:0 6px;color:var(--mal);background:color-mix(in srgb,var(--mal) 20%,transparent)}
.fecha-demo{color:var(--tenue);font-size:11px}.refrescar{color:var(--tenue);font-size:17px}
.grupo{justify-content:flex-start;gap:8px;color:var(--suave);padding:9px 9px 3px;font-size:10px;font-weight:600}.grupo:after{content:'';flex:1;height:1px;background:var(--borde)}.grupo>span{display:none}.grupo-tardia{color:var(--mal)}
.tarea{grid-template-columns:8px minmax(0,1fr) auto;gap:9px;padding:7px 8px 7px 9px}.tarea:hover,.tarea.seleccionada{background:var(--hover)}.tarea strong{font-size:12.5px;font-weight:500}.tarea small{font-size:11px;color:var(--tenue);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vence{font-size:11px;padding:2px 7px;background:var(--neutro);color:var(--suave)}.vence.urgente{color:var(--mal);background:color-mix(in srgb,var(--mal) 16%,transparent)}
.vista-previa{width:272px;left:-284px;top:32px;padding:0;background:color-mix(in srgb,var(--fondo-a) 97%,transparent);color:var(--texto);border:1px solid var(--borde);border-radius:14px;box-shadow:var(--sombra);font:12.5px/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;overflow:hidden;transform:translate3d(6px,0,10px);transition:opacity .18s ease-out,transform .22s cubic-bezier(.2,.8,.2,1)}
.vista-previa.visible{transform:translate3d(0,0,10px)}.vista-previa .franja{height:3px;background:var(--color-curso,#7d9cf0)}.vista-previa .cuerpo{padding:12px 14px}.vista-previa .curso{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-curso,#7d9cf0)}
.vista-previa h4{margin:3px 0 8px;font:600 15px/1.25 "Segoe UI Variable Display","Segoe UI",sans-serif;letter-spacing:0}
.vista-previa .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}.vista-previa .chip{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--pieza);color:var(--suave)}.vista-previa .chip.mal{color:var(--mal);background:color-mix(in srgb,var(--mal) 14%,transparent)}.vista-previa .chip.pronto{color:var(--pronto);background:color-mix(in srgb,var(--pronto) 14%,transparent)}.vista-previa .chip.bien{color:var(--bien);background:color-mix(in srgb,var(--bien) 13%,transparent)}
.vista-previa .seccion{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);margin:12px 0 6px}.vista-previa .instrucciones{white-space:pre-line;color:var(--suave)}
.vista-previa .archivo{display:block;padding:0;border-radius:10px;background:var(--pieza);overflow:hidden;border:1px solid transparent}.vista-previa .muestra{border-bottom:1px solid var(--linea)}.vista-previa .muestra img{display:block;width:100%;height:118px;object-fit:cover;object-position:top}
.vista-previa .muestra .zip{padding:7px 10px;font:11px/1.6 "Cascadia Mono",Consolas,monospace;color:var(--suave);background:var(--codigo)}.vista-previa .zip span{color:var(--tenue)}.vista-previa .muestra .texto{padding:8px 10px;color:var(--suave);font-size:11.5px;white-space:pre-line;background:var(--codigo)}
.vista-previa .fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 10px}.vista-previa .tipo{font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:2px 5px;border-radius:4px;color:#fff;background:var(--color-tipo,#d9473b)}.vista-previa .nombre{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vista-previa .peso{color:var(--tenue);font-size:10.5px}.vista-previa .bajar{font-size:16px;color:var(--tenue)}
.vista-previa .pie{border-top:1px solid var(--linea);padding:9px 14px;display:flex;justify-content:flex-end}.vista-previa .abrir{font-size:12px;font-weight:600;color:var(--texto);background:var(--pieza);border-radius:7px;padding:5px 10px}.cerrar-vista{position:absolute;top:6px;right:6px;width:24px;height:24px;background:var(--fondo-a);color:var(--suave);border:0;border-radius:5px;cursor:pointer;font-size:17px;opacity:0}.vista-previa:hover .cerrar-vista,.cerrar-vista:focus-visible{opacity:1}
.personalizacion{position:absolute;left:50%;bottom:94px;width:310px;transform:translateX(-50%);font-family:Manrope,"Segoe UI",sans-serif;z-index:5;gap:12px;padding:14px 18px;box-shadow:0 8px 24px rgb(20 35 28 / .08)}.personalizacion>span{font-size:11px;color:oklch(22% .016 160)}.temas{gap:6px}.muestra-tema{position:relative;width:36px;height:36px;flex-shrink:0;border:6px solid oklch(99% .006 160)}.muestra-tema[aria-pressed=true]{outline:2px solid var(--verde);outline-offset:0}.muestra-tema.medianoche{background:#232327}.muestra-tema.papel{background:#f8f1e2}.muestra-tema.bosque{background:#1a2a22}
.acciones{flex-direction:row;flex-wrap:wrap;gap:12px}.boton-secundario{border:1px solid var(--borde);background:transparent}.boton-secundario:hover{background:oklch(91% .025 163)}.acciones .enlace-recorrido{flex-basis:100%;padding-top:4px}.es-mac .descarga-mac{order:-1}
@media(min-width:801px) and (max-height:740px){.objeto{width:285px}.personalizacion{bottom:80px}.pie-escena{bottom:1%}.escena{padding-block:55px}.hero{padding-top:35px}h1{font-size:clamp(58px,5.8vw,78px)}.hero .entrada{margin-bottom:18px}.invitacion{margin-top:24px}}
@media(max-width:1100px){.vista-previa{left:-70px;top:60px}.escenario{top:20px;height:calc(100svh - 40px)}}
@media(max-width:800px){.recorrido{display:flex;overflow:visible}.escenario{width:100%;height:430px;top:auto;min-height:0;max-height:none;overflow:clip}.relato{display:contents}.objeto{width:300px}.escena-mobile{height:450px;overflow:clip}.escena-mobile .objeto{margin-left:-150px;transform:translateY(-50%) rotateY(6deg) rotateZ(-2deg) scale(1.05)}.escena-mobile .vista-previa{left:24px;top:25px;width:250px;transform:translateZ(10px)}.escena-mobile[data-demostracion="1"]{height:530px}.escena-mobile[data-demostracion="3"]{height:550px}.personalizacion,.escena-mobile .personalizacion{left:50%;bottom:12px;width:310px;transform:translateX(-50%)}.escenario .personalizacion{bottom:75px}.pie-escena{bottom:0}.escena-mobile .notificacion{top:-55px}.acciones{gap:10px}.boton{font-size:11px;padding:14px 18px;gap:18px}}
@media(max-width:380px){.objeto{width:265px}.escena-mobile .objeto{margin-left:-132.5px;transform:translateY(-50%) rotateY(3deg) rotateZ(-1deg)}.escena-mobile .vista-previa{width:235px;left:15px}.personalizacion,.escena-mobile .personalizacion{width:280px;padding-inline:12px}.personalizacion>span{font-size:10px}.muestra-tema{width:32px;height:32px;border-width:5px}.tarea strong{font-size:11px}.tarea small{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){.objeto{transform:none!important}.vista-previa,.vista-previa.visible{transform:none}.escena-mobile .objeto{transform:translateY(-50%)!important}}