/* ── Común ─────────────────────────────────────── */
    .ruta-cat  { display:inline-block; padding:3px 10px; border-radius:20px;
                 font-size:.68rem; font-weight:700; text-transform:uppercase;
                 letter-spacing:.05em; margin-bottom:8px; }
    .ruta-title { font-size:1.05rem; font-weight:800; color:#1e293b; margin:0 0 8px; line-height:1.3; }
    .ruta-desc  { font-size:.82rem; color:#64748b; line-height:1.6; margin:0; }
    .ruta-meta  { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .ruta-chip  { font-size:.7rem; color:#64748b; display:flex; align-items:center; gap:4px; }
    .ruta-tags  { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .ruta-tag   { background:#f1f5f9; color:#475569; font-size:.68rem; padding:2px 8px;
                  border-radius:20px; font-weight:500; }
    .ruta-btn   { display:inline-block; margin-top:12px; padding:8px 16px; border-radius:8px;
                  background:#0a9396; color:#fff; text-decoration:none; font-size:.78rem;
                  font-weight:700; transition:opacity .15s; }
    .ruta-btn:hover { opacity:.85; color:#fff; }

    /* ── Magazine layout ────────────────────────────── */
    .mag-hero   { border-radius:16px; overflow:hidden; background:#fff;
                  box-shadow:0 4px 20px rgba(0,0,0,.1); max-width:1100px; margin:0 auto 28px;
                  display:grid; grid-template-columns:1fr 420px; min-height:340px; }
    .mag-hero-img { position:relative; overflow:hidden; }
    .mag-hero-img img { width:100%; height:100%; object-fit:cover; }
    .mag-hero-img .mag-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,.0),rgba(0,0,0,.15)); }
    .mag-hero-body { padding:32px 36px; display:flex; flex-direction:column; justify-content:center; }
    .mag-hero-body .ruta-title { font-size:1.5rem; }
    .mag-hero-body .ruta-desc  { font-size:.9rem; -webkit-line-clamp:4; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
    .mag-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
                  gap:20px; max-width:1100px; margin:0 auto; }
    .mag-card   { background:#fff; border-radius:14px; overflow:hidden;
                  box-shadow:0 2px 12px rgba(0,0,0,.08); transition:transform .2s,box-shadow .2s; }
    .mag-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.13); }
    .mag-card-img { height:180px; overflow:hidden; position:relative; }
    .mag-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
    .mag-card:hover .mag-card-img img { transform:scale(1.05); }
    .mag-card-body { padding:16px 18px 18px; }

    /* ── Grid layout ────────────────────────────────── */
    .ruta-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
                  gap:24px; max-width:1200px; margin:0 auto; }
    .ruta-grid-card { background:#fff; border-radius:14px; overflow:hidden;
                      box-shadow:0 2px 12px rgba(0,0,0,.08); transition:transform .2s; }
    .ruta-grid-card:hover { transform:translateY(-4px); }
    .ruta-grid-img { height:200px; overflow:hidden; }
    .ruta-grid-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
    .ruta-grid-card:hover .ruta-grid-img img { transform:scale(1.05); }
    .ruta-grid-body { padding:18px 20px 20px; }

    /* ── Horizontal scroll ──────────────────────────── */
    .ruta-hscroll { display:flex; gap:20px; overflow-x:auto; padding:8px 4px 20px;
                    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
                    max-width:1100px; margin:0 auto; }
    .ruta-hscroll::-webkit-scrollbar { height:4px; }
    .ruta-hscroll::-webkit-scrollbar-track { background:#e2e8f0; border-radius:2px; }
    .ruta-hscroll::-webkit-scrollbar-thumb { background:#0a9396; border-radius:2px; }
    .ruta-hcard { flex:0 0 300px; background:#fff; border-radius:14px; overflow:hidden;
                  box-shadow:0 2px 12px rgba(0,0,0,.08); scroll-snap-align:start; }
    .ruta-hcard-img { height:180px; overflow:hidden; }
    .ruta-hcard-img img { width:100%; height:100%; object-fit:cover; }
    .ruta-hcard-body { padding:16px 18px 18px; }

    /* ── Placeholder sin imagen ─────────────────────── */
    .ruta-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#0a9396,#14213d);
                        display:flex; align-items:center; justify-content:center; font-size:3rem; }

    @media(max-width:768px) {
      .mag-hero { grid-template-columns:1fr; }
      .mag-hero-img { height:220px; }
      .mag-hero-body { padding:20px; }
    }