Blog

/* Contenedor del panel */ .categorias-wrapper { width: 100%; background: transparent; } /* Header del panel */ .categorias-header { text-align: center; margin-bottom: 2rem; } .categorias-titulo { font-size: 1.85rem; font-weight: 700; color: #1E293B; margin-bottom: 0.5rem; letter-spacing: -0.3px; } .categorias-titulo::before { content: “📚 “; font-size: 1.85rem; } .categorias-subtitulo { color: #5a6874; font-size: 0.9rem; } /* Grid responsive */ .categorias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } /* Tarjeta individual */ .categoria-card { background: white; border-radius: 1.25rem; padding: 1.5rem; display: flex; align-items: center; gap: 1rem; text-decoration: none; border: 1px solid #eef2f8; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); } .categoria-card:hover { border-color: #0374EB; box-shadow: 0 12px 22px -12px rgba(3, 116, 235, 0.18); transform: translateY(-3px); } /* Icono */ .card-icon { width: 52px; height: 52px; background: #f0f7fe; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; transition: background 0.2s; } .categoria-card:hover .card-icon { background: #0374EB10; } /* Contenido */ .card-content { flex: 1; } .card-titulo { font-size: 1.2rem; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; letter-spacing: -0.2px; } .card-descripcion { font-size: 0.8rem; color: #5c6a7a; line-height: 1.4; } /* Flecha */ .card-arrow { font-size: 1.2rem; color: #cbd5e1; transition: transform 0.2s ease, color 0.2s; flex-shrink: 0; } .categoria-card:hover .card-arrow { color: #0374EB; transform: translateX(4px); } /* Responsive */ @media (max-width: 768px) { .categorias-titulo { font-size: 1.5rem; } .categorias-titulo::before { font-size: 1.5rem; } .categorias-grid { grid-template-columns: 1fr; gap: 1rem; } .categoria-card { padding: 1.2rem; } .card-icon { width: 44px; height: 44px; font-size: 1.4rem; } .card-titulo { font-size: 1.1rem; } } @media (max-width: 480px) { .categorias-titulo { font-size: 1.3rem; } .categoria-card { padding: 1rem; } .card-icon { width: 40px; height: 40px; font-size: 1.2rem; } .card-titulo { font-size: 1rem; } .card-descripcion { font-size: 0.75rem; } }