# Cards

> Suaves (las de uso general) o con línea: categoría, enlace, noticias y eventos, cifras, testimonio y perfil.

Categoría: Contenido · Solar v0.8.0

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

## Guía: Dos estilos

Cards tiene dos estilos. Usa el suave: es el de Docs, Recursos y Patrones. El con línea es de uso puntual, para cuando una card suave no se distingue de lo que la rodea.

- Suave: fondo liso Bg (en oscuro, Dark surface), sin borde ni sombra. Si la card es un enlace, toda la card es el enlace y en hover el fondo pasa a Hover (en oscuro, Dark overlay). Si la sección ya tiene fondo Bg, las cards van en blanco (Suave · sobre fondo suave).
- Con línea: fondo blanco, borde Line y sombra suave.

Las fotos llevan un contorno de 1 px hacia adentro (outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10), para que una foto clara no se pierda contra el fondo. En los ejemplos va en el relleno de la imagen; al poner la foto real, se deja en la <img>.

## Suave · enlace

```html
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="flex items-start justify-between gap-4">
      <span class="ph grid h-14 w-14 shrink-0 place-items-center rounded-lg text-[10px]">LOGO</span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-12 text-ccs-h3"><a href="https://ejemplo.cl/" target="_blank" rel="noopener noreferrer" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Sitio de ejemplo<span class="sr-only"> (se abre en otra pestaña)</span></a></h3>
    <p class="mt-1 text-sm font-medium text-ccs-blue dark:text-ccs-dark-accent">ejemplo.cl</p>
    <p class="mt-4 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Descripción breve de lo que encuentras en el sitio y por qué sirve. Dos o tres líneas como máximo.</p>
    <ul class="mt-auto flex flex-wrap gap-1.5 pt-6" aria-label="Categorías"><li><span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-white text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">Color</span></li><li><span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-white text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">Accesibilidad</span></li></ul>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="flex items-start justify-between gap-4">
      <span class="ph grid h-14 w-14 shrink-0 place-items-center rounded-lg text-[10px]">LOGO</span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-12 text-ccs-h3"><a href="https://otro-ejemplo.cl/" target="_blank" rel="noopener noreferrer" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Otro sitio<span class="sr-only"> (se abre en otra pestaña)</span></a></h3>
    <p class="mt-1 text-sm font-medium text-ccs-blue dark:text-ccs-dark-accent">otro-ejemplo.cl</p>
    <p class="mt-4 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Descripción breve del recurso. Toda la card es el enlace y se abre en otra pestaña.</p>
    <ul class="mt-auto flex flex-wrap gap-1.5 pt-6" aria-label="Categorías"><li><span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-white text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">Tipografía</span></li></ul>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="flex items-start justify-between gap-4">
      <span class="ph grid h-14 w-14 shrink-0 place-items-center rounded-lg text-[10px]">LOGO</span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-12 text-ccs-h3"><a href="https://tercer-ejemplo.cl/" target="_blank" rel="noopener noreferrer" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Tercer sitio<span class="sr-only"> (se abre en otra pestaña)</span></a></h3>
    <p class="mt-1 text-sm font-medium text-ccs-blue dark:text-ccs-dark-accent">tercer-ejemplo.cl</p>
    <p class="mt-4 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Descripción breve del recurso, con sus categorías abajo.</p>
    <ul class="mt-auto flex flex-wrap gap-1.5 pt-6" aria-label="Categorías"><li><span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-white text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">Íconos</span></li><li><span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-white text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">Inspiración</span></li></ul>
  </article>
</div>
```

## Suave · categoría

```html
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="flex items-start justify-between gap-4">
      <span class="grid h-12 w-12 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 4 5v6.09c0 5 3.41 9.74 8 10.91 4.59-1.17 8-5.91 8-10.91V5l-8-3Z"/></svg></span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-8 text-ccs-h3"><a href="#diseno" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Diseño</a></h3>
    <p class="mt-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Lineamientos visuales, tipografías, colores y maquetas para una identidad coherente.</p>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="flex items-start justify-between gap-4">
      <span class="grid h-12 w-12 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m8 4-6 8 6 8 1.4-1.4L4.8 12l4.6-6.6L8 4Zm8 0-1.4 1.4L19.2 12l-4.6 6.6L16 20l6-8-6-8Z"/></svg></span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-8 text-ccs-h3"><a href="#desarrollo" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Desarrollo</a></h3>
    <p class="mt-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Código fuente, estructura del proyecto y estándares técnicos para mantención.</p>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="flex items-start justify-between gap-4">
      <span class="grid h-12 w-12 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg></span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-8 text-ccs-h3"><a href="#componentes" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Componentes</a></h3>
    <p class="mt-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Piezas reutilizables (botones, cards, módulos) para consistencia y eficiencia.</p>
  </article>
</div>
```

## Suave · con imagen

```html
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-2 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="ph grid aspect-[16/10] place-items-center rounded-lg outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO 16:10</div>
    <div class="flex flex-1 flex-col p-4">
      <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider"><span class="text-ccs-blue dark:text-ccs-dark-accent">Noticia</span><span class="text-ccs-slate dark:text-ccs-dark-text-2">· 12 may 2026</span></p>
      <h3 class="mt-3 text-ccs-h3"><a href="#noticia" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Nueva agenda digital para el comercio</a></h3>
      <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Lineamientos para acelerar la transformación digital de las pymes durante 2026.</p>
    </div>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-2 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="ph grid aspect-[16/10] place-items-center rounded-lg outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO 16:10</div>
    <div class="flex flex-1 flex-col p-4">
      <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider"><span class="text-ccs-success dark:text-ccs-dark-success">Evento</span><span class="text-ccs-slate dark:text-ccs-dark-text-2">· Auditorio CCS</span></p>
      <h3 class="mt-3 text-ccs-h3"><a href="#evento" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Encuentro de comercio electrónico</a></h3>
      <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">El encuentro del comercio electrónico de la región vuelve este año.</p>
    </div>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-ccs-bg p-2 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-surface dark:hover:bg-ccs-dark-overlay">
    <div class="ph grid aspect-[16/10] place-items-center rounded-lg outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO 16:10</div>
    <div class="flex flex-1 flex-col p-4">
      <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider"><span class="text-ccs-blue dark:text-ccs-dark-accent">Estudio</span><span class="text-ccs-slate dark:text-ccs-dark-text-2">· 1.er trimestre 2026</span></p>
      <h3 class="mt-3 text-ccs-h3"><a href="#estudio" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Índice de confianza empresarial</a></h3>
      <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2">Informe trimestral con la percepción del sector comercio y servicios.</p>
    </div>
  </article>
</div>
```

## Suave · cifras

```html
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
  <div class="flex flex-col justify-between rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-6 sm:min-h-40"><p class="text-ccs-h1 tracking-tight text-ccs-blue dark:text-ccs-dark-accent">3.420</p><p class="mt-6 text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">socios activos</p></div>
  <div class="flex flex-col justify-between rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-6 sm:min-h-40"><p class="text-ccs-h1 tracking-tight text-ccs-blue dark:text-ccs-dark-accent">28</p><p class="mt-6 text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">comités</p></div>
  <div class="flex flex-col justify-between rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-6 sm:min-h-40"><p class="text-ccs-h1 tracking-tight text-ccs-blue dark:text-ccs-dark-accent">147</p><p class="mt-6 text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">eventos en 2026</p></div>
  <div class="flex flex-col justify-between rounded-ccs bg-ccs-blue p-6 sm:min-h-40 dark:bg-ccs-blue-mid"><p class="text-ccs-h1 tracking-tight text-white">42K</p><p class="mt-6 text-sm font-semibold text-white">asistentes acumulados</p></div>
</div>
```

## Suave · testimonio

```html
<div class="grid gap-5 lg:grid-cols-2">
  <figure class="flex flex-col justify-between rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-6 sm:p-8">
    <blockquote class="text-ccs-body-l text-ccs-ink dark:text-ccs-dark-text"><p>“Texto de la cita, de dos a cuatro líneas, con lo que la persona destaca de su experiencia.”</p></blockquote>
    <figcaption class="mt-8 flex items-center gap-3">
      <span class="ph grid h-12 w-12 place-items-center rounded-full text-[10px]">FOTO</span>
      <span><span class="block text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Nombre y apellido</span><span class="block text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cargo, empresa</span></span>
    </figcaption>
  </figure>
  <figure class="flex flex-col justify-between rounded-ccs bg-ccs-blue p-6 sm:p-8 dark:bg-ccs-blue-mid">
    <blockquote class="text-ccs-body-l text-white"><p>“Texto de la cita destacada, de dos a cuatro líneas, con lo que la persona destaca de su experiencia.”</p></blockquote>
    <figcaption class="mt-8 flex items-center gap-3">
      <span class="grid h-12 w-12 place-items-center rounded-full bg-white/15 text-sm font-semibold text-white" aria-hidden="true">NA</span>
      <span><span class="block text-sm font-semibold text-white">Nombre y apellido</span><span class="block text-sm text-white/80">Cargo, empresa</span></span>
    </figcaption>
  </figure>
</div>
```

## Suave · perfil

```html
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-2">
    <div class="ph grid aspect-square place-items-center rounded-lg outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO RETRATO</div>
    <div class="p-4">
      <h3 class="text-ccs-h3">Nombre y apellido</h3>
      <p class="mt-1 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cargo · Comité</p>
      <div class="mt-4 flex gap-2">
        <a href="#linkedin" aria-label="LinkedIn de Nombre y apellido" class="grid h-9 w-9 place-items-center rounded-lg bg-white text-ccs-slate transition hover:bg-ccs-hover hover:text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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 href="#correo" aria-label="Correo de Nombre y apellido" class="grid h-9 w-9 place-items-center rounded-lg bg-white text-ccs-slate transition hover:bg-ccs-hover hover:text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:letter-outline" class="text-[18px]" aria-hidden="true"></iconify-icon></a>
      </div>
    </div>
  </article>
  <article class="rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-2">
    <div class="ph grid aspect-square place-items-center rounded-lg outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO RETRATO</div>
    <div class="p-4">
      <h3 class="text-ccs-h3">Nombre y apellido</h3>
      <p class="mt-1 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cargo · Comité</p>
      <div class="mt-4 flex gap-2">
        <a href="#linkedin" aria-label="LinkedIn de Nombre y apellido" class="grid h-9 w-9 place-items-center rounded-lg bg-white text-ccs-slate transition hover:bg-ccs-hover hover:text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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 href="#correo" aria-label="Correo de Nombre y apellido" class="grid h-9 w-9 place-items-center rounded-lg bg-white text-ccs-slate transition hover:bg-ccs-hover hover:text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:letter-outline" class="text-[18px]" aria-hidden="true"></iconify-icon></a>
      </div>
    </div>
  </article>
  <article class="rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface p-2">
    <div class="ph grid aspect-square place-items-center rounded-lg outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO RETRATO</div>
    <div class="p-4">
      <h3 class="text-ccs-h3">Nombre y apellido</h3>
      <p class="mt-1 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cargo · Comité</p>
      <div class="mt-4 flex gap-2">
        <a href="#linkedin" aria-label="LinkedIn de Nombre y apellido" class="grid h-9 w-9 place-items-center rounded-lg bg-white text-ccs-slate transition hover:bg-ccs-hover hover:text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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 href="#correo" aria-label="Correo de Nombre y apellido" class="grid h-9 w-9 place-items-center rounded-lg bg-white text-ccs-slate transition hover:bg-ccs-hover hover:text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:letter-outline" class="text-[18px]" aria-hidden="true"></iconify-icon></a>
      </div>
    </div>
  </article>
</div>
```

## Suave · sobre fondo suave

```html
<div class="rounded-ccs bg-ccs-bg p-4 sm:p-6 dark:bg-ccs-dark-surface"><div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <article class="group relative flex h-full flex-col rounded-ccs bg-white p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-overlay dark:hover:bg-ccs-dark-hover">
    <div class="flex items-start justify-between gap-4">
      <span class="grid h-12 w-12 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 4 5v6.09c0 5 3.41 9.74 8 10.91 4.59-1.17 8-5.91 8-10.91V5l-8-3Z"/></svg></span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-8 text-ccs-h3"><a href="#diseno" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Diseño</a></h3>
    <p class="mt-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-text">Lineamientos visuales, tipografías, colores y maquetas para una identidad coherente.</p>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-white p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-overlay dark:hover:bg-ccs-dark-hover">
    <div class="flex items-start justify-between gap-4">
      <span class="grid h-12 w-12 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m8 4-6 8 6 8 1.4-1.4L4.8 12l4.6-6.6L8 4Zm8 0-1.4 1.4L19.2 12l-4.6 6.6L16 20l6-8-6-8Z"/></svg></span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-8 text-ccs-h3"><a href="#desarrollo" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Desarrollo</a></h3>
    <p class="mt-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-text">Código fuente, estructura del proyecto y estándares técnicos para mantención.</p>
  </article>
  <article class="group relative flex h-full flex-col rounded-ccs bg-white p-6 transition-colors hover:bg-ccs-hover dark:bg-ccs-dark-overlay dark:hover:bg-ccs-dark-hover">
    <div class="flex items-start justify-between gap-4">
      <span class="grid h-12 w-12 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg></span>
      <iconify-icon icon="solar:arrow-right-up-outline" class="shrink-0 text-[24px] text-ccs-slate transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ccs-blue motion-reduce:transition-none dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
    </div>
    <h3 class="mt-8 text-ccs-h3"><a href="#componentes" class="text-ccs-ink no-underline after:absolute after:inset-0 after:rounded-ccs focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ccs-blue focus-visible:after:ring-offset-2 dark:focus-visible:after:ring-ccs-dark-accent dark:focus-visible:after:ring-offset-ccs-dark-bg dark:text-ccs-dark-text">Componentes</a></h3>
    <p class="mt-2 text-sm leading-relaxed text-ccs-slate dark:text-ccs-dark-text-2 dark:group-hover:text-ccs-dark-text">Piezas reutilizables (botones, cards, módulos) para consistencia y eficiencia.</p>
  </article>
</div></div>
```

## Con línea · categoría

```html
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
  <article class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 hover:shadow-ccs transition group dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="w-12 h-12 rounded-lg bg-ccs-icon flex items-center justify-center mb-4 dark:bg-ccs-icon-dark">
      <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 4 5v6.09c0 5 3.41 9.74 8 10.91 4.59-1.17 8-5.91 8-10.91V5l-8-3Z"/></svg>
    </div>
    <h4 class="text-lg font-semibold mb-2">Diseño</h4>
    <p class="text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Lineamientos visuales, tipografías, colores y maquetas para una identidad coherente.</p>
    <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-ccs-blue group-hover:gap-2 transition-[gap] dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver más
      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
    </a>
  </article>
  <article class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 hover:shadow-ccs transition group dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="w-12 h-12 rounded-lg bg-ccs-icon flex items-center justify-center mb-4 dark:bg-ccs-icon-dark">
      <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="m8 4-6 8 6 8 1.4-1.4L4.8 12l4.6-6.6L8 4Zm8 0-1.4 1.4L19.2 12l-4.6 6.6L16 20l6-8-6-8Z"/></svg>
    </div>
    <h4 class="text-lg font-semibold mb-2">Desarrollo</h4>
    <p class="text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Código fuente, estructura del proyecto y estándares técnicos para mantención.</p>
    <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-ccs-blue group-hover:gap-2 transition-[gap] dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver más
      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
    </a>
  </article>
  <article class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 hover:shadow-ccs transition group dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="w-12 h-12 rounded-lg bg-ccs-icon flex items-center justify-center mb-4 dark:bg-ccs-icon-dark">
      <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg>
    </div>
    <h4 class="text-lg font-semibold mb-2">Componentes</h4>
    <p class="text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Piezas reutilizables (botones, cards, módulos) para consistencia y eficiencia.</p>
    <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-ccs-blue group-hover:gap-2 transition-[gap] dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver más
      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
    </a>
  </article>
</div>
```

## Con línea · con imagen (noticias y eventos)

```html
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
  <article class="rounded-ccs bg-white border border-ccs-line overflow-hidden shadow-ccs-sm hover:shadow-ccs transition dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="ph aspect-[16/10] grid place-items-center outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO · Evento 16:10</div>
    <div class="p-5">
      <div class="flex items-center gap-2 text-xs uppercase tracking-wider font-semibold mb-3">
        <span class="text-ccs-blue dark:text-ccs-dark-accent">Noticia</span>
        <span class="text-ccs-slate dark:text-ccs-dark-text-2">· 12 May 2026</span>
      </div>
      <h4 class="text-lg font-semibold leading-tight mb-2">CCS impulsa nueva agenda digital para el comercio chileno</h4>
      <p class="text-sm text-ccs-slate line-clamp-2 dark:text-ccs-dark-text-2">El gremio presentó lineamientos para acelerar la transformación digital de las pymes durante 2026.</p>
      <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-ccs-blue hover:gap-2 transition-[gap] dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Leer más →</a>
    </div>
  </article>
  <article class="rounded-ccs bg-white border border-ccs-line overflow-hidden shadow-ccs-sm hover:shadow-ccs transition dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="ph aspect-[16/10] grid place-items-center relative outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">
      FOTO · Evento 16:10
      <div class="absolute top-3 left-3 bg-white rounded-lg px-3 py-1.5 text-center shadow-ccs-sm dark:bg-ccs-dark-surface">
        <div class="text-xs uppercase tracking-wider text-ccs-blue font-bold leading-none dark:text-ccs-dark-accent">Jun</div>
        <div class="text-xl font-semibold leading-none mt-0.5">18</div>
      </div>
    </div>
    <div class="p-5">
      <div class="flex items-center gap-2 text-xs uppercase tracking-wider font-semibold mb-3">
        <span class="text-ccs-success dark:text-ccs-dark-success">Evento</span>
        <span class="text-ccs-slate dark:text-ccs-dark-text-2">· Auditorio CCS</span>
      </div>
      <h4 class="text-lg font-semibold leading-tight mb-2">Cumbre eCommerce 2026</h4>
      <p class="text-sm text-ccs-slate line-clamp-2 dark:text-ccs-dark-text-2">El encuentro más importante del comercio electrónico de la región vuelve este año.</p>
      <div class="mt-4 flex items-center justify-between">
        <span class="inline-flex items-center px-2.5 h-6 rounded-full text-xs font-medium bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Cupos abiertos</span>
        <button class="text-sm font-medium text-ccs-blue hover:underline dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirse</button>
      </div>
    </div>
  </article>
  <article class="rounded-ccs bg-white border border-ccs-line overflow-hidden shadow-ccs-sm hover:shadow-ccs transition dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="ph aspect-[16/10] grid place-items-center outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO · Estudio</div>
    <div class="p-5">
      <div class="flex items-center gap-2 text-xs uppercase tracking-wider font-semibold mb-3">
        <span class="text-ccs-blue-mid dark:text-ccs-dark-accent">Estudio</span>
        <span class="text-ccs-slate dark:text-ccs-dark-text-2">· Q1 2026</span>
      </div>
      <h4 class="text-lg font-semibold leading-tight mb-2">Índice de confianza empresarial</h4>
      <p class="text-sm text-ccs-slate line-clamp-2 dark:text-ccs-dark-text-2">Informe trimestral con la percepción del sector comercio y servicios.</p>
      <button class="mt-4 inline-flex items-center gap-2 h-9 px-3 rounded-ccs border border-ccs-line-strong text-sm font-medium hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-accent dark:hover:border-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
        Descargar PDF
      </button>
    </div>
  </article>
</div>
```

## Con línea · estadísticas

```html
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
  <div class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold dark:text-ccs-dark-text-2">Socios activos</div>
    <div class="text-4xl font-semibold mt-2 leading-none">3.420</div>
    <div class="mt-3 text-sm inline-flex items-center gap-1 text-ccs-success font-medium dark:text-ccs-dark-success">
      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 15 6-6 6 6"/></svg>
      +12,4% YoY
    </div>
  </div>
  <div class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold dark:text-ccs-dark-text-2">Comités</div>
    <div class="text-4xl font-semibold mt-2 leading-none">28</div>
    <div class="mt-3 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Sectores representados</div>
  </div>
  <div class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold dark:text-ccs-dark-text-2">Eventos · 2026</div>
    <div class="text-4xl font-semibold mt-2 leading-none">147</div>
    <div class="mt-3 text-sm inline-flex items-center gap-1 text-ccs-success font-medium dark:text-ccs-dark-success">
      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 15 6-6 6 6"/></svg>
      32 próximos
    </div>
  </div>
  <div class="rounded-ccs p-6 bg-ccs-banner text-white shadow-ccs dark:bg-ccs-banner-dark">
    <div class="text-xs uppercase tracking-wider text-white/80 font-semibold">Asistentes</div>
    <div class="text-4xl font-semibold mt-2 leading-none">42K</div>
    <div class="mt-3 text-sm text-white/90">acumulados al Q1</div>
  </div>
</div>
```

## Con línea · especializadas

```html
<div class="grid lg:grid-cols-3 gap-5">
  <article class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <svg class="w-8 h-8 text-ccs-blue/30 mb-3 dark:text-ccs-dark-accent/30" viewBox="0 0 24 24" fill="currentColor"><path d="M9 7H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v3a2 2 0 0 1-2 2H4v2h1a4 4 0 0 0 4-4V7Zm12 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v3a2 2 0 0 1-2 2h-1v2h1a4 4 0 0 0 4-4V7Z"/></svg>
    <p class="text-sm leading-relaxed">La CCS ha sido clave para articular conversaciones críticas del comercio nacional con una mirada moderna y rigurosa.</p>
    <div class="mt-5 flex items-center gap-3">
      <div class="ph w-10 h-10 rounded-full grid place-items-center text-xs">FOTO</div>
      <div>
        <div class="text-sm font-semibold leading-tight">María José Rojas</div>
        <div class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">CEO, Empresa Socia</div>
      </div>
    </div>
  </article>
  <article class="rounded-ccs bg-white border border-ccs-line shadow-ccs-sm overflow-hidden dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="ph aspect-square grid place-items-center outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO RETRATO</div>
    <div class="p-5">
      <div class="text-xs uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">Directorio</div>
      <h4 class="text-lg font-semibold leading-tight mt-1">Andrés Vergara</h4>
      <p class="text-sm text-ccs-slate mt-1 dark:text-ccs-dark-text-2">Presidente · Comité Comercio Electrónico</p>
      <div class="mt-4 flex items-center gap-2">
        <a href="#" aria-label="LinkedIn de Andrés Vergara" class="w-8 h-8 rounded-lg border border-ccs-line-strong grid place-items-center text-ccs-slate hover:text-ccs-blue hover:border-ccs-blue dark:text-ccs-dark-text-2 dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-accent dark:hover:border-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"><svg aria-hidden="true" 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 href="#" aria-label="Correo de Andrés Vergara" class="w-8 h-8 rounded-lg border border-ccs-line-strong grid place-items-center text-ccs-slate hover:text-ccs-blue hover:border-ccs-blue dark:text-ccs-dark-text-2 dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-accent dark:hover:border-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"><svg aria-hidden="true" class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm-1 3-8 5-8-5V6l8 5 8-5v1Z"/></svg></a>
      </div>
    </div>
  </article>
  <article class="rounded-ccs bg-gradient-to-br from-ccs-blue to-ccs-blue-mid text-white shadow-ccs p-6 relative overflow-hidden">
    <div class="absolute -right-10 -bottom-10 w-40 h-40 rounded-full bg-ccs-green-br/20 blur-2xl"></div>
    <div class="relative">
      <div class="text-xs uppercase tracking-widest opacity-80 font-semibold">Comité destacado</div>
      <h4 class="text-2xl font-semibold leading-tight mt-2">Comité de Comercio Electrónico</h4>
      <p class="text-sm opacity-90 mt-3">28 integrantes activos · 12 sesiones anuales</p>
      <div class="mt-6 flex -space-x-2">
        <div class="ph w-8 h-8 rounded-full border-2 border-ccs-blue grid place-items-center text-[8px] dark:border-ccs-dark-accent"></div>
        <div class="ph w-8 h-8 rounded-full border-2 border-ccs-blue grid place-items-center text-[8px] dark:border-ccs-dark-accent"></div>
        <div class="ph w-8 h-8 rounded-full border-2 border-ccs-blue grid place-items-center text-[8px] dark:border-ccs-dark-accent"></div>
        <div class="w-8 h-8 rounded-full border-2 border-ccs-blue bg-white/20 grid place-items-center text-xs font-medium dark:border-ccs-dark-accent">+25</div>
      </div>
      <button class="mt-6 h-10 px-4 rounded-ccs bg-white text-ccs-blue text-sm font-medium hover:bg-ccs-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100">Conocer al comité</button>
    </div>
  </article>
</div>
```