{
  "name": "footer",
  "title": {
    "es": "Footer",
    "en": "Footer"
  },
  "summary": {
    "es": "Marca, enlaces en tres columnas, aviso legal y redes.",
    "en": "Brand, links in three columns, legal notice and social links."
  },
  "category": "sections",
  "status": "stable",
  "nivel": "globales",
  "updated": "2026-09-30",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/footer/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/footer/footer.html",
      "content": "<footer class=\"s-footer\">\n  <div class=\"s-footer__inner\">\n    <div class=\"s-footer__grid\">\n      <div class=\"s-footer__brand\">\n        <a class=\"s-footer__home\" href=\"#\" aria-label=\"Inicio\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"2.5\"/><rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"4.5\" opacity=\".45\"/><rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"2.5\" opacity=\".7\"/><rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"2.5\"/></svg>Estudio</a>\n        <p class=\"s-footer__tag\">Diseño y desarrollo web desde Lima.</p>\n      </div>\n      <nav class=\"s-footer__cols\" aria-label=\"Pie de página\">\n        <div class=\"s-footer__col\"><h3 class=\"s-footer__group\">Producto</h3><ul><li><a class=\"s-footer__link\" href=\"#\">Funciones</a></li><li><a class=\"s-footer__link\" href=\"#\">Precios</a></li><li><a class=\"s-footer__link\" href=\"#\">Clientes</a></li><li><a class=\"s-footer__link\" href=\"#\">Ayuda</a></li></ul></div>\n        <div class=\"s-footer__col\"><h3 class=\"s-footer__group\">Empresa</h3><ul><li><a class=\"s-footer__link\" href=\"#\">Nosotros</a></li><li><a class=\"s-footer__link\" href=\"#\">Empleos</a></li><li><a class=\"s-footer__link\" href=\"#\">Blog</a></li><li><a class=\"s-footer__link\" href=\"#\">Contacto</a></li></ul></div>\n        <div class=\"s-footer__col\"><h3 class=\"s-footer__group\">Legal</h3><ul><li><a class=\"s-footer__link\" href=\"#\">Licencia</a></li><li><a class=\"s-footer__link\" href=\"#\">Privacidad</a></li><li><a class=\"s-footer__link\" href=\"#\">Cookies</a></li></ul></div>\n      </nav>\n    </div>\n    <div class=\"s-footer__bottom\">\n      <span class=\"s-footer__copy\">© 2026 Estudio. Todos los derechos reservados.</span>\n      <ul class=\"s-footer__social\">\n        <li><a class=\"s-footer__social-link\" href=\"#\" aria-label=\"X\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M17.8 3h3.1l-6.8 7.8L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8zm-1.1 16.2h1.7L7.4 4.7H5.6z\"/></svg></a></li>\n        <li><a class=\"s-footer__social-link\" href=\"#\" aria-label=\"LinkedIn\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5M3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.1c.5-1 1.8-2 3.8-2 4 0 4.8 2.6 4.8 6V21h-4v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V21h-4z\"/></svg></a></li>\n        <li><a class=\"s-footer__social-link\" href=\"#\" aria-label=\"Instagram\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 7.3a4.7 4.7 0 1 0 0 9.4 4.7 4.7 0 0 0 0-9.4m0 7.7a3 3 0 1 1 0-6 3 3 0 0 1 0 6m6-7.9a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0M12 4.2c2.5 0 2.8 0 3.8.1 2.6.1 3.8 1.3 3.9 3.9v7.6c-.1 2.6-1.3 3.8-3.9 3.9H8.2c-2.6-.1-3.8-1.3-3.9-3.9V8.2c.1-2.6 1.3-3.8 3.9-3.9h3.8M12 2.5H8.1C4.6 2.7 2.7 4.6 2.5 8.1v7.8c.2 3.5 2.1 5.4 5.6 5.6h7.8c3.5-.2 5.4-2.1 5.6-5.6V8.1c-.2-3.5-2.1-5.4-5.6-5.6z\"/></svg></a></li>\n      </ul>\n    </div>\n  </div>\n</footer>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/footer/footer.css",
      "content": "/* footer · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde footer.tw.json. No editar a mano. Necesita tokens.css. */\n.s-footer__social{order:-9999}\n.s-footer__copy{order:9999}\n.s-footer__cols{grid-column:span 3/span 3}\n.s-footer__inner{margin-inline:auto}\n.s-footer__bottom{margin-top:calc(var(--spacing)*12)}\n.s-footer__group{display:block}\n.s-footer__link{display:block}\n.s-footer__copy{display:block}\n.s-footer__social-link{display:block}\n.s-footer__bottom{display:flex}\n.s-footer__social{display:flex}\n.s-footer__grid{display:grid}\n.s-footer__cols{display:grid}\n.s-footer__inner{max-width:var(--container-5xl)}\n.s-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}\n.s-footer__bottom{flex-wrap:wrap}\n.s-footer__social{flex-wrap:wrap}\n.s-footer__bottom{align-items:flex-end;justify-content:space-between}\n.s-footer__social{justify-content:center}\n.s-footer__cols{gap:calc(var(--spacing)*6)}\n.s-footer__bottom{gap:calc(var(--spacing)*6)}\n.s-footer__social{gap:calc(var(--spacing)*6)}\n.s-footer__grid{gap:calc(var(--spacing)*12)}\n:where(.s-footer__col>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}\n.s-footer__bottom{border-top-style:var(--tw-border-style);border-top-width:1px}\n.s-footer{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-background)}\n.s-footer__inner{padding-inline:calc(var(--spacing)*6)}\n.s-footer__bottom{padding-block:calc(var(--spacing)*6)}\n.s-footer{padding-top:calc(var(--spacing)*20)}\n.s-footer__copy{text-align:center;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.s-footer__social{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.s-footer__group{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.s-footer__link{color:var(--color-muted-foreground)}\n.s-footer__copy{color:var(--color-muted-foreground)}\n.s-footer__social-link{color:var(--color-muted-foreground)}\n.s-footer__link{--tw-duration:.15s;transition-duration:.15s;animation-duration:.15s}\n@media (hover:hover){\n.s-footer__link:hover{color:var(--color-primary)}\n.s-footer__social-link:hover{color:var(--color-primary)}\n}\n@media (min-width:48rem){\n.s-footer__copy{order:-9999}\n.s-footer__social{order:9999}\n.s-footer__brand{grid-column:span 2/span 2}\n.s-footer__grid{grid-template-columns:repeat(5,minmax(0,1fr))}\n}\n/* propio */\n.s-footer__home{display:inline-flex;align-items:center;gap:.5rem;color:var(--foreground);text-decoration:none;font-weight:600}\n.s-footer__home svg{width:1.75rem;height:1.75rem}\n.s-footer__tag{margin-top:1rem;max-width:18rem;color:var(--muted-foreground);font-size:.875rem}\n.s-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}\n.s-footer__link,.s-footer__social-link{text-decoration:none;transition-property:color}\n.s-footer__social-link svg{width:1.5rem;height:1.5rem;fill:currentColor}\n.s-footer__social{list-style:none;margin:0;padding:0}\n@media (width < 40rem){.s-footer__cols{grid-template-columns:repeat(2,1fr)}}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/footer.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "landing",
  "densidad": "media",
  "tono": "editorial",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Al pie de cualquier sitio."
    ],
    "en": [
      "At the bottom of any site."
    ]
  },
  "avoid": {
    "es": [
      "Para repetir toda la navegación principal."
    ],
    "en": [
      "To repeat the whole main navigation."
    ]
  },
  "a11y": {
    "roles": [
      "contentinfo",
      "navigation"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "<footer> con un <nav> etiquetado; las redes llevan aria-label."
      ],
      "en": [
        "<footer> with a labelled <nav>; social links carry aria-label."
      ]
    },
    "test": {
      "es": [
        "El lector lista «Pie de página, navegación»."
      ],
      "en": [
        "The screen reader lists “Footer, navigation”."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "Tailark mist (MIT) · footer/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"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/footer.html"
}