# Footer

> Pie de página institucional con contacto y enlaces.

Categoría: Estructura · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Footer

```html
<footer class="bg-ccs-ink text-ccs-dark-text-2">
  <div class="h-1 w-full bg-ccs-banner dark:bg-ccs-banner-dark"></div>
  <div class="max-w-ccs mx-auto px-6 py-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-10">
    <div>
      <img src="assets/img/logo-ccs-blanco-verde.svg" alt="Cámara de Comercio de Santiago" class="w-40 h-auto">
      <p class="mt-1 text-sm leading-relaxed text-ccs-dark-text-2 max-w-xs">La información contenida en este sitio es de propiedad de la Cámara de Comercio de Santiago. Su reproducción será permitida toda vez que sea citada la fuente.</p>
    </div>
    <div>
      <div class="text-xs uppercase tracking-wider text-white font-semibold mb-4">Contacto</div>
      <ul class="space-y-2 text-sm">
        <li>Monjitas #392, Santiago – Chile</li>
        <li><span class="text-ccs-dark-text-2">Central CCS</span> <span class="mono">+56 2 2360 7000</span></li>
        <li><span class="text-ccs-dark-text-2">Ventas</span> <span class="mono">+56 2 2835 6842</span></li>
        <li><span class="text-ccs-dark-text-2">Soporte</span> <span class="mono">+56 2 2360 7001</span></li>
        <li class="pt-1"><a class="text-white hover:text-ccs-green-br focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">contacto@ccs.cl</a></li>
      </ul>
    </div>
    <div>
      <div class="text-xs uppercase tracking-wider text-white font-semibold mb-4">Kit</div>
      <ul class="space-y-2 text-sm">
        <li><a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Fundamentos</a></li>
        <li><a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Componentes</a></li>
        <li><a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Patrones</a></li>
        <li><a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Documentación</a></li>
        <li><a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Changelog</a></li>
      </ul>
    </div>
    <div>
      <div class="text-xs uppercase tracking-wider text-white font-semibold mb-4">Síguenos</div>
      <div class="flex flex-wrap gap-2">
        <a class="w-9 h-9 rounded-lg border border-white/15 hover:border-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h4v16H4V4Zm6 0h4v2c.7-1.3 2-2 4-2 3.5 0 4 2.3 4 5v11h-4v-9c0-1.5-.5-3-2-3s-2 1.5-2 3v9h-4V4Z"/></svg></a>
        <a class="w-9 h-9 rounded-lg border border-white/15 hover:border-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.09.68-.22.68-.49v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.58 9.58 0 0 1 12 6.8c.85.004 1.71.115 2.51.337 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.69 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85V21c0 .27.18.59.69.49C19.13 20.17 22 16.42 22 12c0-5.52-4.48-10-10-10Z"/></svg></a>
        <a class="w-9 h-9 rounded-lg border border-white/15 hover:border-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.71 3.71 0 0 1-1.38-.9 3.71 3.71 0 0 1-.9-1.38c-.16-.43-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 4.88A4.96 4.96 0 1 1 12 17a4.96 4.96 0 0 1 0-9.96Zm5.06-.14a1.16 1.16 0 1 1 0-2.32 1.16 1.16 0 0 1 0 2.32Z"/></svg></a>
        <a class="w-9 h-9 rounded-lg border border-white/15 hover:border-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12c0 5.49 4.04 10.04 9.31 10.86V15.2H7.5V12h2.81V9.5c0-2.78 1.65-4.31 4.18-4.31 1.21 0 2.48.22 2.48.22v2.72h-1.4c-1.38 0-1.81.86-1.81 1.74V12h3.09l-.49 3.2h-2.6v7.66C18.96 22.04 23 17.49 23 12Z"/></svg></a>
      </div>
    </div>
  </div>
  <div class="border-t border-white/10">
    <div class="max-w-ccs mx-auto px-6 py-5 text-xs text-ccs-dark-text-2 flex flex-wrap items-center gap-x-6 gap-y-2">
      <span>© 2026 Cámara de Comercio de Santiago</span>
      <a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Políticas de privacidad</a>
      <a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Compliance</a>
      <a class="hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Canal de denuncias</a>
      <span class="ml-auto mono">Kit UI · v1.0.0</span>
    </div>
  </div>
</footer>
```