/* =========================================================================
   Grid reutilizable de las 5 secciones raíz del catálogo
   =========================================================================
   Usado en:
     - Home (bloque "Nuestro catálogo")
     - Final de la página de familia (cross-linking al catálogo)
     - Posible reuso futuro en detalle producto, etc.

   HTML esperado:
     <div class="sec-grid">
         <a class="sec-grid-tile" href="/…">
             <div class="sec-grid-tile-img"><img …></div>
             <div class="sec-grid-tile-body">
                 <h3 class="sec-grid-tile-title">…</h3>
                 <span class="sec-grid-tile-cta">Ver más →</span>
             </div>
         </a>
         … × 5
     </div>

   Responsive: 5 cols desktop, 3 tablet, 2 mobile ancho, 1 móvil.
   ========================================================================= */

.sec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
@media (min-width: 640px)  { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .sec-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 1200px) { .sec-grid { grid-template-columns: repeat(5, 1fr); } }

.sec-grid-tile {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.sec-grid-tile::after {
    /* Línea roja inferior — sale de derecha a izquierda al hover */
    content: '';
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 3px;
    background: var(--c-brand);
    transition: right var(--t-base);
}
.sec-grid-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-md);
    color: inherit;
}
.sec-grid-tile:hover::after { right: 0; }

.sec-grid-tile-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f6f7f9;
}
.sec-grid-tile-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.sec-grid-tile:hover .sec-grid-tile-img img { transform: scale(1.06); }

.sec-grid-tile-body {
    padding: var(--sp-4) var(--sp-5);
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
}
.sec-grid-tile-title {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    letter-spacing: -0.01em;
    /* 2 líneas máximo para que todas las cards tengan la misma altura visual */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.sec-grid-tile:hover .sec-grid-tile-title { color: var(--c-brand); }

.sec-grid-tile-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-brand);
    margin-top: auto;
}
.sec-grid-tile-cta svg { transition: transform var(--t-base); }
.sec-grid-tile:hover .sec-grid-tile-cta svg { transform: translateX(4px); }