.demo-app,.demo-portada{--demo-tinta:34 28 23;--demo-sobre-tinta:244 237 227;--demo-barra-alto:52px;--demo-pie-alto:64px}@media (min-width:1024px){.demo-app{--demo-barra-alto:56px}}html:has(.demo-app) body,html:has(.demo-portada) body{background:rgb(var(--c-cream-warm))}.demo-app{min-height:100svh;background:rgb(var(--c-cream-warm));color:rgb(var(--c-ink))}.demo-marco-borde{position:fixed;top:env(safe-area-inset-top);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);border:3px solid rgb(var(--c-primary));border-radius:18px;box-shadow:0 0 0 40px rgb(var(--c-cream-warm));pointer-events:none;z-index:80}.demo-barra{position:sticky;top:0;z-index:50;gap:12px;height:calc(var(--demo-barra-alto) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0 16px;background:rgb(var(--demo-tinta));color:rgb(var(--demo-sobre-tinta));border-radius:18px 18px 0 0}.demo-barra,.demo-barra-marca{display:flex;align-items:center}.demo-barra-marca{gap:8px;flex-shrink:0}.demo-barra-logo{width:84px;height:auto}.demo-pildora{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:rgb(var(--c-secondary));color:rgb(var(--demo-tinta));font-family:var(--font-dm-mono,ui-monospace),ui-monospace,monospace;font-size:11px;font-weight:800;letter-spacing:.08em}.demo-barra-centro,.demo-barra-derecha{display:none}.demo-barra-movil{display:flex;align-items:center;gap:8px;margin-left:auto}@media (min-width:1024px){.demo-barra-logo{width:96px}.demo-barra-centro{display:flex;align-items:center;gap:10px;margin:0 auto}.demo-barra-derecha{display:flex;align-items:center;gap:8px}.demo-barra-movil{display:none}}.demo-barra-boton,.demo-barra-icono,.demo-chip-plan{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;border:1px solid rgb(var(--demo-sobre-tinta)/.25);background:transparent;color:rgb(var(--demo-sobre-tinta));font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}.demo-barra-icono{width:40px;padding:0}.demo-chip-plan{height:36px;border-color:transparent}.demo-barra-boton:hover,.demo-barra-icono:hover,.demo-chip-plan,.demo-chip-plan:hover,.demo-segmentado{background:rgb(var(--demo-sobre-tinta)/.12)}.demo-segmentado{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:40px;border-radius:999px;overflow:hidden}.demo-segmento{height:40px;min-width:44px;padding:0 12px;border:0;background:transparent;color:rgb(var(--demo-sobre-tinta));font-weight:700;font-size:13px;line-height:1.05;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap;transition:background-color .2s ease,color .2s ease}.demo-segmento small{font-size:11px;font-weight:600;color:rgb(var(--demo-sobre-tinta)/.8)}.demo-segmento[aria-checked=true]{background:rgb(var(--c-primary-dark));color:#fff;border-radius:999px}.demo-segmento[aria-checked=true] small{color:#fff}@media (min-width:1024px){.demo-segmentado-plan .demo-segmento{min-width:84px}}.demo-segmentado-hoja{height:48px;background:rgb(var(--c-cream-dark))}.demo-segmentado-hoja .demo-segmento{height:48px;color:rgb(var(--c-ink));font-size:14px}.demo-segmentado-hoja .demo-segmento small{color:rgb(var(--c-ink-muted))}.demo-cta,.demo-segmentado-hoja .demo-segmento[aria-checked=true],.demo-segmentado-hoja .demo-segmento[aria-checked=true] small{color:#fff}.demo-cta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;flex-shrink:0;border-radius:999px;background:rgb(var(--c-primary-dark));font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}.demo-cta:hover{filter:brightness(1.08)}.demo-barra :is(button,a):focus-visible{outline:3px solid rgb(var(--demo-sobre-tinta));outline-offset:2px}.demo-app :is(.demo-segmentado-hoja .demo-segmento,.demo-cta,.demo-seccion,.demo-bloque-boton,.demo-guia-boton,.demo-guia-resumen,.demo-guia-lanzador,.demo-hoja button):focus-visible{outline:3px solid rgb(var(--c-ink));outline-offset:2px}.demo-hoja-fondo{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;background:rgb(0 0 0/.4)}.demo-hoja{width:100%;max-height:85svh;overflow-y:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:rgb(var(--c-surface));color:rgb(var(--c-ink))}.demo-hoja-encabezado{display:flex;align-items:center;justify-content:space-between}.demo-hoja-encabezado h2{margin:0;font-size:17px;font-weight:800}.demo-hoja-cerrar{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:rgb(var(--c-ink))}.demo-hoja-etiqueta{margin:14px 0 6px;font-size:13px;font-weight:700;color:rgb(var(--c-ink-muted))}.demo-hoja-secciones{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.demo-hoja-secciones button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgb(var(--c-ink-border));background:rgb(var(--c-surface));color:rgb(var(--c-ink));font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px}.demo-hoja-secciones button[aria-current=page]{background:rgb(var(--c-ink));border-color:rgb(var(--c-ink));color:rgb(var(--c-background))}.demo-hoja-reiniciar{margin-top:16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:rgb(var(--c-ink));font-weight:700;font-size:14px}.demo-escenario{min-width:0}.demo-contenido{min-height:calc(100svh - var(--demo-barra-alto))}.demo-cta-pie,.demo-secciones{display:none}@media (min-width:1024px){.demo-cuerpo{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start;padding:24px}.demo-app[data-guia=cerrada] .demo-cuerpo{grid-template-columns:56px minmax(0,1fr)}.demo-lateral{position:sticky;top:calc(var(--demo-barra-alto) + 24px);max-height:calc(100svh - var(--demo-barra-alto) - 48px);overflow-y:auto;display:flex;flex-direction:column;gap:20px}.demo-secciones{display:block}.demo-app[data-guia=cerrada] .demo-secciones{display:none}.demo-contenido{min-height:0}}.demo-secciones-compacta{display:none}@media (min-width:1024px){.demo-app[data-guia=cerrada] .demo-secciones-compacta{display:flex;flex-direction:column;gap:6px}}.demo-seccion-icono{width:56px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;background:transparent;color:rgb(var(--c-ink));cursor:pointer}.demo-seccion-icono:hover{background:rgb(var(--c-cream-dark))}.demo-seccion-icono[aria-current=page]{background:rgb(var(--c-surface));color:rgb(var(--c-primary-texto))}.demo-seccion-icono:focus-visible{outline:3px solid rgb(var(--c-ink));outline-offset:2px}.demo-secciones-titulo{margin:0 0 6px 12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--c-ink-muted))}.demo-secciones ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.demo-seccion{width:100%;min-height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:rgb(var(--c-ink));font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.demo-seccion:hover{background:rgb(var(--c-cream-dark))}.demo-seccion[aria-current=page]{background:rgb(var(--c-surface));color:rgb(var(--c-primary-texto))}@media (max-width:1023px){.demo-cuerpo{padding-bottom:calc(var(--demo-pie-alto) + env(safe-area-inset-bottom))}.demo-lateral{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:10px;height:calc(var(--demo-pie-alto) + env(safe-area-inset-bottom));padding:0 14px env(safe-area-inset-bottom);background:rgb(var(--c-surface));box-shadow:0 -1px 0 rgb(var(--c-ink-border));border-radius:0 0 18px 18px}.demo-cta-pie{display:inline-flex;height:44px}}@media (min-width:1024px){.demo-celular{width:-moz-max-content;width:max-content;margin:0 auto;padding:12px;border-radius:52px;background:rgb(var(--demo-tinta));box-shadow:0 30px 60px rgb(0 0 0/.18)}.demo-celular-pantalla{display:block;width:390px;height:min(844px,calc(100svh - var(--demo-barra-alto) - 72px));border:0;border-radius:40px;background:rgb(var(--c-cream))}.demo-navegador{max-width:1100px;margin:0 auto;border-radius:16px;overflow:clip;background:rgb(var(--c-cream));box-shadow:0 30px 60px rgb(0 0 0/.14)}.demo-navegador-barra{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:rgb(var(--c-cream-dark));border-bottom:1px solid rgb(var(--c-ink-border))}.demo-navegador-puntos{display:inline-flex;gap:6px}.demo-navegador-puntos i{width:10px;height:10px;border-radius:999px;background:rgb(var(--c-ink-warm))}.demo-navegador-url{flex:1;max-width:420px;height:26px;display:flex;align-items:center;padding:0 12px;border-radius:999px;background:rgb(var(--c-surface));color:rgb(var(--c-ink-muted));font-size:13px}html.dark .demo-celular{background:rgb(var(--c-gray-mid))}html.dark .demo-celular,html.dark .demo-navegador{box-shadow:0 0 0 1px rgb(var(--c-ink-border)),0 30px 60px rgb(0 0 0/.4)}}.demo-guia,.demo-guia-resumen{color:rgb(var(--c-ink))}.demo-guia-resumen{display:none;width:100%;min-height:44px;align-items:center;gap:8px;padding:0 4px;border:0;background:transparent;font-size:14px;text-align:left;cursor:pointer}.demo-guia-resumen-texto{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-guia-resumen-flecha{flex-shrink:0;transition:transform .2s ease}.demo-guia[data-expandida="1"] .demo-guia-resumen-flecha{transform:rotate(180deg)}.demo-guia-lanzador{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgb(var(--c-ink-border));background:rgb(var(--c-surface));color:rgb(var(--c-ink));font-size:14px;font-weight:700;cursor:pointer}@media (min-width:1024px){.demo-guia{padding:18px;border-radius:20px;background:rgb(var(--c-surface))}.demo-guia-lanzador{width:56px;height:56px;padding:0;border-radius:16px}.demo-guia-lanzador span{display:none}}@media (max-width:1023px){.demo-guia{flex:1;min-width:0}.demo-guia-resumen{display:flex}.demo-guia-cuerpo{display:none}.demo-guia[data-expandida="1"] .demo-guia-cuerpo{display:block;position:fixed;left:0;right:0;bottom:calc(var(--demo-pie-alto) + env(safe-area-inset-bottom));max-height:40svh;overflow-y:auto;padding:14px 16px 16px;border-radius:20px 20px 0 0;background:rgb(var(--c-surface));box-shadow:0 -10px 30px rgb(0 0 0/.16),0 -1px 0 rgb(var(--c-ink-border));z-index:54}.demo-guia-lanzador{margin-right:auto}}.demo-guia-progreso{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:rgb(var(--c-ink-muted))}.demo-guia-barra{flex:1;height:6px;border-radius:999px;background:rgb(var(--c-cream-dark));overflow:hidden}.demo-guia-barra>div{height:100%;border-radius:999px;background:rgb(var(--c-primary-boton));transition:width .25s ease}.demo-guia-titulo{margin:10px 0 4px;font-size:18px;line-height:1.25;font-weight:800;color:rgb(var(--c-ink))}.demo-guia-texto{margin:0;font-size:15px;line-height:1.45;color:rgb(var(--c-ink-muted))}.demo-guia-problema{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgb(var(--c-cream-dark))}.demo-guia-problema p{margin:0 0 8px;font-size:14px;font-weight:600;color:rgb(var(--c-ink))}.demo-guia-botones{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px;margin-top:12px}.demo-guia-boton{min-height:44px;padding:0 16px;border-radius:999px;border:0;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.demo-guia-boton-primario{background:rgb(var(--c-primary-dark));color:#fff}.demo-guia-boton-secundario{background:rgb(var(--c-surface));color:rgb(var(--c-ink));box-shadow:inset 0 0 0 1.5px rgb(var(--c-ink-border))}.demo-guia-boton-texto{background:transparent;color:rgb(var(--c-ink));padding:0 10px}.demo-guia-boton-texto:first-child{margin-right:auto}.demo-guia-resalte{outline:3px solid rgb(var(--c-primary-boton))!important;outline-offset:3px;border-radius:14px;animation:demo-guia-pulso 1.8s ease-in-out infinite}@keyframes demo-guia-pulso{0%,to{box-shadow:0 0 0 0 rgba(232,90,41,.45)}50%{box-shadow:0 0 0 8px rgba(232,90,41,0)}}.demo-bloque{position:relative;border-radius:26px}.demo-bloque-contenido{opacity:.45;filter:saturate(.6);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;max-height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}.demo-bloque-velo{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px}.demo-bloque-aviso{position:sticky;top:72px;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:320px;padding:20px 22px;text-align:center;border-radius:20px;background:rgb(var(--c-surface));border:1px solid rgb(var(--c-ink-border))}.demo-bloque-candado{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgb(var(--c-orange-light));color:rgb(var(--c-ink))}.demo-bloque-boton{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:rgb(var(--c-primary-dark));color:#fff;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}.demo-bloque-compacto .demo-bloque-contenido{max-height:none;-webkit-mask-image:none;mask-image:none}.demo-bloque-franja{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:8px 8px 8px 14px;border-radius:16px;background:rgb(var(--c-orange-light));color:rgb(var(--c-ink));font-weight:700;font-size:14px}@keyframes demo-destello{0%{box-shadow:0 0 0 0 rgb(var(--c-primary)/0)}20%{box-shadow:0 0 0 4px rgb(var(--c-primary)/.55)}to{box-shadow:0 0 0 4px rgb(var(--c-primary)/0)}}.demo-recien{border-radius:26px;animation:demo-destello 2s ease-out both}.demo-aviso{position:fixed;left:50%;bottom:calc(var(--demo-pie-alto) + 16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;width:-moz-max-content;width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:16px;background:rgb(var(--demo-tinta));color:rgb(var(--demo-sobre-tinta));font-weight:700;font-size:14px;line-height:1.35}@media (min-width:1024px){.demo-aviso{bottom:32px}}.demo-relleno{position:relative}.demo-relleno-etiqueta{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:999px;background:rgb(var(--c-ink));color:rgb(var(--c-background));font-size:12px;font-weight:800}.demo-portada{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));background:rgb(var(--c-cream-warm));color:rgb(var(--c-ink))}.demo-portada-contenido{width:100%;min-width:0;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.demo-portada-marca{display:flex;align-items:center;gap:10px}.demo-portada-titulo{margin:0;font-size:28px;line-height:1.15;font-weight:800}.demo-portada-bajada{margin:0;max-width:560px;font-size:15px;line-height:1.5;color:rgb(var(--c-ink-muted))}.demo-portada-grupo{width:100%;margin:4px 0 0;padding:0;border:0;min-width:0}.demo-portada-grupo legend{margin:0 auto 8px;font-size:14px;font-weight:800}.demo-portada-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}.demo-portada-chips::-webkit-scrollbar{display:none}.demo-chip{position:relative;flex-shrink:0;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgb(var(--c-ink-border));background:rgb(var(--c-surface));font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}.demo-chip[data-activo="1"]{background:rgb(var(--c-ink));border-color:rgb(var(--c-ink));color:rgb(var(--c-background))}.demo-portada-planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.demo-plan-tarjeta{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-radius:16px;border:1.5px solid rgb(var(--c-ink-border));background:rgb(var(--c-surface));text-align:left;cursor:pointer;transition:border-color .2s ease}.demo-plan-tarjeta[data-activo="1"]{border-color:rgb(var(--c-primary))}.demo-plan-nombre{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:800}.demo-plan-nombre svg{color:rgb(var(--c-primary-texto))}.demo-plan-precio{font-size:13px;font-weight:700;color:rgb(var(--c-ink-muted))}.demo-plan-linea{margin-top:4px;font-size:12px;line-height:1.35;color:rgb(var(--c-ink-muted))}.demo-portada-acciones{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}.demo-boton-principal{min-height:52px;padding:0 28px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:rgb(var(--c-primary-dark));color:#fff;font-size:16px;font-weight:800;cursor:pointer}.demo-boton-principal:disabled{opacity:.7}.demo-enlace-secundario{min-height:40px;display:inline-flex;align-items:center;color:rgb(var(--c-ink));font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.demo-portada :is(.demo-boton-principal,.demo-enlace-secundario):focus-visible,.demo-portada :is(.demo-chip,.demo-plan-tarjeta):has(input:focus-visible){outline:3px solid rgb(var(--c-ink));outline-offset:2px}@media (min-width:640px){.demo-portada-titulo{font-size:40px}.demo-portada-bajada{font-size:17px}.demo-portada-chips{flex-wrap:wrap;justify-content:center;overflow:visible}.demo-plan-tarjeta{padding:16px}.demo-plan-linea{font-size:13px}}.demo-marco-pagina{min-height:100svh}@media (prefers-reduced-motion:reduce){.demo-guia-resalte,.demo-recien{animation:none}.demo-recien{outline:3px solid rgb(var(--c-primary));outline-offset:2px}.demo-guia-barra>div,.demo-guia-resumen-flecha,.demo-plan-tarjeta,.demo-segmento{transition:none}}