{ "name": "pricing", "title": { "es": "Precios", "en": "Pricing" }, "summary": { "es": "Tres planes en una tarjeta, con el del medio destacado.", "en": "Three plans in one card, with the middle one highlighted." }, "category": "sections", "status": "stable", "nivel": "componentes", "updated": "2026-10-08", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/pricing/", "requires": [ "button" ], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/pricing/pricing.html", "content": "
\n
\n
\n

Precios que crecen contigo

\n

Elige el plan que necesitas hoy y cámbialo cuando quieras.

\n
\n
\n
\n
\n

Gratis

S/ 0 al mes

Por persona

Empezar
  • Panel de métricas
  • 5 GB de almacenamiento
  • Soporte por correo
\n

Pro

S/ 49 al mes

Por persona

Empezar
  • Todo lo del plan Gratis
  • 50 GB de almacenamiento
  • Soporte por chat
  • Dominio propio
  • Plantillas premium
  • Informes mensuales
\n

Equipo

S/ 149 al mes

Por persona

Empezar
  • Todo lo del plan Pro
  • Usuarios ilimitados
  • Soporte prioritario
\n
\n
\n
\n
\n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/pricing/pricing.css", "content": "/* pricing · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde pricing.tw.json. No editar a mano. Necesita tokens.css. */\n.s-pricing__wrap{container-type:inline-size}\n.s-pricing{position:relative}\n.s-pricing__wrap{position:relative}\n.s-pricing__card{position:relative}\n.s-pricing__featured-inner{position:relative}\n.s-pricing__featured{margin-inline:calc(var(--spacing)*-1)}\n.s-pricing__inner{margin-inline:auto}\n.s-pricing__head{margin-inline:auto}\n.s-pricing__lead{margin-inline:auto}\n.s-pricing__card{margin-inline:auto}\n.s-pricing__price{margin-top:calc(var(--spacing)*2)}\n.s-pricing__lead{margin-top:calc(var(--spacing)*4)}\n.s-pricing__wrap{margin-top:calc(var(--spacing)*12)}\n.s-pricing__price{margin-bottom:calc(var(--spacing)*.5);display:block}\n.s-pricing__plan-head{display:flex}\n.s-pricing__list li{display:flex}\n.s-pricing__grid{display:grid}\n.s-pricing__head{max-width:var(--container-2xl)}\n.s-pricing__inner{max-width:var(--container-5xl)}\n.s-pricing__card{max-width:var(--container-sm)}\n.s-pricing__lead{max-width:var(--container-xl)}\n.s-pricing__plan-head{flex-direction:column}\n.s-pricing__list li{align-items:center;gap:calc(var(--spacing)*2)}\n:where(.s-pricing__plan-head>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}\n:where(.s-pricing__list>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}\n.s-pricing__card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px}\n.s-pricing__cta{border-block-style:var(--tw-border-style);border-block-width:1px}\n.s-pricing__card{border-color:#0000}\n.s-pricing__featured{border-color:#0000;background-color:var(--color-background)}\n.s-pricing__card{background-color:var(--color-card)}\n.s-pricing{background-color:var(--color-muted)}\n.s-pricing__plan-head{padding:calc(var(--spacing)*8)}\n.s-pricing__list{padding:calc(var(--spacing)*8)}\n.s-pricing__featured-inner{padding-inline:var(--spacing)}\n.s-pricing__inner{padding-inline:calc(var(--spacing)*6)}\n.s-pricing__cta{padding-inline:calc(var(--spacing)*8);padding-block:calc(var(--spacing)*4)}\n.s-pricing{padding-block:calc(var(--spacing)*16)}\n.s-pricing__head{text-align:center}\n.s-pricing__price{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}\n.s-pricing__title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}\n.s-pricing__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-pricing__per{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.s-pricing__plan{--tw-leading:1;line-height:1}\n.s-pricing__title{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}\n.s-pricing__plan{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.s-pricing__price{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.s-pricing__plan{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}\n.s-pricing__title{text-wrap:balance}\n.s-pricing__lead{text-wrap:balance}\n.s-pricing__card{color:var(--color-card-foreground)}\n.s-pricing__lead{color:var(--color-muted-foreground)}\n.s-pricing__per{color:var(--color-muted-foreground)}\n.s-pricing__card{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.s-pricing__featured{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.s-pricing__card{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.s-pricing__featured{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.s-pricing__card{--tw-ring-color:var(--color-foreground)}\n@supports (color:color-mix(in lab, red, red)){\n.s-pricing__card{--tw-ring-color:color-mix(in oklab,var(--color-foreground)5%,transparent)}\n}\n.s-pricing__featured{--tw-ring-color:var(--color-foreground)}\n@supports (color:color-mix(in lab, red, red)){\n.s-pricing__featured{--tw-ring-color:color-mix(in oklab,var(--color-foreground)10%,transparent)}\n}\n@media (min-width:48rem){\n.s-pricing__wrap{margin-top:calc(var(--spacing)*20)}\n.s-pricing{padding-block:calc(var(--spacing)*20)}\n.s-pricing__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n}\n@media (min-width:64rem){\n.s-pricing__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}\n}\n@container (min-width:48rem){\n.s-pricing__featured{margin-inline:0;margin-block:calc(var(--spacing)*-3)}\n.s-pricing__featured-inner{padding-inline:0;padding-block:calc(var(--spacing)*3)}\n}\n@container (min-width:56rem){\n.s-pricing__card{max-width:100%}\n.s-pricing__grid{grid-template-columns:repeat(3,minmax(0,1fr))}\n}\n/* propio */\n.s-pricing__featured{border-radius:var(--radius)}\n.s-pricing__cta .c-btn{width:100%}\n.s-pricing__list{list-style:none;margin:0}\n.s-pricing__list svg{width:.75rem;height:.75rem;color:var(--primary);flex:none}\n.s-pricing__title,.s-pricing__plan{margin:0}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/pricing.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "landing", "densidad": "media", "tono": "editorial", "states": [ "rest" ], "use": { "es": [ "Para 2 o 3 planes con diferencias claras." ], "en": [ "For 2 or 3 plans with clear differences." ] }, "avoid": { "es": [ "Con más de 4 planes: usa una tabla comparativa." ], "en": [ "With more than 4 plans: use a comparison table." ] }, "a11y": { "roles": [ "region" ], "keyboard": [], "notes": { "es": [ "Cada plan tiene su h3 y su lista de beneficios.", "En pantallas angostas los planes se apilan (container queries)." ], "en": [ "Each plan has its h3 and list of benefits.", "On narrow screens plans stack (container queries)." ] }, "test": { "es": [ "En móvil, los tres planes quedan uno debajo del otro." ], "en": [ "On mobile, the three plans stack vertically." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "Tailark mist (MIT) · pricing/two", "url": "https://github.com/tailark/blocks" } ], "changes": [ { "date": "2026-09-30", "es": "Diseño de Tailark mist en HTML y CSS sin dependencias", "en": "Tailark mist design in dependency-free HTML and CSS" }, { "date": "2026-10-08", "es": "Partes editables declaradas (data-parte) para el Banco de Infinite Canvas.", "en": "Editable parts declared (data-parte) for the Infinite Canvas workbench." } ], "partes": [ { "id": "titulo", "tipo": "texto", "nombre": { "es": "Título", "en": "Headline" } }, { "id": "frase", "tipo": "texto", "nombre": { "es": "Frase", "en": "Subtitle" }, "ocultable": true }, { "id": "plan1-nombre", "tipo": "texto", "nombre": { "es": "Plan 1 · nombre", "en": "Plan 1 · name" } }, { "id": "plan1-precio", "tipo": "texto", "nombre": { "es": "Plan 1 · precio", "en": "Plan 1 · price" } }, { "id": "plan1-nota", "tipo": "texto", "nombre": { "es": "Plan 1 · nota", "en": "Plan 1 · note" }, "ocultable": true }, { "id": "plan1-accion", "tipo": "accion", "nombre": { "es": "Plan 1 · botón", "en": "Plan 1 · button" } }, { "id": "plan1-lista", "tipo": "lista", "nombre": { "es": "Plan 1 · beneficios", "en": "Plan 1 · features" }, "ocultable": true }, { "id": "plan2-nombre", "tipo": "texto", "nombre": { "es": "Plan 2 (destacado) · nombre", "en": "Plan 2 (featured) · name" } }, { "id": "plan2-precio", "tipo": "texto", "nombre": { "es": "Plan 2 (destacado) · precio", "en": "Plan 2 (featured) · price" } }, { "id": "plan2-nota", "tipo": "texto", "nombre": { "es": "Plan 2 (destacado) · nota", "en": "Plan 2 (featured) · note" }, "ocultable": true }, { "id": "plan2-accion", "tipo": "accion", "nombre": { "es": "Plan 2 (destacado) · botón", "en": "Plan 2 (featured) · button" } }, { "id": "plan2-lista", "tipo": "lista", "nombre": { "es": "Plan 2 (destacado) · beneficios", "en": "Plan 2 (featured) · features" }, "ocultable": true }, { "id": "plan3-nombre", "tipo": "texto", "nombre": { "es": "Plan 3 · nombre", "en": "Plan 3 · name" } }, { "id": "plan3-precio", "tipo": "texto", "nombre": { "es": "Plan 3 · precio", "en": "Plan 3 · price" } }, { "id": "plan3-nota", "tipo": "texto", "nombre": { "es": "Plan 3 · nota", "en": "Plan 3 · note" }, "ocultable": true }, { "id": "plan3-accion", "tipo": "accion", "nombre": { "es": "Plan 3 · botón", "en": "Plan 3 · button" } }, { "id": "plan3-lista", "tipo": "lista", "nombre": { "es": "Plan 3 · beneficios", "en": "Plan 3 · features" }, "ocultable": true } ], "pieza": "https://componentes-lovat.vercel.app/r/pricing.html" }