{
  "name": "cta",
  "title": {
    "es": "Llamado a la acción",
    "en": "Call to action"
  },
  "summary": {
    "es": "Banda final con título y dos botones.",
    "en": "Closing band with a headline and two buttons."
  },
  "category": "sections",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-10-08",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/cta/",
  "requires": [
    "button"
  ],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/cta/cta.html",
      "content": "<section class=\"s-cta\" aria-labelledby=\"cta-title\">\n  <div class=\"s-cta__inner\">\n    <div class=\"s-cta__box\">\n      <h2 class=\"s-cta__title\" id=\"cta-title\" data-parte=\"titulo\">Empieza a construir hoy</h2>\n      <div class=\"s-cta__actions\">\n        <a class=\"c-btn c-btn--primary c-btn--lg\" href=\"#empezar\" data-parte=\"accion\">Empezar gratis</a>\n        <a class=\"c-btn c-btn--outline c-btn--lg\" href=\"#demo\" data-parte=\"accion-2\">Pedir una demo</a>\n      </div>\n    </div>\n  </div>\n</section>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/cta/cta.css",
      "content": "/* cta · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde cta.tw.json. No editar a mano. Necesita tokens.css. */\n.s-cta__inner{margin-inline:auto}\n.s-cta__actions{display:flex}\n.s-cta__inner{max-width:var(--container-5xl)}\n.s-cta__actions{justify-content:center;gap:calc(var(--spacing)*3)}\n:where(.s-cta__box>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}\n.s-cta__inner{padding-inline:calc(var(--spacing)*6)}\n.s-cta{padding-block:calc(var(--spacing)*12)}\n.s-cta__box{text-align:center}\n.s-cta__title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-wrap:balance;color:var(--color-foreground)}\n@media (min-width:64rem){\n.s-cta__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n}\n/* propio */\n.s-cta__actions{flex-wrap:wrap}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/cta.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "landing",
  "densidad": "baja",
  "tono": "editorial",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Al final de la página, antes del footer."
    ],
    "en": [
      "At the end of the page, before the footer."
    ]
  },
  "avoid": {
    "es": [
      "Repetida varias veces en la misma página."
    ],
    "en": [
      "Repeated several times on one page."
    ]
  },
  "a11y": {
    "roles": [
      "region"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "Los botones son enlaces con texto que dice adónde llevan."
      ],
      "en": [
        "The buttons are links whose text says where they go."
      ]
    },
    "test": {
      "es": [
        "Tab pasa por los dos enlaces."
      ],
      "en": [
        "Tab moves through both links."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "Tailark mist (MIT) · call-to-action/one",
      "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": "accion",
      "tipo": "accion",
      "nombre": {
        "es": "Botón principal",
        "en": "Primary button"
      }
    },
    {
      "id": "accion-2",
      "tipo": "accion",
      "nombre": {
        "es": "Botón secundario",
        "en": "Secondary button"
      },
      "ocultable": true
    }
  ],
  "pieza": "https://componentes-lovat.vercel.app/r/cta.html"
}