.demo-real{background:#f7f5f0;color:#0d2024;border-radius:12px;border:1px solid #0d202414;overflow:hidden;font-family:var(--font-jakarta),sans-serif;text-align:left}.demo-real-header{min-height:80px;display:flex;align-items:center;gap:32px;padding:16px 24px;border-bottom:1px solid #0d202414;background:#f7f5f0d9}.demo-real-logo{height:28px;width:auto;max-width:160px;-o-object-fit:contain;object-fit:contain}.demo-real-header nav{display:flex;align-items:center;gap:24px;flex:1}.demo-real-header nav button,.demo-real-header nav>span{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#0d2024;padding:8px}.demo-real-header button:focus-visible{outline:2px solid #238080;outline-offset:3px}.demo-real-usuario{border:1.5px solid #2eaaab;color:#238080;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600}.demo-real-menu{position:relative}.demo-real-dropdown{position:absolute;top:100%;left:0;z-index:10;background:white;border:1px solid #0d202414;box-shadow:0 8px 24px #0d202414;border-radius:10px;padding:8px;min-width:180px}.demo-real-dropdown button{width:100%}.demo-real-dropdown button:hover{background:#2eaaab1a;border-radius:6px}.demo-real-body{min-height:580px}.demo-real-body:has(.demo-recorrido)>div:first-child{min-height:0}.demo-recorrido{padding:0 24px 24px}.demo-recorrido h2{font-size:18px;font-weight:700}.demo-recorrido>p{margin:8px 0 16px;font-size:14px;color:#475b5e}.demo-recorrido>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-recorrido button{display:grid;gap:8px;padding:18px;border:1px solid #2eaaab66;border-radius:12px;background:white;text-align:left}.demo-recorrido button strong{color:#238080}.demo-recorrido button span{font-size:13px;color:#475b5e}.demo-recorrido button:hover{background:#edf7f5}.demo-recorrido button:focus-visible{outline:2px solid #238080;outline-offset:3px}@media(max-width:600px){.demo-recorrido>div{grid-template-columns:1fr}}.demo-real-preview{border-radius:0}.demo-real-preview .demo-real-header{min-height:48px;gap:12px;padding:10px 16px}.demo-real-preview .demo-real-logo{height:20px;max-width:120px}.demo-real-preview .demo-real-header nav{gap:8px}.demo-real-preview .demo-real-header nav>span{font-size:11px;padding:0}.demo-real-preview .demo-real-usuario{font-size:10px;padding:5px 8px}.demo-real-preview .demo-real-body{min-height:0}.demo-real-preview .demo-real-body>div{min-height:0;padding:16px}.demo-real-preview .demo-real-body>div>.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.demo-real-preview .demo-real-body>div>.grid>div{padding:12px}.demo-real-preview .demo-real-body .grid .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 8px}.demo-real-preview .demo-real-body .grid .grid>div{min-width:0}.demo-real-preview h1{font-size:16px;line-height:22px;letter-spacing:normal;margin:0;max-width:none;color:#0d2024;font-weight:700}.demo-real-preview h2{font-size:14px;line-height:20px}.demo-real-preview .demo-real-body p.text-sm{font-size:10px;line-height:14px}.demo-real-preview .demo-real-body p.text-base{font-size:11px;line-height:16px;overflow-wrap:anywhere}.demo-real-preview .demo-real-body .mb-3{margin-bottom:10px}.demo-real-preview .demo-real-body .space-y-2>:not([hidden])~:not([hidden]){margin-top:8px}.demo-real-preview .demo-real-body .space-y-4>:not([hidden])~:not([hidden]){margin-top:12px}.demo-preview-link{display:block;color:inherit;text-decoration:none}.demo-preview-link:focus-visible{outline:3px solid #2eaaab;outline-offset:4px}.demo-page{min-height:100vh;background:#f7f5f0;padding:28px}.demo-page-top{max-width:1400px;margin:0 auto 20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;color:#0d2024}.demo-page-top a{color:#167172;font-weight:600}.demo-page-top p{font-size:13px;margin-top:6px}.demo-page>.demo-real{max-width:1400px;margin:auto}@media(max-width:600px){.demo-page{padding:12px}.demo-real-header{padding:12px;gap:12px;flex-wrap:wrap}.demo-real-header nav{gap:8px}.demo-real-usuario{font-size:11px}.demo-real-preview .demo-real-usuario{display:none}}@media(max-width:380px){.demo-real-preview .demo-real-body>div{padding:10px}.demo-real-preview .demo-real-body>div>.grid{grid-template-columns:1fr}}