/* Índice de Nexo Tools. El armazón —cabecera, hero, pie, botones— viene de
   generador-qr/styles.css, igual que en mi-qr y privacidad. Aquí solo va la
   lista de herramientas. */

.catalogo{padding-block:clamp(38px,5vw,62px)}

/* Una lista, no una cuadrícula de tarjetas iguales: son pocas herramientas y
   cada una merece que se lea qué hace antes de entrar. */
.tool-list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.tool-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:clamp(18px,2.6vw,24px);
  border:1px solid var(--line);border-radius:18px;
  background:var(--surface);box-shadow:var(--shadow);
  transition:border-color .15s ease,transform .15s ease
}
.tool-card:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));transform:translateY(-1px)}

.tool-mark{
  display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto;
  border-radius:15px;background:var(--ink);color:#fff;
  font-family:"Archivo",sans-serif;font-size:17px;font-weight:800;letter-spacing:-.02em
}
.tool-card:nth-child(even) .tool-mark{background:var(--orange);color:#08192C}

.tool-body{min-width:0;display:grid;gap:8px;align-content:start}
.tool-body h3{font-size:20px;letter-spacing:-.025em}
/* El enlace cubre la tarjeta entera: el título es el objetivo accesible y el
   resto del área es clicable sin anidar enlaces dentro de un enlace. */
.tool-body h3 a{text-decoration:none;color:var(--text)}
.tool-body h3 a::after{content:"";position:absolute;inset:0;border-radius:18px}
.tool-body h3 a:hover{color:var(--orange)}
.tool-card{position:relative}
.tool-body p{color:var(--muted);font-size:15.5px;line-height:1.5}

.tool-tags{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 0;padding:0;list-style:none}
.tool-tags li{
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface-2);color:var(--muted);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em
}

.catalogo-nota{margin-top:22px;color:var(--muted);font-size:14.5px;line-height:1.55}
.catalogo-nota a{color:var(--blue);font-weight:700}

@media (max-width:560px){
  .tool-card{grid-template-columns:1fr;gap:13px}
  .tool-mark{width:44px;height:44px;font-size:15px}
  .tool-body h3{font-size:18px}
}