/* === ALC Abogados · componente "cp-grid" ===
   Reglas portadas verbatim de design/css/sections.css (líneas 467-486). NO reescribir. */

.cp-grid { background: var(--paper); padding: 96px 56px; }
.cp-grid.dark { background: var(--paper-2); }
.cp-grid-inner { max-width: var(--max); margin: 0 auto; }
.cp-grid-head { margin-bottom: 48px; max-width: 760px; }
.cp-grid-head .cp-h2 { font-size: clamp(28px, 3.4vw, 44px); }
.cp-grid-items { display: grid; gap: 18px; }
.cp-grid-card { padding: 28px 28px 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; gap: 10px; transition: all .2s ease; }
.cp-grid.dark .cp-grid-card { background: var(--paper); }
.cp-grid-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(10,28,51,0.06); }
.cp-grid-num { font-size: 12px; color: var(--accent-deep); font-weight: 700; }
.cp-grid-title { font-size: 20px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; }
.cp-grid-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cp-grid-bullets { list-style: none; padding: 10px 0 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); }
.cp-grid-bullets li { font-size: 13.5px; color: var(--ink-2); padding-left: 16px; position: relative; line-height: 1.4; }
.cp-grid-bullets li::before { content: "→"; position: absolute; left: 0; color: var(--accent-deep); font-weight: 700; }
.cp-grid-card-link { text-decoration: none; color: inherit; cursor: pointer; }
.cp-grid-arr { display: inline-flex; align-items: center; gap: 8px; padding-top: 12px; margin-top: auto; font-size: 13px; font-weight: 600; color: var(--accent-deep); border-top: 1px solid var(--line); transition: gap .15s; }
.cp-grid-card-link:hover .cp-grid-arr { gap: 12px; color: var(--ink); }
@media (max-width: 900px) { .cp-grid { padding: 56px 20px; } .cp-grid-items { grid-template-columns: 1fr !important; } }


/* FIX columnas: el diseño fijaba grid-template-columns inline (repeat(N,1fr)).
   Acá: auto-fit por defecto (se acomoda solo según ancho/cantidad) y, si el
   control "Columnas" del widget fija un número, se consume vía --cols. */
.cp-grid-items { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cp-grid-items[style*="--cols"] { grid-template-columns: repeat(var(--cols), 1fr); }